/
Live demo

Live demo

Flowchart

Flowcharts can be created based on the Mermaid syntax. Click here to see the live demo.

Sequence diagram

Sequence diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Gantt diagram

Gantt diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Class diagram

Class diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Git graph

Git graphs can be created based on the Mermaid syntax. Click here to see the live demo.

Entity relationship diagram

Entity relationship diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Pie chart

Pie charts can be created based on the Mermaid syntax. Click here to see the live demo.

State diagram

State diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

User journey diagram

User journey diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Mindmap

Mindmaps can be created based on the Mermaid syntax. Click here to see the live demo.

 

Timeline

Timeline diagrams can be created based on the Mermaid syntax. Live Demo - Timeline.

C4 diagram

C4 diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

 

 

Quadrant chart

Quadrant charts can be created based on the Mermaid syntax. Click here to see the live demo.

Requirement diagram

Requirement diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Sankey diagram

Sankey diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

XY chart

XY charts can be created based on the Mermaid syntax. Click here to see the live demo.

Block diagram

image-20240208-103634.png

Block diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Packet diagram

image-20240912-143547.png

Packet diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Architecture diagram

image-20240912-143651.png

Architecture diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Kanban board

image-20241129-132547.png

Kanban boards can be created based on the Mermaid syntax. Click here to see the live demo.

Radar diagram

image-20250425-144225.png

Radar diagrams can be created based on the Mermaid syntax. Click here to see the live demo.

Treemap diagram

image-20250704-132659.png

Treemap diagrams can be created based on the Mermaid syntax. Click here to see the live demo.