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](./references/flowchart.md) — Nodes, edges, subgraphs, layout direction
- [Sequence](./references/sequence.md) — Participants, messages, activations, loops
- [State](./references/state.md) — States, transitions, composite states
- [ER](./references/er.md) — 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