mermaid-diagrams

Mermaid Diagrams Skill

This skill provides:

• A conservative set of Mermaid templates that render on older renderers (VS Code/Markdown previewers, Git platforms) and remain clear to humans.
• Guidance on which diagram type to use for which situation.
• Compatibility tips and fallbacks when advanced Mermaid types are unavailable.

Compatibility Rules (Read First)

• Prefer graph LR/graph TB for flowcharts; some renderers fail on flowchart keyword.
• Quote labels containing spaces/special characters: A["Text (x|y) |"].
• Do not use literal \n inside labels - Mermaid does not interpret such line breaks. Use <br/> for line breaks.
• Advanced types like quadrantChart, sankey-beta, requirementDiagram, gitGraph may not be available. Use provided flowchart fallbacks.
• Code fences must start at column 0 with language mermaid.

ASCII/Unicode Sidecar (Human-Readable Raw Markdown)

To optimize for quick human scanning in raw Markdown and robust parsing by agents, always ship an ASCII/Unicode sidecar immediately below each Mermaid block.

Policy:

• MUST include a monospace, text-only diagram right under the Mermaid block using fenced code with language text.
• MUST keep Mermaid and sidecar in sync (same nodes/edges, same labels where feasible). If they diverge, treat Mermaid as the source of truth and update the sidecar.
• SHOULD limit width to ~80 columns for readability in diffs and terminals.
• SHOULD use simple line art characters (ASCII first; Unicode box-drawing optional when environment supports it).
• MAY add a one-line caption above the pair: Diagram: <name> (<type>).

Recommended primitives:

• Boxes: [Name], (Name), +-----+\n| N |\n+-----+
• Flows: -->, decisions as {cond?} lines, lists with -.
• Sequence (text-based): Actor -> Actor: message with indented lifelines.

Example (Flowchart):

graph LR
 A["Start"] --> B{Auth?}
 B -->|Yes| C["Dashboard"]
 B -->|No| D["Login"]

Diagram: Auth flow (flowchart)
 [Start] --> {Auth?}
 {Auth?} -- Yes --> [Dashboard]
 {Auth?} -- No --> [Login]