文章目录 介绍 演示环境 从设计规范到实测产物 先看它反对什么 核心机制一份能改的设计令牌表 45 类图示先选语义再选版式 不挑宿主一段 Markdown 打天下️ 技能里到底装了什么✍️ 动手写一张 HTML✅ 让自检脚本先过一遍 把图导出成 SVG 截图确认成品⚠️ 顺手发现的一个版本差 它适合谁 什么情况别折腾 实测下来最有用的两点⚓️ 相关链接 ⚓️ 介绍 上周写一份技术方案卡在最不想干的环节上画架构图。让 AI 编程助手顺手画一张它倒是痛快三秒出图——清一色的圆角方框、默认蓝紫渐变、箭头从框边正中戳出来节点一多就互相压字。拿出去给同事看对方第一句是「这是 Visio 画的吧」。后来在 GitHub Trending 上碰到一个专门治这事的东西一个图示设计技能作者是设计师 Cathryn Lavery简介一句话就把话说完了——「你的设计师不会讨厌的编辑级图示」。它的做法不是再训练一个画图模型而是给 Claude Code、Codex、Copilot 这些编码助手塞一份 Markdown 设计规范配色令牌、排版层级、导线画法、45 类图示模板全写清楚让助手照章作图。仓库 4 月上线到现在 5.6 万 starMIT 协议。我把这台机器上原本装着的那份技能翻了出来从零实测了一遍写 HTML、跑自检脚本、导出 SVG、截图。两份亲手生成的图示都在文里哪一步最容易卡住、它到底适不适合你看完心里就有数了。全程不涉及部署照着能复现。注意本文内容为个人学习笔记仅供参考。附读者须知 演示环境 系统Debian 12 运行时Node.js 24 网络国内网络 从设计规范到实测产物 先看它反对什么打开它的 README第二行就一句口号无阴影、无 Mermaid 味。这句话其实是在点名一类常见产物——你在技术文档里见过的那种图每个框都带一层投影配色是 IDE 默认色箭头乱糟糟地从框中间穿过去字体大小全靠助手心情。它给的判断很直接问题不在模型不会画而在没人告诉它该画成什么样。同样的思路在它自己的哲学一节里写得更狠最高质量的操作通常是删除。一个节点就是一个独立想法两个永远同时出现的节点应该合并成一个一条连线必须携带信息如果关系从排版上已经看出来了就把线删掉。示意图的完成标准不是「该加的都加上了」而是「再也没什么可删」。它还规定了一个密度目标4/10。技术上完整但不需要一份说明书才能看懂。超过 9 个节点大概就该拆成两张图。 核心机制一份能改的设计令牌表技能的本体是一份 Markdown外加 60 多份分类参考文件。真正管住视觉的是references/style-guide.md里的一张令牌表——所有颜色不写十六进制值而是按语义角色称呼paper纸面底色、ink正文与主描边、accent焦点色一张图最多用一到两处、muted次级文字与默认箭头、link接口调用类箭头。这样做的好处很实在改皮肤只改一张表。把accent从烧橙换成你们品牌的蓝全篇图示的焦点色一起变不用逐个文件翻。它的引导流程还支持从你网站 URL 反推配色和字体装完之后每张图自动贴着你项目的视觉走。令牌表底下挂着一张对比度契约这条最见功夫每个令牌都要过 WCAGWeb 内容无障碍指南一套通用的对比度可读性标准检查普通文字对所在背景至少 4.5:1大字号 3:1箭头描边这类必要非文字标记 3:1。仓库里有专门的对比度校验脚本CI 不过就红。拿它自己的数据举例默认亮色皮肤里焦点色是#bf4520在纸面上实测 4.71:1——刚刚过线。为什么不用更亮的原品牌橙因为那个色在纸面上只有 2.86:1当箭头或标签不够看于是把同一个色相压暗到达标为止。这种「为了可读性主动牺牲鲜艳度」的取舍是设计师才会抠的细节。 45 类图示先选语义再选版式技能里给了一张 45 类的选型表逻辑不是「你要画什么图形」而是「你要表达什么语义」。它把选择分成两步先看行为语义再定视觉类型。你想表达的东西该用的类型组件和连接的一个快照架构图两个同步状态之间的结构变化架构差异图带变更台账时间上有先后的一组消息序列图状态、转换和守卫条件状态机一个量在各阶段拆分再汇合桑基图排名层级或转化流失金字塔 / 漏斗做什么与隐藏什么跨阶段对照服务蓝图值链对抗演进该建什么、买什么Wardley 图表下面还有三条经验法则其中两条是劝你别画的如果三列表格能说清同样的事就用表格只有一个形状的「图」把那句话写出来就行。这个「先劝退」的设计贯穿整个技能。它的使用场景一节明确列了不适合的清单随手画个 unicode 示意图、罗列一堆东西、只有属性的前后对比——这些都不该用图示。 不挑宿主一段 Markdown 打天下它的安装方式值得单独说。整个技能的交付物就是 Markdown不是插件包、不是二进制。仓库名是 diagram-design一条命令装到本地npx skillsaddcathrynlavery/diagram-design一条命令装到任何一个读 Agent Skills一种「模型按需加载的 Markdown 指令」开放约定的宿主里。Claude Code、Codex、Copilot、Cursor、Factory Droid 都支持不换宿主的时候同一份技能在 GPT、Claude、Gemini 乃至本地模型上都能跑。它的 README 把各宿主的插件市场命令也列全了Claude Code 和 Copilot 装完还能拿到自动更新和斜杠命令。作者的说明很直白官方构建只出自这个仓库。对我这种同时在几个助手里切换的人这点比图好看不好看更实际——画图规范第一次成了可跨工具迁移的资产而不是锁死在某个编辑器的插件里。️ 技能里到底装了什么翻出这台机器上装着的技能本地版本号 2.6。先说结论从一句需求到一张能贴进文档的图全在本地闭环没有一次网络请求。本地目录里 SKILL.md 一份 394 行references/下 63 份分类参考scripts/下 5 个 Python 脚本assets/下 217 个预生成的 HTML 示例。没有依赖安装步骤没有构建环节。翻了份参考文件的体量感受一下references/primitive-icons.md104KBreferences/type-line.md43KBreferences/export.md30KB。这不是一个「提示词模板」级别的项目。✍️ 动手写一张 HTML按它的输出规范产物是一个自包含 HTML 文件SVG 内联样式写在页面style里。我在测试目录写了一张最简架构图左边三个编码助手中间一个技能层右边三条出口本地文件、导出、导入旧格式重画。要点只有一个别自己发明颜色全部用令牌表的语义角色。✅ 让自检脚本先过一遍这是我最欣赏的一环。技能自带scripts/self_check.py跑一条命令python3 scripts/self_check.py my-diagram.html我第一版直接被它拦下报了四个问题svg 1 title must be its first childsvg 1 needs non-empty title and descsvg 1 title/desc IDs must be diagram-prefixed, never baresvg 1 aria-labelledby must name title then desc逐条都是无障碍accessibility让读屏软件能读出图的内容约定SVG 的title和desc必须是前两个子元素ID 要带图名前缀aria-labelledby要先指 title 再指 desc。补上之后脚本回OK退出码 0。它检查的不止这些单文件安全性禁止远端资源、禁止可执行属性、绘制内容是否跑出 viewBox、带动画时还要过结构契约。等于把「别做出打不开的图」变成了机器判定。 把图导出成 SVGpython3 scripts/export_svg.py my-diagram.html my-diagram.svg这个脚本解决的是三个导出时的老坑类样式图的style规则要嵌一份进 SVG否则所有形状退化成黑色defs里的 marker、渐变 ID 要加文件前缀否则多张图塞进同一个文档时url(#arrow)会指到别人的声明HTML 专有属性语法要改写成合法 XML。导出完 4KB 的 SVG可以直接贴进支持内联 SVG 的文档。 截图确认成品本地有 Chromium一条命令出图chromium--headless--no-sandbox--screenshotdiagram.png --window-size960,540file:///tmp/ddtest/diagram.html全程无网络、无字体下载、无构建。下面这两张就是这次实测的产物第一张是技能接入示意第二张是装技能前后的效果对比。⚠️ 顺手发现的一个版本差实测过程中比对了本地和上游仓库的 SKILL.md394 行里有两处不一样都是小改动但能看出维护节奏本地那份写「快速 unicode 图示 → 用 wiretext」上游已经改成「用一个独立的纯文本工具本技能不内置」导出一节上游新增了scripts/export_png.py并明确「导出是手动操作别主动产文件」本地还没有这个脚本。顺手还查了「45 类图示」这个数字的出处README 现行写 45但 CHANGELOG 的 v2.6 记录和画廊编号还停在 44——新类型加上去了几处文档没完全同步属于常见的口径时差装的时候以 README 为准即可。上游最后一次提交是 10 月 16 日内容是修 loop 图示的一处站位说明和版本号推进。一个还在天天动的项目装的时候记得拉最新版。 它适合谁写技术文档要配图的人。这是它的主场景。架构图、流程图、序列图、ER 图一次装好之后每篇文档的图示风格统一不用再开画图工具。要给旧图换血的人。它支持从.drawio、Mermaid、.excalidraw三种格式导入重画脚本分别是drawio_extract.py、mermaid_extract.py、excalidraw_extract.py。手头攒了一批早期画的图可以按新规范批量重出。团队视觉要对齐的人。令牌表加品牌引导意味着「所有图示长得像一家出的」这件事第一次有了可执行的落地方式而不是靠一份口头规范。 什么情况别折腾要频繁改的图。产物是 HTML改节点位置得动代码。频繁调整的图用支持拖拽的工具更合适。要精确比例的工程图纸。它是编辑级图示不是 CAD。尺寸标注、比例尺这类需求别找它。只是随手记一笔。一句话能说清的事画图是浪费。 实测下来最有用的两点第一是自检脚本。它把「图能不能正常打开、内容有没有跑出画布、无障碍标记齐不齐」这些本该人眼扫的事变成了命令行判定写进文档流水线里可以当一道自动关卡。第二是令牌表。它让我意识到图示不好看的根因往往是「每次从零选颜色」而不是审美问题。把选择固化成一张表之后只做判断不做选择。⚠️说明本文基于该项目 2026 年 10 月 17 日的版本与文档整理。开源项目的功能、图示类型数量、命令行参数与配置结构后续都可能调整请前往官方仓库与文档查看最新内容并自行核实一切以官网当前版本为准本文所述仅代表整理时点的实测情况仅供参考。注意事项本文所有 star 数、版本号、文件数量均为实测时点数据随时会变。自检脚本报的无障碍四项是硬判定不补齐拿不到OK别跳过。截图用本地 Chromium没网也能出图但首次加载 Google Fonts 需要联网想要完全离线可以用它的系统字体选项。每个人的环境不一样配置请按自己的情况调整方案仅供参考不能保证照搬有效。⚓️ 相关链接 ⚓️XiaoqiangClubdiagram-design 官方仓库diagram-design 官网图示类型在线画廊Agent Skills 介绍 
长河君 · 2026/10/19 7:19:26 · 阅读 1.2k AI 画架构图总堆方框？5.6 万 star 的图示设计技能
文章目录 介绍 演示环境 从设计规范到实测产物 先看它反对什么 核心机制一份能改的设计令牌表 45 类图示先选语义再选版式 不挑宿主一段 Markdown 打天下️ 技能里到底装了什么✍️ 动手写一张 HTML✅ 让自检脚本先过一遍 把图导出成 SVG 截图确认成品⚠️ 顺手发现的一个版本差 它适合谁 什么情况别折腾 实测下来最有用的两点⚓️ 相关链接 ⚓️ 介绍 上周写一份技术方案卡在最不想干的环节上画架构图。让 AI 编程助手顺手画一张它倒是痛快三秒出图——清一色的圆角方框、默认蓝紫渐变、箭头从框边正中戳出来节点一多就互相压字。拿出去给同事看对方第一句是「这是 Visio 画的吧」。后来在 GitHub Trending 上碰到一个专门治这事的东西一个图示设计技能作者是设计师 Cathryn Lavery简介一句话就把话说完了——「你的设计师不会讨厌的编辑级图示」。它的做法不是再训练一个画图模型而是给 Claude Code、Codex、Copilot 这些编码助手塞一份 Markdown 设计规范配色令牌、排版层级、导线画法、45 类图示模板全写清楚让助手照章作图。仓库 4 月上线到现在 5.6 万 starMIT 协议。我把这台机器上原本装着的那份技能翻了出来从零实测了一遍写 HTML、跑自检脚本、导出 SVG、截图。两份亲手生成的图示都在文里哪一步最容易卡住、它到底适不适合你看完心里就有数了。全程不涉及部署照着能复现。注意本文内容为个人学习笔记仅供参考。附读者须知 演示环境 系统Debian 12 运行时Node.js 24 网络国内网络 从设计规范到实测产物 先看它反对什么打开它的 README第二行就一句口号无阴影、无 Mermaid 味。这句话其实是在点名一类常见产物——你在技术文档里见过的那种图每个框都带一层投影配色是 IDE 默认色箭头乱糟糟地从框中间穿过去字体大小全靠助手心情。它给的判断很直接问题不在模型不会画而在没人告诉它该画成什么样。同样的思路在它自己的哲学一节里写得更狠最高质量的操作通常是删除。一个节点就是一个独立想法两个永远同时出现的节点应该合并成一个一条连线必须携带信息如果关系从排版上已经看出来了就把线删掉。示意图的完成标准不是「该加的都加上了」而是「再也没什么可删」。它还规定了一个密度目标4/10。技术上完整但不需要一份说明书才能看懂。超过 9 个节点大概就该拆成两张图。 核心机制一份能改的设计令牌表技能的本体是一份 Markdown外加 60 多份分类参考文件。真正管住视觉的是references/style-guide.md里的一张令牌表——所有颜色不写十六进制值而是按语义角色称呼paper纸面底色、ink正文与主描边、accent焦点色一张图最多用一到两处、muted次级文字与默认箭头、link接口调用类箭头。这样做的好处很实在改皮肤只改一张表。把accent从烧橙换成你们品牌的蓝全篇图示的焦点色一起变不用逐个文件翻。它的引导流程还支持从你网站 URL 反推配色和字体装完之后每张图自动贴着你项目的视觉走。令牌表底下挂着一张对比度契约这条最见功夫每个令牌都要过 WCAGWeb 内容无障碍指南一套通用的对比度可读性标准检查普通文字对所在背景至少 4.5:1大字号 3:1箭头描边这类必要非文字标记 3:1。仓库里有专门的对比度校验脚本CI 不过就红。拿它自己的数据举例默认亮色皮肤里焦点色是#bf4520在纸面上实测 4.71:1——刚刚过线。为什么不用更亮的原品牌橙因为那个色在纸面上只有 2.86:1当箭头或标签不够看于是把同一个色相压暗到达标为止。这种「为了可读性主动牺牲鲜艳度」的取舍是设计师才会抠的细节。 45 类图示先选语义再选版式技能里给了一张 45 类的选型表逻辑不是「你要画什么图形」而是「你要表达什么语义」。它把选择分成两步先看行为语义再定视觉类型。你想表达的东西该用的类型组件和连接的一个快照架构图两个同步状态之间的结构变化架构差异图带变更台账时间上有先后的一组消息序列图状态、转换和守卫条件状态机一个量在各阶段拆分再汇合桑基图排名层级或转化流失金字塔 / 漏斗做什么与隐藏什么跨阶段对照服务蓝图值链对抗演进该建什么、买什么Wardley 图表下面还有三条经验法则其中两条是劝你别画的如果三列表格能说清同样的事就用表格只有一个形状的「图」把那句话写出来就行。这个「先劝退」的设计贯穿整个技能。它的使用场景一节明确列了不适合的清单随手画个 unicode 示意图、罗列一堆东西、只有属性的前后对比——这些都不该用图示。 不挑宿主一段 Markdown 打天下它的安装方式值得单独说。整个技能的交付物就是 Markdown不是插件包、不是二进制。仓库名是 diagram-design一条命令装到本地npx skillsaddcathrynlavery/diagram-design一条命令装到任何一个读 Agent Skills一种「模型按需加载的 Markdown 指令」开放约定的宿主里。Claude Code、Codex、Copilot、Cursor、Factory Droid 都支持不换宿主的时候同一份技能在 GPT、Claude、Gemini 乃至本地模型上都能跑。它的 README 把各宿主的插件市场命令也列全了Claude Code 和 Copilot 装完还能拿到自动更新和斜杠命令。作者的说明很直白官方构建只出自这个仓库。对我这种同时在几个助手里切换的人这点比图好看不好看更实际——画图规范第一次成了可跨工具迁移的资产而不是锁死在某个编辑器的插件里。️ 技能里到底装了什么翻出这台机器上装着的技能本地版本号 2.6。先说结论从一句需求到一张能贴进文档的图全在本地闭环没有一次网络请求。本地目录里 SKILL.md 一份 394 行references/下 63 份分类参考scripts/下 5 个 Python 脚本assets/下 217 个预生成的 HTML 示例。没有依赖安装步骤没有构建环节。翻了份参考文件的体量感受一下references/primitive-icons.md104KBreferences/type-line.md43KBreferences/export.md30KB。这不是一个「提示词模板」级别的项目。✍️ 动手写一张 HTML按它的输出规范产物是一个自包含 HTML 文件SVG 内联样式写在页面style里。我在测试目录写了一张最简架构图左边三个编码助手中间一个技能层右边三条出口本地文件、导出、导入旧格式重画。要点只有一个别自己发明颜色全部用令牌表的语义角色。✅ 让自检脚本先过一遍这是我最欣赏的一环。技能自带scripts/self_check.py跑一条命令python3 scripts/self_check.py my-diagram.html我第一版直接被它拦下报了四个问题svg 1 title must be its first childsvg 1 needs non-empty title and descsvg 1 title/desc IDs must be diagram-prefixed, never baresvg 1 aria-labelledby must name title then desc逐条都是无障碍accessibility让读屏软件能读出图的内容约定SVG 的title和desc必须是前两个子元素ID 要带图名前缀aria-labelledby要先指 title 再指 desc。补上之后脚本回OK退出码 0。它检查的不止这些单文件安全性禁止远端资源、禁止可执行属性、绘制内容是否跑出 viewBox、带动画时还要过结构契约。等于把「别做出打不开的图」变成了机器判定。 把图导出成 SVGpython3 scripts/export_svg.py my-diagram.html my-diagram.svg这个脚本解决的是三个导出时的老坑类样式图的style规则要嵌一份进 SVG否则所有形状退化成黑色defs里的 marker、渐变 ID 要加文件前缀否则多张图塞进同一个文档时url(#arrow)会指到别人的声明HTML 专有属性语法要改写成合法 XML。导出完 4KB 的 SVG可以直接贴进支持内联 SVG 的文档。 截图确认成品本地有 Chromium一条命令出图chromium--headless--no-sandbox--screenshotdiagram.png --window-size960,540file:///tmp/ddtest/diagram.html全程无网络、无字体下载、无构建。下面这两张就是这次实测的产物第一张是技能接入示意第二张是装技能前后的效果对比。⚠️ 顺手发现的一个版本差实测过程中比对了本地和上游仓库的 SKILL.md394 行里有两处不一样都是小改动但能看出维护节奏本地那份写「快速 unicode 图示 → 用 wiretext」上游已经改成「用一个独立的纯文本工具本技能不内置」导出一节上游新增了scripts/export_png.py并明确「导出是手动操作别主动产文件」本地还没有这个脚本。顺手还查了「45 类图示」这个数字的出处README 现行写 45但 CHANGELOG 的 v2.6 记录和画廊编号还停在 44——新类型加上去了几处文档没完全同步属于常见的口径时差装的时候以 README 为准即可。上游最后一次提交是 10 月 16 日内容是修 loop 图示的一处站位说明和版本号推进。一个还在天天动的项目装的时候记得拉最新版。 它适合谁写技术文档要配图的人。这是它的主场景。架构图、流程图、序列图、ER 图一次装好之后每篇文档的图示风格统一不用再开画图工具。要给旧图换血的人。它支持从.drawio、Mermaid、.excalidraw三种格式导入重画脚本分别是drawio_extract.py、mermaid_extract.py、excalidraw_extract.py。手头攒了一批早期画的图可以按新规范批量重出。团队视觉要对齐的人。令牌表加品牌引导意味着「所有图示长得像一家出的」这件事第一次有了可执行的落地方式而不是靠一份口头规范。 什么情况别折腾要频繁改的图。产物是 HTML改节点位置得动代码。频繁调整的图用支持拖拽的工具更合适。要精确比例的工程图纸。它是编辑级图示不是 CAD。尺寸标注、比例尺这类需求别找它。只是随手记一笔。一句话能说清的事画图是浪费。 实测下来最有用的两点第一是自检脚本。它把「图能不能正常打开、内容有没有跑出画布、无障碍标记齐不齐」这些本该人眼扫的事变成了命令行判定写进文档流水线里可以当一道自动关卡。第二是令牌表。它让我意识到图示不好看的根因往往是「每次从零选颜色」而不是审美问题。把选择固化成一张表之后只做判断不做选择。⚠️说明本文基于该项目 2026 年 10 月 17 日的版本与文档整理。开源项目的功能、图示类型数量、命令行参数与配置结构后续都可能调整请前往官方仓库与文档查看最新内容并自行核实一切以官网当前版本为准本文所述仅代表整理时点的实测情况仅供参考。注意事项本文所有 star 数、版本号、文件数量均为实测时点数据随时会变。自检脚本报的无障碍四项是硬判定不补齐拿不到OK别跳过。截图用本地 Chromium没网也能出图但首次加载 Google Fonts 需要联网想要完全离线可以用它的系统字体选项。每个人的环境不一样配置请按自己的情况调整方案仅供参考不能保证照搬有效。⚓️ 相关链接 ⚓️XiaoqiangClubdiagram-design 官方仓库diagram-design 官网图示类型在线画廊Agent Skills 介绍