Claude Code + Next AI Draw.io 速览

Next AI Draw.io是一款集成了AI功能的网页应用。可以与draw.io无缝结合，通过自然语言命令和AI辅助实现快速绘制。GitHub上已获得29k+ star。

至于主要功能。

• MCP: 与Claude Code对接，自动运行调用。
• NLP 指令: 只需一句话即可生成所需的架构、流程或时序图。
实时预览的观点是。 生成后即在浏览器中预览，无需额外导出。
• .drawio 导出: 一键保存为标准文件，便于共享与版本管理。

使用者痛点 & 方法

• 耗时高: 手工绘制往往耗费数小时；Ai+Claude Code将时间压缩到几分钟甚至秒级。
• 学习曲线陡峭: Visio 操作繁琐，新手难以上手；Ai 指令简化操作，零学习成本。
• 协同困难: 图表文件大且格式多变；.drawio 标准化导出，可直接嵌入 GitHub、Confluence 等网站。
• Ai 能根据项目结构自动生成模板，快速复用。

MCP 安装与配置步骤

MCP 安装指令

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

MCP 配置

• 提示：使用 CC Switch 可一步完成注册与权限配置，省去手动编辑 JSON 的麻烦。
• 主要功能列表：
dSave as .drawio file. `

Tool Name	Description
session	Create a new draw.io session and open preview window.
newdiagram	Create diagram from XML string.
diagram	Edit diagram by ID .
diagram	Retrieve current diagram XML.
diagram

使用

/mcp status

/mcp drawio "请用 draw.io 创建一个 mall 项目的程序架构图"

"成功！已在 http://localhost:xxxx 打开预览窗口"

"完成！查看详情"

# html

# 思维导图 #  # html

与接下来行动建议

Next AI Draw.io 与 Claude Code 的组合能让你摆脱繁琐的手工绘制，从而把更多时间投入到业务逻辑和代码实现上。试试看吧——如果你对 AI 绘制感兴趣。只需一句话，即可得到专业级别的架构、流程或思维导图。立即开始体验，让你的技术文档更高效、更美观、更易协作！若想进一步探索，请访问官方仓库获取完整安装文档与 API 调用细节。

相关项目地址 & 文档资源

• github.com/macrozheng/mall – SpringBoot+Vue 电商演示项目 • www.macrozheng.com – 文档站点