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: