Mermaid

Last updated May 24, 2024

JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Generate images like below with just text:

Making it git and collaboration ready.

A simple example you can see inDAG.

• TD or TB: This declares the flowchart is oriented from top to bottom
• LR: Horizontal

More on About Mermaid.

• Flowchart
• Sequence Diagram
• Class Diagram
• State Diagram
• Entity Relationship Diagram
• User Journey
• Gantt
• Pie Chart
• Quadrant Chart
• Requirement Diagram
• Gitgraph (Git) Diagram
• C4 Diagram 🦺⚠️
• Mindmaps
• Timeline
• Zenuml
• Sankey
• XYChart 🔥
• Block Diagram 🔥
• Other Examples

gantt
    title Gantt Chart with Mermaid
    dateFormat X
    axisFormat %s
    section Apple
    Apple   : 0, 100
    section Bananas
    75   : 0, 75
    section Oranges
    150   : 0, 150

gantt
    title Gantt Chart with Mermaid
    dateFormat X
    axisFormat %s
    Apple   : 0, 100
    Bananas   : 0, 75
    Oranges   : 0, 150

More powerful seems to be PlantUML, but Mermaid is the standard for Markdown and supported for most web like GitHub, Obsidian, Quartz, etc.

Origin:
References: