add-mermaid-diagram - SKILL.md Agent Skill

name: add-mermaid-diagram description: Embed a Mermaid diagram, respecting the syntax rules. triggers: ["mermaid", "diagram", "flowchart"]

The static path is a fenced \``mermaidblock — it's rendered at build time, ships zero JS. Only use the` React island when the diagram needs to react to runtime state.

\`\`\`mermaid
flowchart LR
  src["Source code"] --> build["Build"]
  build --> deploy["Deploy"]
\`\`\`

Rules that prevent broken renders:

No spaces in node IDs. Use src not src code. Put the visible label in brackets: src["Source code"].
Quote labels with parentheses or special chars. node["fn(x)"] works; node[fn(x)] breaks.
Keep arrows on one line. Mermaid's parser is line-oriented.
Test in the Mermaid live editor before pasting — saves a build cycle.