Agent skill · design visual · agents365-ai
mermaid-skill
Generate Mermaid diagrams (.mmd) and export to PNG/SVG/PDF using mmdc CLI or Kroki API. USE THIS SKILL when user mentions diagram, flowchart, sequence diagram, class diagram, ER diagram, state machine, architecture, visualize, git graph, 画图, 架构图, 流程图, 时序图, 类图, ER图, 甘特图, 状态机. PROACTIVELY USE when explaining ANY system with 3+ components, API flows, authentication sequences, class hierarchies, database schemas, or state machines. Supports 17+ diagram types with fully automatic layout.
Why this skill is useful
Adds specific commands and workflows for generating and validating Mermaid diagrams that the AI wouldn't reliably generate on its own.
What it needs
Requires @mermaid-js/mermaid-cli installed locally. About 7k tokens when loaded. Last updated 2026-08-05. 29 stars on the source repository.
What this skill does
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, architecture) — 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) mmdc --version succeeds even with no Chrome installed, but every export then fails with Could not find Chrome. Install the browser above (or set PUPPETEEREXECUTABLEPATH to a system Chrome). If you can't, use Kroki (Option B) — it needs no browser. CI / Docker: mmdc crashes with Running as root without --no-sandbox in containers. Pass the bundled puppeteer config (see scripts/puppeteer-config.json): Option B: Kroki API (no install) Workflow 1. Check deps — validate via Kroki (needs only curl); check mmdc --version and a headless Chrome only when local export (PNG quality / PDF) is wanted 2. Pick diagram type — choose from table below 3. Generate — write .mmd file to disk 4. Validate — Kroki-first (see Validation; REQUIRED before export) 5. Export — use mmdc or Kroki API to produce PNG/SVG/PDF 6. Self-check (vision) — read the exported PNG and fix readability/layout defects that automatic layout can't prevent (clipped labels, cramped density, wrong orientation), then re-validate + re-export. Max 2 rounds; skip if no vision. See Self-Check (vision) below. 7. Review loop — show the image to the user, apply the minimal .mmd edit per request, re-export until approved (5-round safety valve). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills agents365-ai/mermaid-skill