← Back to editor

Learn by editing

Mermaid guides, examples and troubleshooting

From an idea to a clear diagram.

Working examples, the syntax behind them, and fixes for the moments when your diagram does not look right.

More starting points

Approval workflow

Edit this approval request workflow in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

API request

Edit this API request lifecycle in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Team org chart

Edit this small team reporting structure in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Order data model

Edit this order data model in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Release plan

Edit this dependent release schedule in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Background job states

Edit this background job state machine in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Bold and multiline labels

Edit this formatted delivery flow in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Class relationships

Edit this notification interface model in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

3-tier corporate

Edit this three-tier company chart in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

5-tier enterprise

Edit this 5-tier enterprise diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Matrix org

Edit this matrix org diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Family tree

Edit this family tree diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Hybrid layout demo

Edit this hybrid layout demo diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Linear flow

Edit this linear flow diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Decision tree

Edit this account entry decision in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Swim lanes

Edit this cross-team form workflow in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

API call

Edit this api call diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

OAuth flow

Edit this OAuth sign-in sequence in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Inheritance

Edit this animal inheritance model in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Observer pattern

Edit this observer pattern class model in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

E-commerce

Edit this e-commerce diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Order lifecycle

Edit this commerce order lifecycle in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Sprint

Edit this sprint diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Brainstorm

Edit this product discovery mindmap in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Roadmap

Edit this quarterly product roadmap in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Pie

Edit this browser usage breakdown in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Quadrant

Edit this reach and impact prioritisation in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Git graph

Edit this feature branch history in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Sankey flow

Edit this sankey flow diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

C4 context

Edit this c4 context diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

Block layout

Edit this block layout diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

XY chart

Edit this xy chart diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →

User journey

Edit this user journey diagram in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

Open example →