mermaid

name	mermaid
description	Create and validate Mermaid diagrams. Use when creating, editing, or reviewing Mermaid diagrams in markdown files.
user-invocable	true

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