Mermaid Diagram Generator

Adapted from WH-2099/mermaid-skill on 2026-05-15. Reference syntax docs are bundled under references/ and originate from the upstream Mermaid project. The ## Verification section incorporates the render-check recipe and parse-pitfalls table from WH-2099/mermaid-skill#5 by @rajatarya.

Generate Mermaid diagram source that renders directly in GitHub, VS Code, Notion, and other Mermaid-aware viewers.

Invocation Position

Side-route utility. Mermaid is most useful inside other pipeline artifacts — a sequence diagram inside a PRD, a flowchart inside a research note, an ER diagram inside an issue body, a C4 diagram inside an architecture proposal. Invoke it directly when:

• The user explicitly asks for a Mermaid diagram, flowchart, sequence diagram, ER diagram, state machine, Gantt chart, etc.
• A pipeline skill (/shape, /research, /write-a-prd, /prd-to-issues, /improve-codebase-architecture, /request-refactor-plan) would benefit from an embedded diagram and the user wants one.

Do not invoke when:

• The user wants a rough whiteboard sketch — use /excalidraw-diagram instead.
• The user wants a rendered image file — Mermaid here produces source code, not PNGs.
• The diagram type is unsupported by Mermaid (e.g. arbitrary 2D illustrations).

This skill does not produce a GitHub artifact on its own and does not advance the pipeline. After producing the diagram, control returns to whichever skill or conversation invoked it.