Ir para o conteúdo principal

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