我把 draw.io MCP 直接封装成了一个 Skill：现在画 VGG、流程图和架构图都更顺手了

本文介绍了作者将draw.io的MCP工具封装成drawio-skill的过程。该skill通过自然语言指令可生成各类专业图表，特别优化了机器学习模型图（如VGG-16）的绘制能力。文章展示了skill的工作流程、安装方式和使用示例，强调其相比原始MCP工具的优势在于预设了绘图规则、输出规范和中文支持。作者分享了GitHub和ClawHub两个公开入口，认为这种封装方式能显著降低使用门槛，使AI绘

像风一样自由2020

776人浏览 · 2026-03-21 00:45:00

像风一样自由2020 · 2026-03-21 00:45:00 发布

我把 draw.io MCP 直接封装成了一个 Skill：现在画 VGG、流程图和架构图都更顺手了

在这里插入图片描述

公众号：码海寻道

这篇文章分两部分。前半部分简要介绍 next-ai-draw-io 这个项目到底能做什么；后半部分直接进入重点，介绍我基于它封装出来的 drawio-skill 怎么安装、怎么使用、能解决什么问题，以及它在实际绘图时的执行流程。最后，我会用一张经典 VGG-16 架构图作为完整示例做展示。

先简单看一下 `next-ai-draw-io` 是什么

next-ai-draw-io 是一个把 AI 能力和 draw.io 图表编辑结合在一起的项目。

它的核心定位并不复杂：
让用户通过自然语言创建、修改和增强 draw.io 图表。

从项目公开说明来看，它有几个非常直观的能力：

通过自然语言生成和编辑 draw.io 图
支持动画连接器
支持 AWS、GCP、Azure 等云架构图
支持上传图片、PDF、文本，再生成或复刻图表
支持聊天式交互编辑
支持图表历史记录和版本恢复

这个项目本身已经很强了，因为它不只是“生成一张图”，而是把 draw.io 的 XML 结构、AI 生成能力和图形渲染整合到了一起。

更重要的是，它还提供了 packages/mcp-server，把 draw.io 的创建、编辑、导出能力封装成了 MCP 工具。
这意味着像 VS Code、Cursor、Claude Desktop、Codex 这样的 AI 代理，不只是“能聊图”，而是真的可以调用工具去生成和编辑 draw.io 图。

从这个角度看，next-ai-draw-io 不只是一个 AI 画图应用，它还是一个可以继续向外扩展、继续被封装和复用的基础能力层。

我没有停在 MCP，而是直接把它做成了一个 Skill

MCP 工具本身已经能用，但我的目标不是“我自己会调这个工具”。

我更在意的是另一件事：
能不能把这套能力整理成一个别人也能直接安装、直接触发、直接复用的 skill。

所以我最后做的不是继续写零散提示词，而是把它收敛成了一个统一入口：

drawio-skill

这个 skill 的目标很明确：

让 Codex 更稳定地调用 draw.io MCP
让常见图表场景直接有默认工作流
让中文请求、导出命名、动画连接器这些细节变成默认行为
让别人不需要重新研究 MCP 细节，也能直接开始用

换句话说，我想交付的不是“一个会画图的工具”，而是“一套开箱即用的绘图能力”。

这个 `drawio-skill` 能做什么

我把这个 skill 做成了统一入口，不再拆成多个子 skill。
它覆盖的是 draw.io 的高频实用场景。

1. 通用图表能力

它可以直接处理这些任务：

流程图
系统架构图
部署拓扑图
业务框图
机器学习模型图

2. 更贴近实际使用的规则

除了“能画图”，这个 skill 还内置了一些默认约束，让结果更稳定：

中文请求优先中文回复、中文标签
输出文件优先使用统一命名
架构图强调层次、边界和方向
机器学习模型图强调主链路、阶段分组和结构表达
需要动画连接器时优先导出 .svg

3. 面向模型图的专门优化

这也是我比较看重的一点。
它并不只是把所有图都画成“方框加箭头”。

对于 LSTM、Transformer、CNN 这类图，我把模型图的表达重点也固化了进去，比如：

LSTM / RNN：区分 hidden state 和 cell state
Transformer：区分 attention、feed-forward、residual、normalization
CNN / VGG：强调卷积块、池化层、特征图阶段变化和分类头

所以它的定位不是“一个泛泛的画图 skill”，而是一个对工程图和模型图都比较友好的 draw.io skill。

这个 Skill 怎么使用

前提条件

这个 skill 依赖已经配置好的 drawio MCP server。

也就是说，它本身不负责安装 MCP server，而是建立在 draw.io MCP 已经可用的前提之上。

如果你的 Codex 里已经能调用 drawio MCP，那这个 skill 就可以直接接上去用。

安装方式

目前我提供了两个公开入口：

GitHub 仓库
ClawHub 页面

你可以从 GitHub 查看说明、直接克隆，也可以从 ClawHub 直接发现和下载。

触发方式

这个 skill 的调用方式很直接，只要在提示里明确使用 $drawio-skill 即可。

比如：

Use $drawio-skill to create a cloud architecture diagram.

Use $drawio-skill to draw a Chinese-labeled order flowchart and export drawio + svg.

Use $drawio-skill to create an animated LSTM architecture diagram.

如果你用中文提需求，也完全没问题，例如：

[$drawio-skill] 绘制一个经典的 VGG 架构图

它实际是怎么执行的

这个 skill 的价值，不只是帮你“触发一个工具”，而是把执行流程固定下来。

我把它的工作方式可以概括成下面这条链路：

用户提出绘图需求
-> skill 判断图类型和输出要求
-> 调用 drawio MCP 启动会话
-> 新建图或读取当前图
-> 生成/编辑 XML 结构
-> 导出 .drawio 和需要分享的 .svg
-> 返回结果文件

更具体一点，它的执行逻辑通常是这样的：

如果是新图，先启动 draw.io 会话
如果是已有图修改，先读取当前图 XML
根据图类型选择合适布局
需要动画连接器时增加流动样式
导出可编辑版本和可分享版本

这件事看起来朴素，但对真实使用体验很重要。

因为当这些规则被写进 skill 后，AI 每次不需要重新猜：

要不要先开 session
要不要先读当前图
应该导出什么格式
中文图要不要统一中文标签
模型图到底应该突出哪些结构

这就是 skill 比“零散提示词 + 原始 MCP 工具”更好用的地方。

用经典 `VGG-16` 架构图做一次演示

为了验证这套 skill 不是只会画简单流程图，我专门拿经典的 VGG-16 做了一个测试。

实际使用时，我直接让 Codex 执行了类似这样的请求：

[$drawio-skill] 绘制一个经典的VGG架构图

最终生成的是一张标准的 VGG-16 架构图，并导出了两份结果：

vgg16-architecture.drawio
vgg16-architecture.svg

在这里插入图片描述
本地浏览器看到的效果如下(可编辑)：

导出效果如下：

图里包含了 VGG 结构中最关键的这些部分：

5 个卷积块
多次池化
Flatten
两层 FC 4096
FC 1000
Softmax 输出

这张图对我来说有两个意义。

第一，它说明这个 skill 并不是只能处理“业务流程图”这类简单任务，经典神经网络结构图也能直接落地。
第二，它说明 draw.io 的输出并不是一次性图片，而是可继续编辑的工程文件。

这也是我为什么更愿意用 draw.io 路线，而不是只生成一张静态示意图。

为什么我觉得这种封装方式值得分享

如果只把 MCP 地址告诉别人，本质上你分享的是“一个工具入口”。

但如果把它整理成一个 skill，你分享的其实是：

默认工作流
输出规范
图类型策略
安装入口
可复制的使用方式

这件事会让别人的上手成本低很多。

别人不需要先知道 start_session、get_diagram、create_new_diagram、export_diagram 分别怎么调用；
他只需要知道：安装好这个 skill，然后给出明确绘图需求，就能稳定得到结果。

从“个人可用”走到“别人也能直接用”，差的往往就是这一步封装。

Skill 两个公开入口

如果你想直接查看或使用这个 skill，可以从下面两个公开入口进入：

GitHub 仓库：https://github.com/yangyuqing15715165798/drawio-skill
ClawHub 页面：https://clawhub.ai/yyq2024/drawio-skill

参考网址

next-ai-draw-io 项目主页：https://github.com/DayuanJiang/next-ai-draw-io
packages/mcp-server 目录：https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server
drawio-skill GitHub 仓库：https://github.com/yangyuqing15715165798/drawio-skill
drawio-skill ClawHub 页面：https://clawhub.ai/yyq2024/drawio-skill