Skip to main content

Diagram Examples

Sequence Diagram

Sequence Diagram (forest theme directive)

It is possible to override default config locally with Mermaid text directives such as:

%%{init: { "theme": "forest" } }%%

Gantt Chart

Flow Chart

Class Diagram

State Diagram

Entity Relationship Diagram

User Journey

note

If there's too much space above it's due to a Mermaid bug

Pie Chart

Requirement Diagram

Gitgraph (Git) Diagram

Mermaid in tabs

The following mermaid diagram is shown: