★ FEATURED ARTICLE 上周给 agent 工作流的文档配图我又一次在 SVG 里手动挪坐标。这周的仓库把这件事变成对 agent 说一句话我装上试了一遍。本周 Top5AnyPS528,663、skills11,955、diagram-design9,867本期主角、hyperframes4,732、e2e4,426。diagram-design 本周净增 9,867 星排周榜第三总量 54,422 星、3,443 forkMIT 协议。作者 Cathryn Lavery 是消费品牌 BestSelf.co 的创始人写博客要配图每次让 Claude 画出来的都是通用圆角框跟自己的网站完全不搭要么跟 Figma 搏斗半小时要么干脆不放图。四月她建了这个仓库八月底登过 GitHub 日榜第一当时还是 29 种图如今 45 种版本 2.6.98最近两周提交破百。上期主角 rea 回访一句昨天发稿时 166,820 星今天已经 213,907。这篇拆三件事品味怎么写成机器可执行的规则AI 画的图怎么被机器验收以及作者自己承认的边界。图 diagram-design 官方横幅仓库 README 配图它是什么它是一个 agent 技能包一条 npx skills add 命令装进 Claude Code、Codex、Cursor、Gemini CLI 等主流宿主。之后你对 agent 说画一张前端、后端、数据库加 Redis 的架构图它选定类型、声明计划写出一个自包含的 HTML 文件内联 SVG无构建步骤、无 JavaScript、无外部图片依赖双击浏览器就是成品。45 种类型各有明、暗和全编辑三档变体架构图、时序图、象限图、桑基图、Wardley 地图、爆炸轴测图都在列。装完第一件事建议做 onboarding一句 onboard diagram-design 加你的网址它抓你首页的底色、正文色、强调色和字体映射成语义角色写进 style-guide.md网站纸色变图纸底色按钮色变焦点强调色动手前先跑一遍 WCAG 对比度检查过不了会给出调整值并解释原因。首次在新项目画图还有道闸门风格指南仍是默认值就先暂停问你不许默认皮肤悄悄混进品牌项目。已有的 Mermaid、draw.io、Excalidraw 文件它也能重画四个旋钮调格式、尺寸、细节档和受众细节档有固定的降级梯子先砍装饰、再砍重复、再砍叶子簇、最后才是基础设施收尾给你一份清单写明合并了什么、折叠了什么、丢了什么。图 一个 12 节点的 draw.io 文件按 balanced 档重画后的效果六个粉彩色块归成一个强调色仓库官方配图为什么有意思品味被写成了硬规则SKILL.md 的哲学一节第一行是最高质量的动作通常是删除。规则细到这种程度一张图一个强调色只给一到两个焦点节点用满五个节点信号就没了1px 发丝线无阴影圆角上限 10px信息密度目标 4/10超过九个节点大概是两张图。最出名的一条是每个坐标、每个宽度、每个间隙必须能被 4 整除README 原话说这条没有商量余地正是它让图表看起来不像 AI 生成的。这些规则多数后面挂着校验脚本和对抗测试光写在提示词里不算数。AI 画的图也要过验收ADR 0005 记录了一次典型事故。九个已发布的示例横跨架构图和泳道图两类每类三档变体全部通过了当时的所有门禁箭头标签的一部分却压进了节点矩形被上层填充盖住文字看起来缺一块。查颜色的 lint-skin.py、查 DOM 结构的 self_check.py 照常放行没有一个读坐标这类缺陷只有渲染出来才看得见。修复方案是把规则写成 verify-geometry.py解析 rect 坐标按文档绘制顺序判断遮挡是否合法再配一套两个极性的对抗测试该报的必须报合法的不能误伤。校验器自己也有成长痛宽度窗口原设 120时序示例里 128 宽的等宽标牌连同 CJK 标签撑出的宽牌全部漏在窗外调到 200 才盖住高度档又不能跟着放到 18那会误伤约 80 个正常矩形。waterfall 这边更狠图表类型自带守恒校验器仓库里专门存了一张看起来完全正常的错图当回归夹具云预算图上 240 加 64 减 36 加 22 减 52 应该等于 238末端柱子却写着 236校验一跑就退非零码报错精确到第六根柱子。文档里补了一句诚实的边界校验器只保证图内数字自洽数字对不对得上真实预算仍然需要那份预算。图 守恒校验器的回归夹具这张瀑布图看起来完全正常末端数字与过程对不上仓库故意留着它分类学被刻意摁住类型数起步 13 种如今涨到 45 种但每加一种图都要过一道决策记录waterfall 有自己的 ADR 定义它是运行总量语法服务蓝图被定义为可见性线语法爆炸轴测的每个坐标来自同一个投影函数。ADR 0002 白纸黑字语义模式不得扩充类型表队列、策略轨迹、信任边界这些行为概念映射到最近的现有类型去画不为每个新概念发明第五十种图。动画同样收敛ADR 0003 只批准 reveal 一种自动播放默认 none普通输出零脚本任意内联脚本、远程资源、CSS 导入一律拒收。SKILL.md 有字节上限启动时 agent 只看得到名字和一句描述请求命中才加载正文再按需拉取对应类型的参考文件。CI 里还跑 WCAG 对比度门禁默认强调色因此从亮橘加深到 #bf4520文字对比度 4.71 比 1另有一道 lint 把每张示例图在 Chromium 里真渲染一遍。边界与局限作者自己写的对比表最诚实。输出质量取决于你用的模型同一个 prompt 跑两遍布局可能不一样产物是不可 diff 的 HTML没有文本源进 PR也没有画布可以拖。原话结论随代码每个 sprint 都变的文档图交给 Mermaid这个工具给你的是准备发布的那一张。依赖侧有坑Claude Code 对第三方 marketplace 默认关闭自动更新装完忘开就一直用旧版。开放 issue 前排是功能提案和导出毛刺SBGN 图提案 130 号RTL 阿拉伯语支持 254 号还没做SVG 导出最近连修 407、412、420 三个 bug。维护节奏是双刃剑2.6 线从 8 月 20 日算起发了七十多个 patch好处是响应快代价是 pin 版本得自己记。对谁有价值现在值得深读的是用 agent 写博客和文档的人产出要见读者风格要贴品牌onboarding 加 profile 一套正好覆盖多客户场景。做 agent 工具的人可以把它当设计参考读docs/adr 下码了十六篇决策记录品味规则怎么落地成校验器有现成答案。建议再等等的是需要图表随代码自动更新的团队活文档留在 Mermaid。收益有限的是只画自用速记图的人README 自己提醒动笔前先问一句这张图带来的收获是否多过一段好文字。我的用法很明确博客要发布的图交给它仓库里随代码更新的图留在 Mermaid。装完先跑 onboarding 读自己站点的色板别拿默认皮肤见读者。数据截至 2026-10-14来源 GitHub APIcathrynlavery/diagram-design54,422 星 3,443 fork、仓库 README、CHANGELOG、docs/adr 与 SKILL.md、作者博客 cathrynlavery.com、外部评测Hysen Labs、iqraa.tech、FlowyGitHub 仓库 https://github.com/cathrynlavery/diagram-design
阅读完成 · 觉得有帮助？
