Guides
Mermaid diagram guides
One page per diagram type: the syntax you need, the mistakes that break rendering (including the ones AI assistants make), and answers to the questions that come up. Every example opens in the editor with one click. For a single-page overview, see the cheatsheet.
Flow & Process
Structure
-
Class Diagram
A UML class diagram with fields, methods, visibility modifiers, and relationships (inheritance, composition, association).
-
Entity Relationship
An entity-relationship diagram for database schemas.
-
Requirement
A SysML-style requirements diagram with typed requirements, risk levels, and verification methods.
-
Packet
A bit-level packet layout with labelled byte ranges.
State & Time
Visualization
System & Other
-
Mindmap
A radial outline that branches from a single root concept.
-
Block
A grid of labelled blocks with arrows for relationships.
-
Architecture
A topology of services grouped into clouds, with explicit edge directions (`R`, `L`, `T`, `B`).
-
Git Graph
A git history with branches, commits, merges, and tags.
-
ZenUML
An alternative sequence-diagram syntax with explicit lifecycles for Actor, Boundary, Control, and Entity.