Mermaid Flowcharts & Sequence Diagrams in Markdown

Mermaid is a JavaScript-based diagramming and charting tool that uses text and code to generate visualizations. By wrapping Mermaid syntax inside a standard Markdown fenced code block, you can instantly render complex flowcharts, sequence diagrams, Gantt charts, class diagrams, and more.

How to use Mermaid in Markdown

To render a Mermaid diagram, use a fenced code block with the language identifier mermaid.

syntax graph TD; A-->B; A-->C; B-->D; C-->D;

Mermaid

1. Flowcharts

Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines).

Graph Direction

You start by declaring a graph or flowchart and its direction:

• TB or TD: Top to bottom
• BT: Bottom to top
• RL: Right to left
• LR: Left to right

Node Shapes

Different brackets represent different shapes:

• id1(This is a rounded rectangle)
• id2[This is a sharp rectangle]
• id3{This is a diamond decision}
• id4((This is a circle))
• id5>This is an asymmetric shape]
• id6[/This is a parallelogram/]

Example: Complex Flowchart

syntax flowchart LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] style A fill:#bf0603,stroke:#333,stroke-width:2px,color:#fff style C fill:#f9f,stroke:#333,stroke-width:4px

Mermaid

2. Sequence Diagrams

Sequence diagrams are perfect for detailing how operations are carried out—what messages are sent and when.

Participants and Actors

You can implicitly define participants or explicitly declare them:

syntax sequenceDiagram actor U as User participant S as Server participant DB as Database U->>S: POST /login activate S S->>DB: Query User activate DB DB-->>S: User Data deactivate DB alt is valid password S-->>U: 200 OK (Token) else is invalid password S-->>U: 401 Unauthorized end deactivate S

Mermaid

Key Syntax Elements:

• ->> represents a solid line arrow (sync call).
• -->> represents a dashed line arrow (async/return).
• activate and deactivate create the thick vertical bars on the lifelines.
• alt and else create logic loops to show different paths.

3. Gantt Charts

Gantt charts are useful for tracking project schedules.

syntax gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2026-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2026-01-12 , 12d another task : 24d

Mermaid

Next Steps

Mermaid supports rapidly expanding features including State Diagrams, Class Diagrams, Git Graphs, Entity Relationship Diagrams, and Pie Charts. Because it renders instantly in the browser, it is the perfect companion to standard Markdown documentation.