你好我是小 G。很多时候我感叹 AI 时代给我带来的冲击是从一些小事引起的。在过去我写一篇技术文章最少需要花费一周长一点的甚至要一个月。其中有 1/3 的时间都花费在了枯燥的配图上。熟悉我的读者朋友应该知道JavaGuide 上的所有配图都是用 draw.io 手动绘制的。每一篇文章都有大量的图解帮助理解。但是到了 AI 时代就彻底变了尤其是对于 draw.io 配图来说。在去年 skill 还没火的时候我是用 AI 直接生成对应的 XML然后导入到 draw.io 中。到了今天得益于 skill 的诞生生成 draw.io 配图变得更加自动化了。今天我会分享一下我平时用的自定义 draw.io 绘图 skill还会提到一些其他常见的 AI 绘图项目。为什么选择 draw.io图不能只看生成时漂不漂亮后面能不能改也很重要。技术文章发出去以后标题、节点、箭头、术语经常会调整。如果手里只剩一张 PNG要么重新生成要么硬改图片最后风格还不一定能对上。所以我现在更愿意保留一份可编辑源文件。比如我本地会把这些.drawio源文件单独留在素材目录里后面要改某张图直接打开对应文件就行。draw.io的好处就在这里.drawio可以继续在 diagrams.net 或 draw.io 桌面版里改导出 PNG、SVG、PDF 也方便。流程图、架构图、状态图这些技术图源文件通常不大放进仓库或素材目录也没什么压力。导出时也不用额外折腾菜单里可以直接选 PNG、JPEG、WebP、SVG、PDF 等常见格式。Skill 刚诞生那会我就把这套流程整理成了一个 Skilldrawio-chart。现在你在 javaguide.cn 上看到的不少 AI 编程、Spec Coding、Claude Code 相关文章配图基本都是这套思路做出来的先让 Agent 抽结构、排节点、生成.drawio再按文章需要导出图片需要更强视觉表现时再搭配 GPT-IMG2 做进一步处理。为什么不只用图片生成我之前也试过几个方向。tt-a1i/archify更像是用自然语言生成自包含的 HTML 技术图支持主题切换和多格式导出也有校验、渲染流程。coleam00/excalidraw-diagram-skill走 Excalidraw 风格适合白板感和观点表达还会用 Playwright 检查文字重叠、箭头错位、间距失衡这些问题。DayuanJiang/next-ai-draw-io更像一套 AI 绘图产品把 AI 接进 draw.io支持在线 Demo、桌面应用、Docker、本地安装、MCP Server 和多模型配置。我当时用起来体感有点卡画图效率也不高。不过这个项目现在还在更新我没有重新压测就不评价当前性能了。这几个项目各有侧重。Archify 成品感更强Excalidraw 更适合白板表达next-ai-draw-io 更像独立产品。但放到 JavaGuide 的技术文章里我更常遇到的是这些需求图里有很多中文术语后续经常要微调。同一批文章里的配色、字体、节点风格要尽量统一。图要能插进 Markdown、公众号、网页和仓库文档。文章更新后最好只改几个节点而不是整张重来。这时候.drawio源文件更顺手。单独打开一个绘图系统对文章配图来说有点重。Coding Agent 本来就在读文章、改文件、跑命令、整理素材让它顺手调用 Skill 生成.drawio再批量导出链路会短很多。图片生成模型适合增强视觉表现但不太适合长期维护。今天改一个词明天加一个分支你很难只让它精准动那一小块还保持整张图不变形。draw.io 没有那么“生成即大片”但节点、连线、容器、文字都能继续改。对技术图来说这点很值钱。我现在的绘图流程我现在更常用的流程大概是这样先写文章或者至少把文章的主线、流程、概念关系整理出来。让 Agent 判断这篇文章里哪些地方值得画图。用$drawio-chart生成.drawio源文件。需要发布时导出 PNG / SVG / PDF。如果某张图需要更强的视觉表现再搭配 GPT-IMG2 做进一步处理。我更在意的是把结构和表现拆开。drawio-chart负责结构化图表流程怎么走模块怎么连状态怎么迁移哪些节点属于一组。GPT-IMG2 更适合处理位图层面的表达比如让一张图更像文章配图、更有视觉完整度。结构还留在.drawio里后面要改就能改。下面这张就是一次实际生成.drawio的过程。Agent 读完需求后直接写出源文件最后返回文件路径和结构说明。打开以后它仍然是标准 draw.io 文件。节点、连线、文字都能继续手动调不会被锁死在一张图片里。这就是绘图之后没有改动的原图可以看到线条还是有一些小细节需要手动调整优化。这也是比较正常的。下面来看看用这个 Skill 画的一些图片这张CLAUDE.md维护决策流程图就是典型的流程判断类配图Multi-Agent 协作这种内容如果只用文字写读者很容易看成一堆角色名。画成流水线后每个 Agent 负责什么、信息怎么流转会直观很多。Spec Coding 这类文章也类似。它讲的是一套工作流不是一个孤立概念。图里把需求、Spec、实现、验证串起来读者就能先抓住整体再回到正文看细节。还有 Spec 管理策略这种图文字解释会比较绕。分层过滤、精准召回、上下文控制这些词放到一张图里反而更容易理解。这些图不一定每张都要靠 AI 一次性做完。省时间的地方主要在前半段Agent 先帮你搭出结构后续人再按文章语境修。技术文章配图一旦和文章脱节就会很麻烦。图里的节点、标题、箭头如果不能和正文对上再漂亮也没用。drawio-chart这个 Skill 做了什么我之前在 《Agent Skills 是什么和 Prompt、MCP 到底差在哪》 里讲过Skill 更像一份按需加载的任务说明。它不负责发明一个新工具也不等同于 Function Calling 或 MCP。它解决的是某类任务怎么做、什么时候做、哪些步骤不能漏、需要哪些参考资料。drawio-chart就是把“给技术文章画 draw.io 图”这件事沉淀成了 Skill。它的主文件是SKILL.md里面只放几类信息什么时候应该用它比如 draw.io、diagrams.net、流程图、架构图、时序图、ER 图、状态机图、思维导图。什么时候不该用它比如用户只想要 Mermaid 代码或者要的是位图插画、海报、白板风配图。绘图前要收集什么信息比如主题、图表类型、关键节点、节点关系、是否导出。生成.drawio时按什么顺序走比如标题、容器、核心节点、连线、标签。交付前检查什么比如节点是否齐全、关系是否画对、连线标签是否过长、文件名是否规范。更细的东西没有全塞进SKILL.md。它拆了几个references/文件文件放什么style-spec.md配色、字体、节点语义、连线风格xml-and-layout.mddraw.io XML 结构、节点模板、连线模板、布局建议export-and-files.mdPNG / SVG / PDF 导出命令、文件命名、交付规则use-cases.md常见 prompt、多图文章配图模式、页面命名建议这个拆法和 Skills 的设计思路是一致的。主文件不要写成超长 README。Agent 先知道这个 Skill 能干什么命中任务以后再根据当前需求读取对应参考文件。比如只是生成一张流程图不一定要读完整导出规范。如果用户明确要求导出 PNG再去看export-and-files.md就够了。需要控制样式时再读style-spec.md。这样上下文不会被无关细节挤满执行也更稳定。我给它加了哪些约束画图这件事很容易失控。Agent 生成图时常见问题有几个节点文字太长连线标签压在箭头上一张图里颜色乱用看起来像随机上色流程图里每条线都带很长的解释XML 里混进 HTML 标签后面渲染或编辑时容易出问题。所以drawio-chart里写了不少很具体的约束。比如样式上Agent 不需要现场随便选颜色。规则会按语义分配入口、业务服务、基础设施、客户端、外部依赖、数据库、缓存、消息队列、异常状态分别有对应色值。这样同一批图放在一起时读者不会每张都重新理解颜色。文字上它要求mxCell.value默认使用纯文本需要换行时用 XML 换行实体不在节点值里塞br、b这类 HTML 标签。连线标签也要短。短连接线不要放长说明能写进节点就写进节点能放旁注就放旁注。技术图里很多凌乱感都是从“每条线都想解释一句”开始的。导出上它默认先保留.drawio再按需要导出。即使导出失败也不能删源文件。怎么安装和使用我已经把这个 Skill 放到了 - AIGuideAI 应用开发、AI 编程实战与面试指南对标 JavaGuide完全开源免费 仓库里仓库入口https://github.com/Snailclimb/AIGuide/tree/main/skillsSkill 目录https://github.com/Snailclimb/AIGuide/tree/main/skills/drawio-chart如果你在用npx skills生态可以这样安装npx skillsaddSnailclimb/AIGuide/skills/drawio-chart如果只想安装给 Codex也可以直接指定 agentnpx-yskillsaddSnailclimb/AIGuide/skills/drawio-chart--agentcodex--yes如果你主要在 Codex 里用也可以从 GitHub 安装python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py\--repoSnailclimb/AIGuide\--pathskills/drawio-chart这里要注意一下skills1.5.15这类版本里npx skills add Snailclimb/AIGuide --path skills/drawio-chart可能仍会先扫描到仓库里的全部 Skill。更稳的写法是把skills/drawio-chart直接写进 source也就是上面的Snailclimb/AIGuide/skills/drawio-chart。安装时会看到它识别仓库来源、找到drawio-chart再让你选择安装到哪个 agent 和作用范围。Codex 有时不会立刻重新扫描新装的 Skill我一般会重启一下再用。刚开始别让 Agent 猜。直接点名$drawio-chart它更容易进到正确的工作流里。比如画一个登录流程图我会这么写使用 $drawio-chart 画一个用户登录流程图包含 输入账号密码 - 验证账号密码 - 成功跳转首页 - 失败提示错误并允许重试。 要求导出 PNG。给整篇文章配图时我通常不会先规定“必须画几张”。更顺的做法是把文章路径交给它让它先从文章里挑真正值得画的结构再把格式要求补上使用 $drawio-chart 读取这篇文章为文章生成几张合适的技术配图。 所有配图放到同一个 draw.io 文件里每张子图作为一个 diagram page。 主文件名和文章文件名保持一致页面名用英文小写中横线。 配图风格遵循 drawio-chart 的统一规范。这里不要只丢一句“帮我画个架构图”。微服务架构图至少要说清楚有哪些服务、哪些存储、哪些外部依赖请求从哪里进来哪些调用是同步的哪些链路走异步消息。你给它的是一段明确的图表需求它产出的才更接近可用稿。只给一个很虚的标题后面大概率还是要人手动返工。哪些图适合 draw.io我现在主要把三类图交给drawio-chart。一类是文章里的流程图。比如 Spec Coding、CLAUDE.md 维护策略、Agent 协作流水线这些图都有清晰的步骤和分支draw.io 很适合后续微调。一类是架构图和模块关系图。这里最烦的是风格不统一同一篇文章里服务节点一个颜色存储节点一个颜色外部依赖再单独区分读者看起来会轻松很多。还有一类是会反复改的图。文章上线后标题、节点名、箭头方向、导出尺寸都可能调整。只要.drawio还在改起来就不算麻烦。我不太会拿它做封面图、海报、产品氛围图这些交给 GPT-IMG2 更合适。想要白板手绘风Excalidraw 那套更贴近想要带主题切换、自包含 HTML 和网页交互Archify 也值得看看。