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​

Pie Chart​

Requirement Diagram​

Gitgraph (Git) Diagram​

Mermaid in tabs​

Mindmap​

Quadrant Chart​

Architecture Diagram​

• See https://mermaid.js.org/syntax/architecture
• See https://github.com/facebook/docusaurus/discussions/10508

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"}}%%