Draw.io architecture diagramming skill for Claude Code. Create professional architecture diagrams, flowcharts, and system diagrams with ease.
Config is the same across clients — only the file and path differ.
{
"mcpServers": {
"drawio-architecture-skill": {
"args": [
"-y",
"@modelcontextprotocol/server-drawio"
],
"command": "npx"
}
}
}Are you the author?
Add this badge to your README to show your security score and help users find safe servers.
一个专业的架构图绘制技能,用于 Claude Code。使用 draw.io MCP 工具创建高质量的架构图、流程图和系统设计图。
Run this in your terminal to verify the server starts. Then let us know if it worked — your result helps other developers.
npx -y '@modelcontextprotocol/server-drawio' 2>&1 | head -1 && echo "✓ Server started successfully"
After testing, let us know if it worked:
Five weighted categories — click any category to see the underlying evidence.
No known CVEs.
Checked @modelcontextprotocol/server-drawio against OSV.dev.
Be the first to review
Have you used this server?
Share your experience — it helps other developers decide.
Sign in to write a review.
Others in design / developer-tools
A Model Context Protocol (MCP) server and CLI that provides tools for agent use when working on iOS and macOS projects.
XcodeBuildMCP provides tools for Xcode project management, simulator management, and app utilities.
Asynchronous coordination layer for AI coding agents: identities, inboxes, searchable threads, and advisory file leases over FastMCP + Git + SQLite
MCP server for accessing Figma plugin console logs and screenshots via Cloudflare Workers or local mode
MCP Security Weekly
Get CVE alerts and security updates for Drawio Architecture Skill and similar servers.
Start a conversation
Ask a question, share a tip, or report an issue.
Sign in to join the discussion.
一个专业的架构图绘制技能,用于 Claude Code。使用 draw.io MCP 工具创建高质量的架构图、流程图和系统设计图。
✨ 专业级架构图
🎨 丰富的样式支持
📦 多格式导出
.drawio - 可编辑的源文件.png - 图片格式.svg - 矢量图格式.pdf - 文档格式# 1. 克隆仓库
git clone https://github.com/yourusername/drawio-architecture-skill.git
cd drawio-architecture-skill
# 2. 复制到 Claude 技能目录
cp -r drawio-architecture ~/.claude/skills/
# 3. 验证安装
ls -la ~/.claude/skills/drawio-architecture/
# 使用 curl 下载并安装
curl -fsSL https://raw.githubusercontent.com/yourusername/drawio-architecture-skill/main/install.sh | bash
此技能需要以下 MCP 服务器:
安装 draw.io MCP Server:
# 使用 npx 安装
npx @modelcontextprotocol/server-drawio
# 或使用 npm 全局安装
npm install -g @modelcontextprotocol/server-drawio
在 Claude Code 中,直接使用自然语言描述需求:
"画一个项目架构图,展示数据准备、模型训练、推理服务的流程"
"绘制系统设计图,展示各个模块之间的关系"
"创建数据流程图,展示从用户请求到返回结果的过程"
"创建一个微服务架构图,包含:
- API 网关
- 用户服务
- 订单服务
- 支付服务
- 数据库
使用蓝色表示服务层,绿色表示数据层"
"绘制一个 UML 类图,展示用户、订单、产品三个类及其关系"
"画一个时序图,展示用户登录的完整流程"
生成的图表默认保存在:
docs/diagrams/
├── architecture/
├── uml/
└── deployment/
| 格式 | 扩展名 | 用途 | 可编辑 |
|---|---|---|---|
| Draw.io 源文件 | .drawio | 默认格式,推荐 | ✅ |
| PNG 图片 | .png | 文档插入 | ❌ |
| SVG 矢量图 | .svg | 网页使用 | ⚠️ |
| PDF 文档 | .pdf | 打印归档 | ❌ |
| 用途 | 填充颜色 | 边框颜色 |
|---|---|---|
| 数据层 | #E3F2FD | #1976D2 |
| 模型层 | #E8F5E9 | #388E3C |
| 推理层 | #FFF3E0 | #E65100 |
| 用户层 | #FCE4EC | #C2185B |
| 外部系统 | #F3E5F5 | #7B1FA2 |
输入: "创建项目架构图"
输出:
docs/diagrams/architecture/project_architecture.drawio
包含:
输入: "绘制数据流程图"
输出:
docs/diagrams/data_flow.drawio
包含:
.drawio 格式mxCell 都有 parent="1"欢迎贡献!请遵循以下步骤:
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)本项目采用 MIT 许可证 - 详见 LICENSE.txt 文件
创建于 2026-02-11
享受绘制专业架构图的乐趣! 🎨