程序员在写技术文档时，经常会有画架构图、流程图、时序图的需求。最近发现一款AI画图工具
Next AI Draw.io, 仅需通过自然语言命令和AI辅助即可绘制图表，效率比传承画图工具Visio快10倍，今天给大家分享下这款AI画图神器！
Next AI Draw.io简介
Next AI Draw.io一款集成了AI功能的网页应用，可以与draw.io图表无缝结合，通过自然语言命令和AI辅助实现图表绘制，目前在Github上已有29k+star。
它的功能特性如下：
下面是它使用过程中的效果图，还是挺炫酷的！
MCP安装
Claude Code需要安装
Next AI Draw.io的MCP才能操作它来绘制图表。
- 首先我们在Claude Code中通过如下命令来添加MCP；
bash
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest- 也可以使用CC Switch这种可视化工具来配置MCP，具体配置如下；
- 这个MCP的主要功能如下，包括了获取和绘制图表的各个工具；
| Tool | Description |
|---|---|
| start_session | 启动新的 draw.io 会话并打开预览窗口 |
| create_new_diagram | 从 XML 创建新图表（需要 xml 参数） |
| edit_diagram | 通过 ID 编辑图表（更新/添加/删除单元格） |
| get_diagram | 获取当前图表的 XML 内容 |
| export_diagram | 将图表保存为 .drawio 文件 |
- 安装完成后，在Claude Code中通过
/mcp命令即可查看状态。
这或许是一个对你有用的开源项目，mall项目是一套基于 SpringBoot3 + Vue3 的电商系统（Github标星60K），后端支持多模块和微服务架构，采用Docker和K8S部署。包括前台商城项目和后台管理系统，能支持完整的订单流程！涵盖商品、订单、购物车、权限、优惠券、会员、支付等功能！
- Boot项目：github.com/macrozheng/...
- Cloud项目：github.com/macrozheng/...
- 文档网站：www.macrozheng.com
项目演示：
使用
下面就以我的mall电商项目为例，来介绍下Claude Code+Next AI Draw.io的使用！
架构图
首先我们来绘制一张架构图，打开Claude Code，输入提示词：用draw.io mcp画一张mall项目的系统架构图
Claude Code会调用MCP并通过浏览器打开Next AI Draw.io的绘制页面，默认地址为：http://localhost:6002
这里是绘制完成的架构图，效果还是挺不错的！
时序图
再绘制一张时序图，输入提示词：用draw.io mcp画一张mall项目用户登陆过程的时序图。
这是绘制完的时序图，具体效果如下。
用例图
再绘制一张用例图，输入提示词：用draw.io mcp画一张电商项目的用例图。
这是绘制完的用例图，具体效果如下。
活动图
再绘制一张活动图，输入提示词：根据mall项目中生成确认单流程（generateConfirmOrder方法），用draw.io mcp画一张活动图
这是绘制完的活动图，具体效果如下。
思维导图
再绘制一张思维导图，输入提示词：制定一条mall项目的学习路线，用draw.io mcp画一张思维导图。
这是绘制完的思维导图，具体效果如下。
总结
今天给大家分享了Next AI Draw.io这款AI绘图工具，配合Claude Code使用确实很方便，感兴趣的小伙伴可以尝试下它！