ai-drawio

通过自然语言描述,自动生成各类专业图表和架构图。

安装使用

复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:

帮我安装这个 AI Skill:ai-drawio。
它的用途是:通过自然语言描述,自动生成各类专业图表和架构图。
完整的 Skill 内容见:https://321skill.com/skills/ai-drawio/raw/index.md
请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。

提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。

使用示例

“为我们的微服务用户订单系统画一个架构图,包含 API Gateway、认证服务、订单服务和 PostgreSQL 数据库。”,它会理解你的描述,生成专业的 draw.io XML 代码,创建一个包含这些组件的架构图 HTML 文件,并在你的浏览器中自动打开进行预览。你还可以接着说:“把数据库改成 Cylinder 形状,并用虚线连接认证服务和订单服务”,它会根据你的反馈实时修改图表。

介绍

AI Draw.io 是一个专为 Claude Code 设计的 AI 驱动图表生成器,它解决了用户在技术文档、系统设计或头脑风暴中需要快速绘制专业图表但缺乏绘图技能或工具的问题。用户只需用自然语言描述想要的图表(如“画一个用户登录流程图”或“创建一个包含 EC2 和 S3 的 AWS 架构图”),该技能即可生成对应的 draw.io 兼容 XML 代码,并自动在浏览器中启动本地服务器进行预览和渲染,实现从想法到可视化图表的无缝转换。

使用方式非常直观,在 Claude Code 中安装该技能后,直接向 AI 描述你的图表需求即可。技能会识别包含“draw”、“diagram”、“流程图”、“架构图”等关键词的指令,随后生成图表文件、启动本地 HTTP 服务器,并自动打开浏览器窗口展示结果,部分配置下还能提供截图。

这个技能非常适合需要频繁绘制技术图表来沟通想法、设计系统或整理思路的各类技术人员和内容创作者,例如软件工程师、架构师、产品经理、技术写作者以及高校学生。它能显著提升制作技术文档、设计提案、学术报告或演示材料的效率。

需要注意的是,该技能依赖 Claude Code 的浏览器自动化功能(如 Claude in Chrome MCP),并且需要本地安装 Python 3.x 以运行临时的 HTTP 服务器。生成的图表基于 draw.io(diagrams.net)的在线查看器渲染,因此需要互联网连接来加载查看器资源。

核心特点

与同类文本转图表工具相比,它深度集成于 Claude Code 工作流,支持通过对话实时修改现有图表,并能生成高度定制化、包含丰富 AWS/GCP/Azure 图标库和复杂样式的专业级架构图。

注意事项

不适合需要完全离线使用、或对图表样式有极高自定义代码级控制需求的场景。

常见问题

需要安装额外的软件吗?

需要本地安装 Python 3.x 来运行临时的图表预览服务器。

生成的图表可以编辑吗?

可以,在浏览器中打开的预览页面通常提供编辑入口,或可将生成的 XML 导入 draw.io 进行深度编辑。

给 AI 助手的安装指引

如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:

请访问 https://321skill.com/skills/ai-drawio/raw/index.md 读取 ai-drawio 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。