# 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.

- Skill: `tools-only/mermaid-diagram-types` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/mermaid-diagram-types`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/mermaid-diagram-types/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-29
- Page: https://skillmd.com/skills/tools-only/mermaid-diagram-types

---

# 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.

1. Flowchart/Graph - General-purpose flowcharts showing decision points, processes, and flow direction
1. State Diagram - Models state transitions and lifecycle of systems or objects
1. Sequence Diagram - Shows interactions between entities over time in a sequential order
1. 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.

1. Class Diagram - Object-oriented design showing classes, attributes, methods, and relationships
1. Entity Relationship (ER) Diagram - Database schemas showing entities, attributes, and relationships
1. C4 Diagram - Software architecture context, containers, components, and code views
1. Block Diagram - High-level system component diagrams showing functional blocks

##  3. Data Visualization & Charts
These diagrams present quantitative data and metrics visually.

1. Pie Chart - Proportional data representation in circular format
1. Gantt Chart - Project timelines, tasks, and dependencies
1. Timeline - Chronological events and milestones
1. XY Chart - Coordinate-based data plotting (line, bar, scatter plots)
1. Sankey Diagram - Flow quantities between nodes, showing proportional relationships

##  4. Network & Graph Visualizations

These diagrams represent networks, hierarchies, and connected structures.

1. Git Graph - Version control branches, commits, and merges
1. Mindmap - Hierarchical concept mapping and brainstorming
1. Graph Network - Generic node-edge relationships and network topologies

##  5. Requirements & Documentation
These diagrams support technical specifications and system requirements.

1. Requirement Diagram - System requirements, relationships, and traceability
1. Packet Diagram - Network packet structures and protocol headers
1. Quadrant Chart - 2x2 matrix for categorization and prioritization

##  6. Specialized Diagrams
Other domain-specific or unique visualization types.

1. ZenUML - Alternative sequence diagram syntax
1. 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.