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​

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:

Mindmap​

Quadrant Chart​

Architecture Diagram​

ELK Styling​

Mermaid provides an ELK layout

Dagre​

This is a "classical" Mermaid diagram, using the default Dagre layout.

ELK er diagram layout​

This ER diagram should look different, using the ELK layout.

Mermaid also provides a way of setting config parameters using a directive %%{init:{"layout":"elk"}}%%