Mermaid Diagrams draws every diagram type in Mermaid 12.1, the version the official Mermaid Live Editor uses. This page lists them with the first line that starts each one, the snippet to begin from, and the official syntax.
The first line of the code decides the type. For example, a diagram that starts with sequenceDiagram is a sequence diagram.
Processes and flows
| Type | First line | What it's for | Snippet | Syntax |
|---|
| Flowchart | flowchart TD (or graph) | Processes, decisions, workflows | Flowchart, Flowchart: Subgraphs and Styles | Flowchart |
| Swimlane | swimlane-beta | Who does what, lane by lane | Swimlane Process | Syntax reference |
| State diagram | stateDiagram-v2 | Statuses and transitions, such as a work item's lifecycle | State Diagram | State diagram |
| User journey | journey | A user's experience, step by step, with scores | User Journey | User journey |
| Agent flow | agentflow-beta | AI agent steps, tools and hand-offs | Agent Flow | Agent flow |
| Event modeling | eventmodeling | Commands, events and views over time | - | Event modeling |
Software and data
| Type | First line | What it's for | Snippet | Syntax |
|---|
| Sequence diagram | sequenceDiagram | API calls, service interactions, sign-in flows | Sequence Diagram, Sequence Diagram: API Flow | Sequence diagram |
| Class diagram | classDiagram | Classes, interfaces and their relationships | Class Diagram | Class diagram |
| Entity relationship | erDiagram | Database tables and relationships | Entity Relationship Diagram, Entity Relationship Diagram: Data Model | ER diagram |
| Use case | usecase-beta | Who uses a system, and for what | Use Case Diagram | Use case |
| Requirement diagram | requirementDiagram | Requirements and what satisfies them | Requirement Diagram | Requirement diagram |
| Git graph | gitGraph | Branches, commits and merges | Git Graph Diagram | Git graph |
| Packet | packet | Network packet and message layouts | Packet Diagram | Packet |
| Tree view | treeView-beta | Folder and file trees | Folder Tree | Tree view |
| Railroad | railroad-beta | Grammar and syntax rules | - | Railroad |
Architecture
| Type | First line | What it's for | Snippet | Syntax |
|---|
| Architecture | architecture-beta | Cloud and service architecture with product icons | Architecture with Icons | Architecture |
| C4 | C4Context, C4Container, C4Component, C4Dynamic, C4Deployment | Systems at different zoom levels | C4 Context Diagram | C4 |
| Block diagram | block | Blocks placed exactly where you want them | Block Diagram | Block |
Architecture diagrams can use icons from two sets that ship with the app: logos: (cloud and technology logos, such as logos:aws-lambda or logos:kubernetes) and mdi: (general icons, such as mdi:server). Find names at icones.js.org. An unknown name shows a question mark.
Planning
| Type | First line | What it's for | Snippet | Syntax |
|---|
| Gantt | gantt | Schedules, release plans, dependencies | Gantt Diagram, Gantt Diagram: Release Plan | Gantt |
| Timeline | timeline | Events and milestones in order | Timeline Diagram | Timeline |
| Kanban | kanban | Work in columns, like a board | Kanban | Kanban |
Ideas and analysis
| Type | First line | What it's for | Snippet | Syntax |
|---|
| Mind map | mindmap | Brainstorming and topic hierarchies | Mind Map | Mind map |
| Fishbone (Ishikawa) | ishikawa | Root causes of a problem | Fishbone (Ishikawa) Diagram | Ishikawa |
| Quadrant chart | quadrantChart | Items on a 2×2 grid, such as effort and impact | Quadrant Chart | Quadrant chart |
| Venn diagram | venn-beta | Overlaps between groups | Venn Diagram | Venn |
| Wardley map | wardley-beta | Value chains and how mature each part is | - | Wardley |
| Cynefin | cynefin-beta | Sorting problems by how predictable they are | - | Cynefin |
Charts
| Type | First line | What it's for | Snippet | Syntax |
|---|
| Pie chart | pie | Shares of a whole | Pie Chart | Pie |
| XY chart | xychart | Bar and line charts | XY Chart | XY chart |
| Radar chart | radar-beta | Comparing items across several measures | Radar Chart | Radar |
| Treemap | treemap-beta | Hierarchical shares as nested boxes | Treemap | Treemap |
| Sankey | sankey | Flows between categories, such as budgets | Sankey Diagram | Sankey |
Older first lines
Code written for earlier Mermaid versions still works. These first lines are accepted too: graph, flowchart-elk, stateDiagram, classDiagram-v2, requirement, and the -beta forms of types that are no longer in beta, such as xychart-beta, sankey-beta, block-beta and packet-beta.