分享一个生成 drawio UML 图的 ClaudeCode Skill (基于 draw.io 官方的提示词)
- 内容介绍
- 文章标签
- 相关推荐
drawio 官方 MCP (如果喜欢用 MCP 的，无需看下去，建议使用 drawio 官方 MCP)
最近 draw.io 官方推特宣布推出了“官方 MCP Server”
CleanShot 2026-02-11 at 06.05.28@2x1338×1288 171 KB
推文地址: https://x.com/drawio/status/2020918870375370825
NPM 中的 MCP 地址: https://www.npmjs.com/package/@drawio/mcp
GitHub 地址: GitHub - jgraph/drawio-mcp
Skills (基于 drawio 官方的替代 MCP 的方案提示词)
需要有
python环境
因为 MCP 每个请求都会携带完整的工具描述，对比 Skills 的渐进式披露 (即只带 Metadata/Frontmatter) 消耗的 Token 量要大得多，所以我更倾向使用 Skills
drawio 官方推上说提供了「提示词(指令)」来代替 MCP，因此我基于 drawio 官方的提示词，实现了一个 drawio-diagram Skill
drawio 官方 GitHub 说明: GitHub - jgraph/drawio-mcp
drawio 官方具体提示词地址: drawio-mcp/src/claude-project-instructions.txt at main · jgraph/drawio-mcp · GitHub
效果
-
输入提示词:
画一个 TCP 连接流程时序图(默认生成中文说明，用其他语言是:用英语画一个
drawio 官方 MCP (如果喜欢用 MCP 的，无需看下去，建议使用 drawio 官方 MCP)
最近 draw.io 官方推特宣布推出了“官方 MCP Server”
CleanShot 2026-02-11 at 06.05.28@2x1338×1288 171 KB
推文地址: https://x.com/drawio/status/2020918870375370825
NPM 中的 MCP 地址: https://www.npmjs.com/package/@drawio/mcp
GitHub 地址: GitHub - jgraph/drawio-mcp
Skills (基于 drawio 官方的替代 MCP 的方案提示词)
需要有
python环境
因为 MCP 每个请求都会携带完整的工具描述，对比 Skills 的渐进式披露 (即只带 Metadata/Frontmatter) 消耗的 Token 量要大得多，所以我更倾向使用 Skills
drawio 官方推上说提供了「提示词(指令)」来代替 MCP，因此我基于 drawio 官方的提示词，实现了一个 drawio-diagram Skill
drawio 官方 GitHub 说明: GitHub - jgraph/drawio-mcp
drawio 官方具体提示词地址: drawio-mcp/src/claude-project-instructions.txt at main · jgraph/drawio-mcp · GitHub
效果
-
输入提示词:
画一个 TCP 连接流程时序图(默认生成中文说明，用其他语言是:用英语画一个