Mermaid Charts Integration

[nicobako]

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.

Here is an example Grist table using the widget: Grist Widgets - Grist

The custom widget is available at this url: https://nicobako.github.io/grist-widgets/mermaid/index.html

The source code is available here: grist-widgets/mermaid at main · nicobako/grist-widgets · GitHub.

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.

[nicobako]

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.

[dmitry-grist]

This is awesome. Here are some screenshots from @nicobako’s doc to make the coolness more visible

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:

Lightweight CRM - Grist

[nicobako]

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.