After a lot of tinkering and trial and error, I am pleased to announce that I have a mermaid.js custom widget working!
The mermaid.js widget needs read access, and it needs to know which column contains the mermaid.js text. It will take the mermaid.js text and render it to a mermaid.js chart.
I may end up moving the urls around, but if someone wanted to try this out and let me know what they think, that would be great! I hope the Grist community will find this useful.
Note: this widget seems to work well on a desktop, but does not work correctly on a mobile device… I will have to do some digging to figure out how to fix it.
And here is a construction of a mermaid chart from the metadata of a Grist template to show the database schema of the document, which will update as you change columns or tables:
Thank you so much for trying it out! I’m glad you like it!
So, I mentioned about moving the url around… The long-term home for this widget will be https://grist-widgets.nicobako.me/mermaid/index.html. The old url should still work though.
Hi @nicobako,
starting from your great work, I developed my own mermaid viewer widget, because I had a visualization lag with your. I integrated it with Vue.js
This is awesome! I’m glad my code was a good starting point for you!
I knew mine had some issues, but I’m new to writing custom grist widgets, and couldn’t figure out how to fix them. I’m going to take a look at yours and see how you did things. Thanks!
