跳到主要内容

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:

Mindmap

Quadrant Chart