开源技能，自动生成可编辑的.drawio文件

写技术文章、做分享PPT、画系统架构图，最头疼的是什么？

不是想不清楚逻辑，而是画出来的图不好看。配色乱、箭头丑、对齐歪，怎么看都不像正经文章里该有的样子。

最近有个开源项目解决了这个问题——anthropic-diagram，一个Claude Code技能。你只需要用自然语言描述你想画什么，它就能自动生成一张具有Anthropic技术博客风格的图表。

长什么样？

先看几张输出样例（原图在项目README里）：

• 背景是温暖的米色（#F2EFE8），不是刺眼的白

• 箭头是开放式的V形，不是实心三角

• 连接线带柔和圆角，走正交路线，不斜着来

• 每张图都包在一个细边框圆角矩形里

• 颜色有明确语义，不用看标签也能猜出哪部分是用户输入、哪部分是AI模型、哪部分是错误状态

这就是Anthropic技术博客图表的标志性风格——简洁、温暖、克制。

它能画什么？

项目内置了12种图表模式，覆盖了大部分技术文章会用到的场景：

模式	适用场景
线性工作流	顺序步骤，一个环节引出下一个
反馈循环工作流	重试、迭代、评估闭环
分支工作流 / 决策树	分支逻辑、路由、审批关卡
并行发散 / 汇聚	并发执行、结果聚合
分屏对比	前后对比、两种方案并排
分组式架构	系统边界、组件、包含关系
分层堆栈	层级关系、抽象层、依赖
泳道时序图	多个参与者随时间交互
中心辐射	一个核心概念及支撑性想法
维恩 / 重叠	共享归属、领域汇合
编辑型图表	数值比较、指标对照
注释标注	用于解释主图的补充说明

这些模式可以组合使用，比如“分组式架构+注释标注”，但每次必须有一个主模式。

颜色不只是装饰

这套图表最实用的设计是语义化颜色系统。每种颜色代表一种角色，所有图表保持一致：

角色	填充色	适用场景
主要/中性	#E6E2DA	基础组件
次要/上下文	#EAF4FB	文件、工具、文档
控制层	#EEEAF9	路由、记忆、编排
起始/触发	#F8E9E1	用户输入、外部触发
结束/成功	#CFE8D7	最终状态、成功结果
警告/重置	#F3E4DA	重试、中断
决策	#E6D7B4	分支、关卡、审批
AI/LLM	#D7E6DC	模型调用、代理
非活动	#EFECE6	禁用状态
错误	#F8DFDA	错误、异常

读者不用先读标签，扫一眼颜色就能大致判断组件的功能角色。

怎么安装？

其实简单的安装方式，直接把github开源地址丢给Claude code，告诉它帮我安装即可。 下面手工安装和使用方法：

这个技能是为Claude Code设计的。安装两步：

1. 把skill.md文件和references/文件夹复制到Claude Code的skills目录：

• 用户级：~/.claude/skills/anthropic-diagram/

• 项目级：.claude/skills/anthropic-diagram/

• Claude Code会自动检测并加载，不用额外配置。

• 如果想生成后自动打开文件或导出PNG，需要先安装draw.io Desktop（免费）。

  怎么用？

  直接用自然语言描述你想画什么就行。技能会在以下请求中自动触发：

  示例提示词：

  • “画一个agent循环的示意图”

  • “创建一个展示RAG检索工作原理的流程图”

  • “把上下文工程的前后对比可视化出来”

  • “为这个系统制作一张架构图”

  中英文都支持，图里的标签会自动匹配你用的语言。

  输出什么？

  生成的是.drawio文件（draw.io/diagrams.net的格式）。拿到文件后：

  • 打开draw.io网站，在创建新图页面直接把文件拖进去就能编辑

  • 或者用draw.io Desktop打开，继续调整

  • 也可以命令行导出PNG或SVG

  PNG导出示例（Windows）：

  "C:\Program Files\draw.io\draw.io.exe" -x -f png -e -b 20 -o output.png input.drawio

  文件结构

  anthropic-diagram/
  ├── skill.md                      # 主技能文件（工作流、XML模板）
  ├── references/
  │   ├── color-palette.md          # 颜色、字体、几何参数唯一来源
  │   └── pattern-library.md        # 12种图表模式详细说明
  └── README.md

  如果想修改视觉风格，改color-palette.md就行，不用动主逻辑。

  设计理念

  这个技能背后的思路是三个原则：

  1. 先模式，后像素：先选对结构模式，再处理样式细节

  2. 语义化颜色：颜色本身就是信息，不只是装饰

  3. 克制是质量信号：不用阴影、渐变、高饱和色，平静的留白比繁杂的装饰更显专业

  这正是“编辑型技术图表”（用来在文章中解释观点）区别于UI仪表盘或企业架构图的地方。

  适合谁用？

  • 写技术博客的人

  • 做技术分享或培训的工程师

  • 画系统设计文档的架构师

  • 任何需要用图表表达逻辑但不想在排版上花太多时间的人

  测试

  我安装好后，一句话让claude code 帮我画下TCP三次握手的流程图，效果非常赞，绘图结果如下：

  最后

  这个项目把“画图”这件事从一个需要手动调整格式的工作，变成了用自然语言描述就能完成的任务。你只需要想清楚要表达什么逻辑，剩下的配色、布局、样式都交给技能去处理。

  项目地址：https://github.com/dingtingli/dtl-skills/tree/main/anthropic-diagram

  你平时用什么工具画技术图？来评论区聊聊你的画图习惯。