Codex 实战系列｜零代码画出复杂架构图

deep_dive: 结论：X 精选作者 Miles（@miles_mazy）这篇教程讲的是让 Codex 接上 Draw.io 官方 MCP（@drawio/mcp），把方案材料直接转成可编辑的架构图，省掉几十个方框手动对齐的排版折磨。生成后图在浏览器里打开，文字可改、方框可拖，改个名字不用重新生成整张图。他用这套方法做出了组织结构图、预约 SaaS 系统图、企业数字化全景、运营商云网总览，以及一张六层 48 个模块的复杂架构图。

步骤：1. 在本地项目文件夹里让 Codex 按 @drawio/mcp 官方说明配置 MCP Tool Server，检查 Node.js、npx 和 MCP 配置，缺什么让它补。2. 让 Codex 实际调用 open_drawio_xml 画「开始 → 完成」两个框测试，浏览器自动弹出或打开回复里的链接，看到两个相连方框才算接通。3. 把材料整理成「属于哪一层、模块叫什么、一句话用途」三列，或一段写清上下级关系的文字，让 Codex 先画六个横向大框填上层名。4. 先只做「共享平台」这一行，确认八个模块摆进去字号够大、图标文字不挤，再沿用相同的方框宽度和文字位置铺完其他五行；图标可让 Codex 用 Draw.io 图形搜索找，或从左下角「更多图形」打开网络、服务器等图形库。5. 在 Draw.io 里双击改字、单击拖动调位、按住 Shift 多选后用右侧「排列」做对齐和分布；改完先保存 .drawio 源文件再交回 Codex 接着改，最后从「文件 → 导出为 → PNG」导出，缩放调高一些更清楚。

适用场景：适合经常做方案、需要画五六层大图的人，比如运营商、国央企场景，以及要出组织结构、系统架构、分期规划图的团队。前提是材料里关系必须明确：只有名单没有上下级时先补关系，原文没提到的支付、数据库不要让 AI 自动补全。手动改过浏览器里的图之后，必须先保存 .drawio 再交给 Codex，它默认看不到浏览器里的实时调整。