Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Mermaid Diagram Generator

Creates 12+ types of Mermaid diagrams as text and exports them to PNG/SVG/PDF via mmdc or the Kroki API.

Design & UIBeginner★ 175⑂ 15AI score 10/10Last updated: Jul 16, 2026

What it does

  • Picks the right Mermaid diagram type (flowchart, sequence, class, ER, state, gantt, mindmap, architecture and more) and writes a .mmd source file.
  • Always validates syntax before exporting, then renders PNG/SVG/PDF with local mmdc or the install-free Kroki API.
  • Re-reads the exported PNG with vision to catch truncated labels, cramped density or wrong orientation, self-fixing for up to 2 rounds before a user review loop with minimal edits.
  • Explicitly routes you elsewhere (drawio, excalidraw, tldraw, plantuml) when Mermaid is the wrong tool.

Who it's for

  • Developers and tech leads documenting system architecture, API flows or data models.
  • Teams that want diagrams-as-code versioned in Git and embedded in Markdown.
  • Writers, PMs and educators who want quick diagrams without a drawing app.

Example uses

  1. "Create a sequence diagram for JWT authentication" → .mmd with Client, Gateway, Auth Service and Database participants plus a PNG.
  2. "Draw an e-commerce microservices architecture" → flowchart with subgraphs for client, service and data layers.
  3. "Show the order lifecycle" → state diagram Pending → Confirmed → Shipped → Delivered, followed by a readability self-check.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Agents365-ai/mermaid-skill/HEAD/skills/mermaid-skill/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/mermaid-skill folder from the GitHub repo Agents365-ai/mermaid-skill into my ~/.claude/skills/mermaid-skill/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Agents365-ai/mermaid-skill.git /tmp/mermaid-skill && mkdir -p ~/.claude/skills && cp -r /tmp/mermaid-skill/skills/mermaid-skill ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/Agents365-ai/mermaid-skill.git /tmp/mermaid-skill
  3. Copy the skill into place: mkdir -p ~/.claude/skills && cp -r /tmp/mermaid-skill/skills/mermaid-skill ~/.claude/skills/
  4. (Optional, for local export) Run npm install -g @mermaid-js/mermaid-cli, then npx puppeteer browsers install chrome-headless-shell — mmdc has no bundled browser.
  5. If you can't install those, just check curl --version; the Kroki API path renders PNG/SVG (PDF requires local mmdc).
  6. Restart Claude Code and ask something like "draw a flowchart of this process" to confirm the skill triggers.
View source on GitHub ↗License: MIT