Skip to main content

Diagram Examples

Invalid Diagrams​

Those errors should not crash the whole page

Invalid type​

Invalid content​

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​

With Markdown:​

Class Diagram​

State Diagram​

Entity Relationship Diagram​

User Journey​


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:


Quadrant Chart​