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