creating-mermaid-diagramslisted

# Mermaid Diagrams Generate `.mmd` text files and export to PNG/SVG/PDF using `mmdc` (local) or Kroki API (no install). **Key advantage:** Text-based syntax with **fully automatic layout** — no x/y coordinates needed. ## When to use / when NOT to use **Use this skill for:** diagrams-as-code with automatic layout (flowchart, sequence, class, state, ER, gantt, mindmap) — text source that lives in git and embeds in Markdown. **Do NOT use it — route elsewhere — for:** - Pixel-precise placement, custom layout, branded icons, or heavy styling → **drawio**. - A hand-drawn / sketchy aesthetic → **excalidraw** or **tldraw**. - A freeform whiteboard or freehand strokes → **tldraw**. - Strict, conventional UML notation → **plantuml**. ## Prerequisites **Option A: Local (mmdc)** — also needs a headless Chrome (mmdc renders via Puppeteer) ```bash npm install -g @mermaid-js/mermaid-cli npx puppeteer browsers install chrome-headless-shell # required — mmdc has no bundled browser mmdc --version ``` > `mmdc --version` succeeds even with **no** Chrome installed, but every export then fails with `Could not find Chrome`. Install the browser above (or set `PUPPETEER_EXECUTABLE_PATH` to a system Chrome). If you can't, use Kroki (Option B) — it needs no browser. **Option B: Kroki API (no install)** ```bash curl --version # Just need curl ``` ## Workflow 1. **Check deps** — `mmdc --version` **and** confirm a headless Chrome is installed (a bare `--version` pass does NOT mean export work