/ 目录 / 演练场 / mermaid-skill
← 全部服务器 ↗ GitHub
● 社区 Agents365-ai ⚡ 即开即用

mermaid-skill

作者 Agents365-ai · Agents365-ai/mermaid-skill

Generate Mermaid diagrams (.mmd) inside Claude Code and render to PNG/SVG/PDF via mmdc — 10+ diagram types, automatic layout.

A Claude Code skill that handles the full Mermaid loop: writes .mmd source, invokes mmdc to render, and supports the major Mermaid types (flowchart, sequence, class, state, ERD, gantt, git graph, journey, mindmap, C4). No more pasting into Mermaid live editor.

▶ 观看演示 📦 安装 💡 使用场景

为什么要用

核心特性

实时演示

实际使用效果

mermaid-skill.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "mermaid-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ]
    }
  ]
}

Continue 使用服务器对象数组，而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "mermaid-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Agents365-ai/mermaid-skill",
          "~/.claude/skills/mermaid-skill"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add mermaid-skill -- git clone https://github.com/Agents365-ai/mermaid-skill ~/.claude/skills/mermaid-skill

一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。

使用场景

实战用法： mermaid-skill

Draw an architecture diagram for your current project

👤 Devs writing docs, ADRs, or onboarding guides ⏱ ~20 min beginner

何时使用： You keep explaining your architecture in Slack and want a picture.

前置条件
  • mmdc installed — npm i -g @mermaid-js/mermaid-cli
  • Skill installed — git clone https://github.com/Agents365-ai/mermaid-skill ~/.claude/skills/mermaid-skill
步骤
  1. Describe the system
    Use mermaid-skill. Draw a flowchart of our service: client → API gateway → (auth / orders / payments) → Postgres / Redis / Stripe.✓ 已复制
    → .mmd source with meaningful node names, rendered to PNG in docs/
  2. Add details
    Add labels on each edge showing the protocol (HTTPS, gRPC, TCP) and auth type.✓ 已复制
    → Updated source and re-render
  3. Commit it
    Commit docs/architecture.mmd and its PNG.✓ 已复制
    → git add and commit run

结果： A living diagram in the repo, not a stale slide in Confluence.

注意事项
  • Diagram becomes a maze of edges — Let Claude use subgraphs and direction hints; don't cram everything on one layer
搭配使用： filesystem · git

Produce a sequence diagram while debugging

👤 Engineers tracing a cross-service bug ⏱ ~15 min beginner

何时使用： You're trying to understand an async interaction and English isn't cutting it.

步骤
  1. Describe the flow
    Use mermaid-skill. Sequence diagram: browser → SSR → auth service → session store → page render, with failure mode when session is stale.✓ 已复制
    → Sequence diagram with the failure annotated
  2. Annotate the bug
    Highlight the line where the bug manifests.✓ 已复制
    → Annotated box/note on the offending message

结果： A picture you can paste in the bug ticket.

Generate an ERD from your actual database schema

👤 Data engineers, backend devs ⏱ ~20 min intermediate

何时使用： You want a visual of your schema for a design review.

步骤
  1. Introspect
    Use mermaid-skill. Read the schema.sql (or query the live DB via postgres MCP) and produce a Mermaid ERD.✓ 已复制
    → .mmd ERD with relationships and cardinalities
  2. Trim noise
    Drop audit tables and focus on the core domain entities.✓ 已复制
    → Trimmed ERD

结果： An accurate ERD without manual drawing.

注意事项
  • Cardinalities wrong when inferred — Provide the actual foreign-key definitions; don't let the model guess
搭配使用： postgres

组合

与其他 MCP 搭配，撬动十倍杠杆

mermaid-skill + filesystem

Keep diagrams alongside the code they describe

For every service in services/, add a docs/architecture.mmd and render it.✓ 已复制
mermaid-skill + postgres

Auto-generate ERDs from live databases

Connect to the staging DB and render its schema as a Mermaid ERD.✓ 已复制
mermaid-skill + git

Diagram stays versioned with code changes

Commit updated diagrams in the same PR as the code changes they describe.✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
write_mermaid description, diagram type Any diagram request 0
render_mmdc .mmd path, output format After source is final local mmdc
iterate_diagram current diagram + feedback Reviewer feedback 0

成本与限制

运行它的成本

API 配额
None
每次调用 Token 数
Small — Mermaid source is compact
费用
Free (mmdc is open source)
提示
For big diagrams, generate subgraphs separately to avoid retrying large rewrites.

安全

权限、密钥、影响范围

凭据存储： None
数据出站： None from skill itself

故障排查

常见错误与修复

mmdc not found

Install globally: npm i -g @mermaid-js/mermaid-cli

验证： which mmdc
Render fails with syntax error

Mermaid has version-specific syntax; run mmdc --version and match the skill's assumed version

验证： mmdc --version
Diagram is a mess of crossing edges

Add direction hints (TD/LR), group with subgraphs, or split into multiple diagrams

替代方案

mermaid-skill 对比其他方案

替代方案何时用它替代权衡
PlantUML / draw.ioYou need more control or non-Mermaid syntaxMore setup, different rendering toolchain
paperbanana-skillAcademic publication-quality diagramsHeavier; different aesthetic goals

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills