Mermaid Diagrams
Create and validate Mermaid diagrams with syntax checking.
Diagram Types
| Type | Directive | Use For |
|---|---|---|
| Flowchart | flowchart TB |
Process flows, decision trees, system architecture |
| Sequence | sequenceDiagram |
API interactions, message passing, protocols |
| State | stateDiagram-v2 |
State machines, lifecycles, status transitions |
| ER | erDiagram |
Database schemas, entity relationships |
Validation
Validate mermaid syntax in markdown files:
bun ${CLAUDE_SKILL_DIR}/scripts/validate.ts <file.md>
References
- Flowchart — Nodes, edges, subgraphs, layout direction
- Sequence — Participants, messages, activations, loops
- State — States, transitions, composite states
- ER — Entities, relationships, cardinality
Best Practices
- Keep labels concise—use full descriptions in surrounding prose
- Use subgraphs to group related nodes visually
- Order participants/nodes to minimize edge crossings
- Prefer left-to-right (
LR) for timelines, top-to-bottom (TB) for hierarchies