写在前面我遇到了一个需求需要快速画一张模型架构图。作为一个习惯用AI辅助工作的开发者我立刻想到——能不能让Claude直接帮我画图理想很丰满现实很骨感。从Visio到draw.io从MCP配置到闪退排查我整整折腾了一个下午。这篇文章记录了我从“想用AI控制Visio”到“成功用Claude draw.io生成架构图”的完整过程希望能帮到有类似需求的朋友。第一阶段美好的设想——AI直连Visio我的最初想法很直接既然Claude这么聪明Visio又是专业的绘图工具那让Claude直接操作Visio不就好了搜索一番后发现确实有解决方案——MCP模型上下文协议。这是一种让AI模型直接调用外部工具接口的协议。具体到Visio有几个现成的MCP服务器项目visio-smartdraw-mcp-serverNode.js版office-visio-mcp-serverPython版看起来很美对吧但问题很快就来了。坑一找不到Visio插件visio-smartdraw-mcp-server的文档里提到需要配合一个Visio插件使用——这个插件充当“接收器”让Visio能被外部命令控制。但我找遍了GitHub和搜索引擎根本找不到这个插件的下载包。后来才明白这个项目只提供了MCP服务器端而关键的Visio插件部分似乎从未公开发布过。坑二我的环境太复杂就算找到了插件我的电脑环境也给配置增加了不少难度Windows宿主机安装Visio桌面版WSLWindows Subsystem for Linux里面运行着Claude CodeVS Code通过WSL远程开发使用Claude Code插件简单说就是Claude在Linux环境中Visio在Windows上要让它们跨系统通信需要配置网络、防火墙、端口转发……配置复杂度直接拉满。结论放弃Visio方案。第二阶段转向免费方案——draw.io既然Visio这条路走不通我开始寻找免费替代品。draw.io现在也叫diagrams.net进入了我的视野✅ 完全免费✅ 开源✅ 功能强大足以替代Visio日常使用✅ 有桌面版和网页版✅ 支持与AI集成而且最关键的是draw.io官方提供了Claude Skill——一个可以直接在Claude Code中使用的插件。坑三桌面版闪退下载安装draw.io-31.1.5-windows-installer.exe后双击打开一片白屏然后闪退。我尝试了各种方法检查安装路径是否为纯英文 ✓以管理员身份运行 ✗ 无效更新显卡驱动 ✗ 无效换用便携版 ✗ 无效换用无安装版 ✗ 无效正当我准备放弃桌面版、投奔网页版时偶然发现了一个关键线索——程序放在D盘时会闪退但移到C盘后就能正常运行。根本原因C盘依赖进一步排查后发现draw.io以及很多Electron应用在启动时会依赖系统盘的一些路径临时缓存路径默认写入%APPDATA%、%TEMP%等系统环境变量指向的路径。如果程序被放在非系统盘可能无法正常读取或写入这些依赖的路径。系统库索引部分动态链接库只在C盘的标准路径中被正确索引。权限问题非系统盘有时会有特殊的权限策略影响程序启动。于是我重新把draw.io放到C:\draw.io目录下纯英文路径双击——这次终于成功打开了经验教训遇到Electron应用闪退先检查两个点——程序是否在C盘、路径是否包含中文。这两点能解决80%的问题。第三阶段配置Claude Code的draw.io Skill解决了draw.io的闪退问题后下一步就是在Claude Code中安装draw.io的官方Skill。步骤1创建Skill目录bashmkdir -p ~/.claude/skills/drawio cd ~/.claude/skills/drawio步骤2创建SKILL.md文件原本打算用curl从GitHub下载官方文件但链接失效了只下载了14字节。于是我手动创建了SKILL.md文件将draw.io官方Skill的核心内容写入markdown--- name: drawio description: | This skill allows Claude to generate and edit draw.io diagrams. It enables creating flowcharts, architecture diagrams, and other visual representations. Use this skill when the user asks to create, modify, or analyze diagrams. --- # Draw.io Diagram Creation ## Overview This skill enables Claude to create and edit draw.io diagrams by generating the underlying XML format. ## Capabilities - Generate draw.io diagrams from natural language descriptions - Create flowcharts, architecture diagrams, entity-relationship diagrams, and more - Edit existing diagrams by adding or removing elements - Customize shapes, colors, and connections ## How to Use When a user requests a diagram, generate the draw.io XML representation and provide it as a .drawio file. ### Creating a New Diagram 1. Understand the users diagram requirements 2. Design the diagram structure (nodes, connections, labels) 3. Generate the appropriate XML format 4. Save as a .drawio file ### Example Workflow User: Create a flowchart showing user login - Generate XML representing login flow - Save as login-flow.drawio ## Technical Details The draw.io XML format uses mxGraph structure with: - mxGraphModel as the root element - Cells defined with mxCell elements - Edges represented as connections between cells - Shapes and styling controlled by the style attribute ## Best Practices 1. Use clear, descriptive labels 2. Organize elements logically 3. Use consistent color schemes 4. Ensure connections are properly terminated 5. Include appropriate zoom and view settings步骤3重启Claude Code完全重启VS Code窗口让Skill生效。第四阶段第一次生成配置好后我在Claude Code中输入text/drawio 根据 /home/.../模型架构图设计说明.md 的内容画一张架构图Claude开始思考、生成代码最终输出textThe architecture diagram has been created at /home/.../模型架构图.drawio第五阶段查看和编辑生成的.drawio文件是一个XML格式的文本文件需要用draw.io打开查看。由于我已经把draw.io放在C盘并正常运行了只需要做文件关联右键.drawio文件 → 打开方式 → 选择draw.io.exe → 勾选“始终使用此应用打开”双击打开双击模型架构图.drawio就能在draw.io中看到完整的架构图画布上清晰展示了我设计的模型架构Panel A共享编码器CNN 时序注意力 FiLM调制Panel B任务特定头回归预测Panel C底部任务层分类和回归联合一些实用的补充技巧Skill vs MCP选哪个对比项SkillMCP配置难度简单复杂需要额外安装否是适用范围仅Claude Code多AI客户端功能灵活性中高对于我这种只想“让Claude帮我画图”的场景Skill方案足够用而且配置简单得多。最终方案总结需求解决方案免费绘图工具draw.io开源免费桌面版启动必须放在C盘路径不要有中文AI驱动画图Claude Code draw.io官方Skill文件关联将.drawio关联到draw.io.exe让Claude看图截图粘贴 或 直接读取XML文件关键经验闪退问题的真正原因draw.io必须在C盘才能正常运行放在D盘或其他非系统盘会导致启动闪退。这是我在排查过程中最大的发现。具体原因包括系统环境变量依赖Electron应用会默认使用%APPDATA%、%TEMP%等指向C盘的路径非系统盘可能无法正确读写系统库索引路径某些依赖库只在C盘的标准路径中被正确索引权限策略差异非系统盘可能有特殊的权限控制策略解决方案✅ 把draw.io放在C盘如C:\draw.io或C:\Program Files\draw.io✅ 确保路径中没有任何中文字符✅ 如果实在要放D盘确保路径纯英文且用管理员身份运行这个坑跟“便携版vs安装版”无关关键是程序放对了磁盘分区。写在最后一些感悟官方不一定有现成插件Visio MCP方案看起来很美好但缺少关键的插件组件说明技术方案还是要看实际可行性。C盘是Electron应用的最后防线遇到这类应用闪退先检查是不是没放C盘这个经验值得记住。Skill方案最适合普通人不需要折腾复杂的MCP配置一个Skill文件就能搞定门槛低得多。有了AI画图变成了“写需求”现在画图不再需要手动拖拽形状只需要用自然语言描述清楚你的需求AI就能帮你生成初版再手动微调就行。整个流程跑通后我最大的感受是技术选型不是越复杂越好找到最顺手的那条路才是最高效的解决方案。希望这篇文章能帮到同样在折腾“AI辅助画图”的你。如果有更好的方案也欢迎交流分享 从Visio到draw.io：我用AI辅助画图的一次完整折腾记录
写在前面我遇到了一个需求需要快速画一张模型架构图。作为一个习惯用AI辅助工作的开发者我立刻想到——能不能让Claude直接帮我画图理想很丰满现实很骨感。从Visio到draw.io从MCP配置到闪退排查我整整折腾了一个下午。这篇文章记录了我从“想用AI控制Visio”到“成功用Claude draw.io生成架构图”的完整过程希望能帮到有类似需求的朋友。第一阶段美好的设想——AI直连Visio我的最初想法很直接既然Claude这么聪明Visio又是专业的绘图工具那让Claude直接操作Visio不就好了搜索一番后发现确实有解决方案——MCP模型上下文协议。这是一种让AI模型直接调用外部工具接口的协议。具体到Visio有几个现成的MCP服务器项目visio-smartdraw-mcp-serverNode.js版office-visio-mcp-serverPython版看起来很美对吧但问题很快就来了。坑一找不到Visio插件visio-smartdraw-mcp-server的文档里提到需要配合一个Visio插件使用——这个插件充当“接收器”让Visio能被外部命令控制。但我找遍了GitHub和搜索引擎根本找不到这个插件的下载包。后来才明白这个项目只提供了MCP服务器端而关键的Visio插件部分似乎从未公开发布过。坑二我的环境太复杂就算找到了插件我的电脑环境也给配置增加了不少难度Windows宿主机安装Visio桌面版WSLWindows Subsystem for Linux里面运行着Claude CodeVS Code通过WSL远程开发使用Claude Code插件简单说就是Claude在Linux环境中Visio在Windows上要让它们跨系统通信需要配置网络、防火墙、端口转发……配置复杂度直接拉满。结论放弃Visio方案。第二阶段转向免费方案——draw.io既然Visio这条路走不通我开始寻找免费替代品。draw.io现在也叫diagrams.net进入了我的视野✅ 完全免费✅ 开源✅ 功能强大足以替代Visio日常使用✅ 有桌面版和网页版✅ 支持与AI集成而且最关键的是draw.io官方提供了Claude Skill——一个可以直接在Claude Code中使用的插件。坑三桌面版闪退下载安装draw.io-31.1.5-windows-installer.exe后双击打开一片白屏然后闪退。我尝试了各种方法检查安装路径是否为纯英文 ✓以管理员身份运行 ✗ 无效更新显卡驱动 ✗ 无效换用便携版 ✗ 无效换用无安装版 ✗ 无效正当我准备放弃桌面版、投奔网页版时偶然发现了一个关键线索——程序放在D盘时会闪退但移到C盘后就能正常运行。根本原因C盘依赖进一步排查后发现draw.io以及很多Electron应用在启动时会依赖系统盘的一些路径临时缓存路径默认写入%APPDATA%、%TEMP%等系统环境变量指向的路径。如果程序被放在非系统盘可能无法正常读取或写入这些依赖的路径。系统库索引部分动态链接库只在C盘的标准路径中被正确索引。权限问题非系统盘有时会有特殊的权限策略影响程序启动。于是我重新把draw.io放到C:\draw.io目录下纯英文路径双击——这次终于成功打开了经验教训遇到Electron应用闪退先检查两个点——程序是否在C盘、路径是否包含中文。这两点能解决80%的问题。第三阶段配置Claude Code的draw.io Skill解决了draw.io的闪退问题后下一步就是在Claude Code中安装draw.io的官方Skill。步骤1创建Skill目录bashmkdir -p ~/.claude/skills/drawio cd ~/.claude/skills/drawio步骤2创建SKILL.md文件原本打算用curl从GitHub下载官方文件但链接失效了只下载了14字节。于是我手动创建了SKILL.md文件将draw.io官方Skill的核心内容写入markdown--- name: drawio description: | This skill allows Claude to generate and edit draw.io diagrams. It enables creating flowcharts, architecture diagrams, and other visual representations. Use this skill when the user asks to create, modify, or analyze diagrams. --- # Draw.io Diagram Creation ## Overview This skill enables Claude to create and edit draw.io diagrams by generating the underlying XML format. ## Capabilities - Generate draw.io diagrams from natural language descriptions - Create flowcharts, architecture diagrams, entity-relationship diagrams, and more - Edit existing diagrams by adding or removing elements - Customize shapes, colors, and connections ## How to Use When a user requests a diagram, generate the draw.io XML representation and provide it as a .drawio file. ### Creating a New Diagram 1. Understand the users diagram requirements 2. Design the diagram structure (nodes, connections, labels) 3. Generate the appropriate XML format 4. Save as a .drawio file ### Example Workflow User: Create a flowchart showing user login - Generate XML representing login flow - Save as login-flow.drawio ## Technical Details The draw.io XML format uses mxGraph structure with: - mxGraphModel as the root element - Cells defined with mxCell elements - Edges represented as connections between cells - Shapes and styling controlled by the style attribute ## Best Practices 1. Use clear, descriptive labels 2. Organize elements logically 3. Use consistent color schemes 4. Ensure connections are properly terminated 5. Include appropriate zoom and view settings步骤3重启Claude Code完全重启VS Code窗口让Skill生效。第四阶段第一次生成配置好后我在Claude Code中输入text/drawio 根据 /home/.../模型架构图设计说明.md 的内容画一张架构图Claude开始思考、生成代码最终输出textThe architecture diagram has been created at /home/.../模型架构图.drawio第五阶段查看和编辑生成的.drawio文件是一个XML格式的文本文件需要用draw.io打开查看。由于我已经把draw.io放在C盘并正常运行了只需要做文件关联右键.drawio文件 → 打开方式 → 选择draw.io.exe → 勾选“始终使用此应用打开”双击打开双击模型架构图.drawio就能在draw.io中看到完整的架构图画布上清晰展示了我设计的模型架构Panel A共享编码器CNN 时序注意力 FiLM调制Panel B任务特定头回归预测Panel C底部任务层分类和回归联合一些实用的补充技巧Skill vs MCP选哪个对比项SkillMCP配置难度简单复杂需要额外安装否是适用范围仅Claude Code多AI客户端功能灵活性中高对于我这种只想“让Claude帮我画图”的场景Skill方案足够用而且配置简单得多。最终方案总结需求解决方案免费绘图工具draw.io开源免费桌面版启动必须放在C盘路径不要有中文AI驱动画图Claude Code draw.io官方Skill文件关联将.drawio关联到draw.io.exe让Claude看图截图粘贴 或 直接读取XML文件关键经验闪退问题的真正原因draw.io必须在C盘才能正常运行放在D盘或其他非系统盘会导致启动闪退。这是我在排查过程中最大的发现。具体原因包括系统环境变量依赖Electron应用会默认使用%APPDATA%、%TEMP%等指向C盘的路径非系统盘可能无法正确读写系统库索引路径某些依赖库只在C盘的标准路径中被正确索引权限策略差异非系统盘可能有特殊的权限控制策略解决方案✅ 把draw.io放在C盘如C:\draw.io或C:\Program Files\draw.io✅ 确保路径中没有任何中文字符✅ 如果实在要放D盘确保路径纯英文且用管理员身份运行这个坑跟“便携版vs安装版”无关关键是程序放对了磁盘分区。写在最后一些感悟官方不一定有现成插件Visio MCP方案看起来很美好但缺少关键的插件组件说明技术方案还是要看实际可行性。C盘是Electron应用的最后防线遇到这类应用闪退先检查是不是没放C盘这个经验值得记住。Skill方案最适合普通人不需要折腾复杂的MCP配置一个Skill文件就能搞定门槛低得多。有了AI画图变成了“写需求”现在画图不再需要手动拖拽形状只需要用自然语言描述清楚你的需求AI就能帮你生成初版再手动微调就行。整个流程跑通后我最大的感受是技术选型不是越复杂越好找到最顺手的那条路才是最高效的解决方案。希望这篇文章能帮到同样在折腾“AI辅助画图”的你。如果有更好的方案也欢迎交流分享