mermaid-diagram

# Mermaid Diagram Workflow ## Quick Start Generate PNGs for all diagrams: ```bash bash .claude/skills/mermaid-diagram/scripts/generate-diagrams.sh ``` Generate a single diagram: ```bash bash .claude/skills/mermaid-diagram/scripts/generate-diagrams.sh docs/zones/auth/diagrams/er-design/er-diagram.mmd ``` Generate all diagrams in a directory: ```bash bash .claude/skills/mermaid-diagram/scripts/generate-diagrams.sh docs/zones/auth/diagrams/ ``` The script defaults to scale 4 (highest quality) with a white background. Override via environment variables: `MERMAID_SCALE=8 MERMAID_BG=transparent bash .claude/skills/mermaid-diagram/scripts/generate-diagrams.sh` ## When to Use Mermaid If you find yourself writing `→` arrows or `---` separators in plain text to describe a flow, that's a sign to use Mermaid. | Document Pattern | Mermaid Diagram Type | |---|---| | `A → B → C` process flows | `flowchart` | | System-to-system communication, auth flows | `sequenceDiagram` | | Table relationships (1:N, M:N) | `erDiagram` | | Architecture comparison (Pattern A vs B) | `flowchart` (**as separate diagrams**) | | State transitions (unauthenticated → authenticated) | `stateDiagram-v2` | | Milestones, schedules | `gantt` | ### When Plain Text Is Enough | Pattern | Reason | |---|---| | Directory trees (`tree` format) | No matching Mermaid diagram type | | Simple 2–3 line transformations (`before → after`) | Not complex enough to warrant a diagram | | Screen layouts (`┌──┐` format) | Te...