Mermaid Diagram Types
Mermaid.js supports a wide variety of diagram types that can be organized into several major categories based on their primary purpose and use cases.
1. Process & Flow Diagrams
These diagrams illustrate workflows, processes, and sequential operations.
- Flowchart/Graph - General-purpose flowcharts showing decision points, processes, and flow direction
- State Diagram - Models state transitions and lifecycle of systems or objects
- Sequence Diagram - Shows interactions between entities over time in a sequential order
- User Journey - Maps user experiences and touchpoints across different stages
2. Structural & Relationship Diagrams
These diagrams model the structure and relationships between components or entities.
- Class Diagram - Object-oriented design showing classes, attributes, methods, and relationships
- Entity Relationship (ER) Diagram - Database schemas showing entities, attributes, and relationships
- C4 Diagram - Software architecture context, containers, components, and code views
- Block Diagram - High-level system component diagrams showing functional blocks
3. Data Visualization & Charts
These diagrams present quantitative data and metrics visually.
- Pie Chart - Proportional data representation in circular format
- Gantt Chart - Project timelines, tasks, and dependencies
- Timeline - Chronological events and milestones
- XY Chart - Coordinate-based data plotting (line, bar, scatter plots)
- Sankey Diagram - Flow quantities between nodes, showing proportional relationships
4. Network & Graph Visualizations
These diagrams represent networks, hierarchies, and connected structures.
- Git Graph - Version control branches, commits, and merges
- Mindmap - Hierarchical concept mapping and brainstorming
- Graph Network - Generic node-edge relationships and network topologies
5. Requirements & Documentation
These diagrams support technical specifications and system requirements.
- Requirement Diagram - System requirements, relationships, and traceability
- Packet Diagram - Network packet structures and protocol headers
- Quadrant Chart - 2x2 matrix for categorization and prioritization
6. Specialized Diagrams
Other domain-specific or unique visualization types.
- ZenUML - Alternative sequence diagram syntax
- Architecture Diagram - Cloud and system architecture layouts
Each diagram type serves specific documentation and communication needs, from software design to project management to data analysis.
1---2name: mermaid-diagram-types3description: Mermaid.js supports a wide variety of diagram types that can be organized into several major categories based on their primary purpose and use cases.4---5# Mermaid Diagram Types67Mermaid.js supports a wide variety of diagram types that can be organized into several major categories based on their primary purpose and use cases.89## 1. Process & Flow Diagrams10These diagrams illustrate workflows, processes, and sequential operations.11121. Flowchart/Graph - General-purpose flowcharts showing decision points, processes, and flow direction131. State Diagram - Models state transitions and lifecycle of systems or objects141. Sequence Diagram - Shows interactions between entities over time in a sequential order151. User Journey - Maps user experiences and touchpoints across different stages1617## 2. Structural & Relationship Diagrams18These diagrams model the structure and relationships between components or entities.19201. Class Diagram - Object-oriented design showing classes, attributes, methods, and relationships211. Entity Relationship (ER) Diagram - Database schemas showing entities, attributes, and relationships221. C4 Diagram - Software architecture context, containers, components, and code views231. Block Diagram - High-level system component diagrams showing functional blocks2425## 3. Data Visualization & Charts26These diagrams present quantitative data and metrics visually.27281. Pie Chart - Proportional data representation in circular format291. Gantt Chart - Project timelines, tasks, and dependencies301. Timeline - Chronological events and milestones311. XY Chart - Coordinate-based data plotting (line, bar, scatter plots)321. Sankey Diagram - Flow quantities between nodes, showing proportional relationships3334## 4. Network & Graph Visualizations3536These diagrams represent networks, hierarchies, and connected structures.37381. Git Graph - Version control branches, commits, and merges391. Mindmap - Hierarchical concept mapping and brainstorming401. Graph Network - Generic node-edge relationships and network topologies4142## 5. Requirements & Documentation43These diagrams support technical specifications and system requirements.44451. Requirement Diagram - System requirements, relationships, and traceability461. Packet Diagram - Network packet structures and protocol headers471. Quadrant Chart - 2x2 matrix for categorization and prioritization4849## 6. Specialized Diagrams50Other domain-specific or unique visualization types.51521. ZenUML - Alternative sequence diagram syntax531. Architecture Diagram - Cloud and system architecture layouts5455Each diagram type serves specific documentation and communication needs, from software design to project management to data analysis.
tools-only