Renders mermaid graph markup code using the great mermaid library (v8.14) for
- Flow diagrams (top down and left to right)
- Sequence diagrams
- Gantt charts
- Class digrams
- Entity relationship diagrams
- Github diagrams (experimental)
- uses any Mendix entity string attribute for the Graph Definition
- displays a rendering error 'alert style'
- provides optional button to save the resulting SVG locally
- can have an onClick action
- Create or use an entity with a string attribute (long enough to carry the graph definition)
- Fill it somehow. Extensive documentation about the graph definition language on the mermaid project's pages.
- Place the mermaid widget on a page and configure it to use the string attribute
- Further Settings: 4.1 Mermaid CSS properties: Allows to provide mermaid with a couple of Cascading styles that influence color, paddings etc. of the graph itself. (Not super easy to use - however a mermaid implementation topic.) 4.2 Option to display a SVG download button and respective settings for button caption and button style 4.3 OnClick action:Option to select what happens if someone clicks on the Graph
- Would love to be able to pass the resulting SVG into a system.image but failed to far to get that sorted.
- Styling the graph is tricky. I would love to find an easy way to impose bootstrap styles properly.
- OnCLick Action does not pass any information about where the user has clicked.
- Uses Pluggable Widget technology, so I guess that's >Mendix 8.4
- Mermaid Library 8.14. License: MIT
A small demo project can be found here: https://mermaid100-sandbox.mxapps.io/
[link to GitHub issues]
Thanks to Andrei Buntsev for helping me to integrate this in Mendix Thanks and kudos to Knut Sveidqvist for inventing mermaid and to all of the mermaid contributors.