mermaidlisted

# Mermaid Diagram Generator > Adapted from [WH-2099/mermaid-skill](https://github.com/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](https://github.com/WH-2099/mermaid-skill/pull/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. Af