Mermaid Component
Automatically generate flowcharts and diagrams from JSON.
Last updated:
The Mermaid Component turns your structured data into beautiful, documentation-ready diagrams using the Mermaid.js engine.
⚙️ Supported Diagrams
- Flowcharts: Visualize process flows or decision trees.
- Class Diagrams: Represent object structures and relationships.
- Entity Relationship (ER): Show how different data entities connect.
- Mind Maps: Brainstorm and organize hierarchical data.
🛠️ Functionality
The component attempts to intelligently map your JSON structure to the requested diagram type. For example:
- An array of objects with
idandparentIdcan be automatically rendered as a Mind Map. - A list of objects with "links" or "references" can be visualized as a Flowchart.
📤 Export
Once generated, you can export your diagram as an SVG or PNG file, or copy the generated Mermaid code for use in GitHub, Notion, or other Markdown-supporting tools.
🖥️ Fullscreen Diagramming
Double-click the Mermaid node to enter a fullscreen editor. You can change the diagram type (Flowchart, Sequence, ER Diagram, etc.) and preview the results in real-time as your pipeline data changes.