I’m trying to use the “Rendering of Mermaid Graphs” widget from the Mendix Marketplace to visualize a flowchart dynamically in my app.

0
  I have a list of operations (e.g., Operation 10b, 10c, etc.) and each one has a type like: Operation Inspection Storage Rework I want to display this flow visually in a row-by-row style using Mermaid syntax. The idea is to show each operation in its corresponding column (based on type) and connect them using arrows (→) in a proper sequence.   Any examples, tips, or even just a direction to look in would be really helpful. If someone has done something similar, please share your insights! Thanks 🙏  
asked
1 answers
0

Hi Chandani,

 

From the Mermaid widget itself, they advise to look into the mermaid project's pages (mermaid project's pages) to learn how to properly fill the graph. 

 

Plus, you have a lot of examples from the Getting Started / Demo Page.

 

Please see below the transcription of the widget's usage instructions (from the Marketplace Widget's Documentation) 

 

  1. Create or use an entity with a string attribute (long enough to carry the graph definition)
  2. Fill it somehow. Extensive documentation about the graph definition language on the mermaid project's pages.
  3. Place the mermaid widget on a page and configure it to use the string attribute
  4. Further Settings:
    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.)
    2. Option to display a SVG download button and respective settings for button caption and button style
    3. OnClick action:Option to select what happens if someone clicks on the Graph

 

Hope this helps,

João

answered