mermaid-skill

Solid

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, 画图, 架构图, 流程图, 时序图. PROACTIVELY USE when explaining ANY system with 3+ components, API flows, authentication sequences, class hierarchies, database schemas, or state machines. Supports 12+ diagram types with fully automatic layout.

AI & Automation 150 stars 12 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 89/100

Stars 20%
73
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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) ```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 me...

Details

Author
Agents365-ai
Repository
Agents365-ai/mermaid-skill
Created
4 months ago
Last Updated
1 weeks ago
Language
Mermaid
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

mermaid-diagram

Use this skill ANY time the user wants a diagram, chart, or visual documentation of any kind — flowcharts, sequence diagrams, architecture diagrams, ER diagrams, state machines, gantt charts, class diagrams, deployment diagrams, mindmaps, or any visual representation of systems, processes, or relationships. Trigger on: "diagram", "chart", "visualize", "draw", "map out", "document the flow", "show how X connects to Y", or when the user describes states, transitions, timelines, or service interactions that imply a visual even without saying "diagram". Also trigger when the user mentions "mermaid" by name or asks to convert code to a diagram.

2 Updated yesterday
petermcalister
AI & Automation Listed

mermaid

Side-route utility skill for generating Mermaid diagram code from a description. Use when the user wants a flowchart, sequence diagram, class diagram, ER diagram, state machine, Gantt chart, mindmap, C4 architecture, user journey, or any of 23 supported Mermaid diagram types — often during /shape, /research, /write-a-prd, or /prd-to-issues when a visual would clarify scope, flow, or structure. Not for free-form ASCII sketches, hand-drawn whiteboards (use /excalidraw-diagram for that), or rendering diagrams to images.

2 Updated 1 weeks ago
chrislacey89
AI & Automation Solid

mermaid-diagram

Create Mermaid diagrams, generate PNGs via mmdc, and reference them from Markdown documents. Use when creating, updating, or managing diagrams in a project.

9 Updated today
koborin-ai