AI 画的图，为什么总是一股"AI 味"？
AI 画一张系统架构图，十次里有九次拿到的是同一个配方：三个一模一样的灰色圆角盒子，一条带渐变和投影的蓝色连线，再点缀几个 emoji 图标。配色谈不上丑，但就是"千图一面"，放哪都像贴了个"AI 生成"的标签。作者 Cathryn Lavery 也烦透了这件事------她是效率工具 BestSelf 的创始人，常要配图。她发现与其每次跟 Figma 较劲半小时，不如干脆写一份"编辑部审美守则"，让 AI 照着执行。于是就有了这个项目。
Github:
它不是画图工具，是一份"给 AI 看的审美宪章"
diagram-design 本质是一个技能包（skill），可以装进 Claude Code、Codex 等编程助手。装上之后，你说"给我画张架构图"，它交回来的不再是乱来的圆角盒子，而是 27 种图表类型里最合适的那一种，配上统一的排版和配色。关键是，产出的 HTML 文件是自包含的------SVG 内联、样式内嵌、零 JavaScript，双击就能在浏览器里打开，也方便直接截图发出去。
27 种类型基本覆盖了日常需求：架构图、流程图、时序图、状态机、ER 模型、泳道图、象限图、雷达图、甘特图，甚至还有"循环飞轮"这类编辑最爱用的样式。每种类型都配了三种皮肤：极简亮色、极简暗色、完整编辑版，挑一个直接开工。
设计师的规矩，被翻译成了 AI 能执行的硬约束
这套审美守则最值得琢磨的地方，是把"感觉"翻译成了"规则"。
第一层是语义化配色。整个系统不用具体色值沟通，而是用角色：纸张（paper）、墨水（ink）、强调色（accent）。强调色全图只允许出现在 1 到 2 个节点上------"如果你想把 4 个东西都涂成强调色，说明你还没想清楚到底什么是重点"。这就像写文章只允许用两次感叹号，逼你学会克制。
第二层是4px 网格。所有坐标、尺寸、字号、间距都必须能被 4 整除。规则写得毫不留情：如果坐标末尾是 1、2、3、5、6、7、9，就改掉。乍看偏执，但正是这种机械化的统一，让 AI 产出的图摆脱了"手抖"的随机感。
第三层是复杂度预算 。一张图最多 9 个节点、12 条连线、2 个强调色节点。超了怎么办？拆成"总览图 + 细节图"两张。这背后是作者反复强调的一句话："最高质量的操作通常是删除。" 如果一个节点删掉读者照样看得懂，就删。
第四层是连接器五条铁律。连线必须用直角圆角拐弯，禁止斜线；箭头标签和线之间必须留出 6 到 10 像素的间隙；两条线不许重叠；一个盒子边缘同时进出多条线时，接点要错开至少 12 像素；线不许从无关盒子后面穿过去。每一条都有明确可检查的数值，AI 不用猜"怎样才算好看"，照着量就行。
连视力障碍用户都考虑到了
这个项目对无障碍（a11y）的较真程度，在同类项目里很少见。每个 SVG 图表默认带 role="img" 和可解析的无障碍名称；标题必须是 <svg> 的第一个子元素；ID 必须带图表名称前缀，防止多张图同页内联时 ID 撞车。甚至专门写了个 Python 检查器（lint-skin.py），在 CI 里自动扫描，凡是缺无障碍名称、标题位置不对、用了裸 id="title" 的图，直接打回。
60 秒认领品牌：让 AI 画出"自己人"
这个项目最讨喜的功能是品牌适配。你只要说一句"用我官网的风格来"，它就抓取你的网站，从 CSS 里提取主色和字体，然后按名字启发式映射成语义角色：页面背景变纸张色、CTA 按钮色变强调色、正文变墨水色。映射完还会自动跑一遍 WCAG AA 对比度检查------如果你的品牌色在 9 到 12 像素的小字上对比度不达标，它会主动提出一个修正值并解释原因。
首次使用时还有个"闸门"：如果检测到风格指南还是默认值，它会先停下来问你------要适配品牌，还是手动贴 token，还是先用默认皮肤凑合？绝不悄悄把"默认皮肤"的图混进一个已经定制过品牌的项目里。
导入 draw.io 和 Mermaid：只翻译内容，不搬运审美
如果你手里已经有 draw.io 或 Mermaid 画的老图，可以让它"重画"而不是"转换"。它只解析文本内容------节点、连线、分组、方向------然后完全丢弃源文件的坐标、配色和字体，用这套设计系统从零画。四个旋钮决定输出：格式（HTML/SVG/PNG）、尺寸（幻灯片、社交卡片、文档）、细节度（忠实/均衡/精简）、受众（工程师/混合/高管）。最贴心的是每次导入结束都会给一份忠实度账本，如实交代"合并了哪个节点、折叠了哪条线、丢弃了什么"，让你清楚知道哪些信息在路上被精简掉了。
藏在身后的硬核：这些 Python 代码才是真功夫
skill 的规则文档是灵魂，但真正防翻车的，是几个 Python 脚本：
- drawio_extract.py 要解析四种不同的 draw.io 文件容器，包括被压缩成 base64 的 XML，甚至要从 PNG 图片的元数据块里手工抠出内嵌的 XML。为了防止"压缩炸弹"，解压输出超过 64MB 直接拒绝；解析前还会扫描
<!DOCTYPE>、<!ENTITY>，防御 XXE 注入攻击。 - mermaid_extract.py 更妙，用一套"字符级屏蔽"技巧：先把括号和引号里的内容替换成空格，让正则只在"顶层"匹配，从而精准解析流程图、时序图、状态图、ER 图四种语法。它还守一条信任边界：Mermaid 里的 style、点击链接、图片 URL 这些带执行意味的内容，统统丢弃，只保留语义。
- verify-*.py 测试脚本不搞 mock，直接 subprocess 跑真实解析器，拿对抗性样例（比如故意注入指令的标签）验证不会越界。
这套"把用户输入当敌人"的防御姿态，加上 CI 里自动跑的 lint，说明它不仅是规则写得好，工程上也确实下了功夫。
另一个流派：archify------它要的不是好看，是"说得清"
如果说 diagram-design 是给 AI 请了一位设计总监，那 archify 就是给 AI 装了一条工程质检流水线。它同样是个技能包，Claude Code、Cursor、Codex 甚至 opencode 都能塞进去，但思路整个反着来：只画架构、工作流、时序、数据流、生命周期这五种图，而且不直接出图，先让 AI 写一份有格式的 JSON 草稿，校验通过了才渲染成 HTML。这一"绕弯"看着多余，换来的硬核能力可不少：
- 校验细到了原子级。渲染前先跑 9 项自动检查：图里只能有一个 SVG、连线必须正交、标签不能压住其他线......其中 4 项一票否决，剩下 5 项在"标准档"只算警告，切到"精品档"就直接按错误处理。检查挂了，AI 收到的不是一大堆堆栈报错，而是一张修复收据，精确告诉你错在哪一处、该往哪儿修、证据是什么。而且只给两轮修复机会，两轮修不动就照实说，绝不硬编。
- 交付讲究"要么全好，要么不动"。最终文件先渲染进临时目录，全部检查过了才用一次原子替换落盘；失败的话，上一张好图原样留着。桌面预览模式也守这条规矩，你改 JSON，只有改对了才会刷新，改坏了画面就停在上一版。
- 代码证据经得起查。架构图要是从真实代码库来的，可以让节点挂上"SRC n"这种小徽章。archify 会用 git 去验证：这个文件在指定的 commit 里真的存在吗？引用的行号越界了没？全通过后，你点一下就能跳到 GitHub 上对应的那行代码。
- 顺带还能做改前改后对比。合并代码前，把两个版本的架构 JSON 丢进去，它给你输出改前、增量、改后三张视图，哪些节点新增、哪些删除、哪些只是挪了位置，列得明明白白。但它守口如瓶：只告诉你"结构变没变"，绝不说"这个改动风险高"或者"可以安全合并"------那不是它该说的话。
同场竞技：两套哲学的三个分岔口
两个项目往一张表里一搁，差别立马就浮出来了：
| 维度 | diagram-design | archify |
|---|---|---|
| 定位 | 给 AI 的编辑部审美守则 | 给 AI 的工程仪表盘 |
| 图表类型 | 27 种 | 5 种 |
| 产物形态 | 静态 HTML+SVG（零 JS） | 交互式 HTML，可搜索/追踪/导出 |
| 生成路径 | 一句话直接出图 | 一句话写 JSON，校验后渲染 |
| 核心校验 | 样式合规（配色/网格/a11y） | 结构正确（schema/几何/证据） |
| 真实性 | 纯创作，不保证与代码一致 | 可挂 SRC 代码证据、可做前后对比 |
| 最强卖点 | 60 秒品牌适配、忠实度账本 | 修复收据、原子交付、Delta 对比 |
| 主要用户 | 内容创作者、公众号作者 | 工程师、架构评审、生产部署 |
有三个分岔口，最值得琢磨：
先说审美：要"静态"还是要"活"。 diagram-design 盯着一张图反复打磨，配色、间距、留白，一眼看完就懂，适合塞进文章或幻灯片。archify 想要的是一张"能探索"的地图，按 / 搜节点、按 R 追一条调用链、按 L 对比两个角色、按 P 播放引导故事，静态图在它这儿只是导出项之一。一句话：一个做海报，一个做仪表盘。
再看校验：管"合规"还是管"真相"。 diagram-design 的 Python 检查器操心的是"画得规不规矩"，颜色在不在色板里、无障碍名称缺没缺。archify 的校验操心的是"结构说得对不对"，JSON 合不合 schema、标签有没有压线、代码证据扛不扛得住 git 验证。一个兜审美下限，一个兜事实下限。
最后说信任：靠"品味"还是靠"证据"。 这两家难得有共识：都宣称"不是 Mermaid 主题美化器"，都认为光换配色、不优化信息结构就是耍流氓。但信任的来源不一样------diagram-design 让你信它画得好看，靠的是审美宪章和复杂度预算；archify 让你信它画得是真的，靠的是原子校验、代码证据和前后对比。
那怎么选？ 给文章配图、运营博客、做社媒卡片，选 diagram-design，它教你克制；评审架构、汇报生产部署、想把一个真实代码库讲清楚，选 archify，它替你把关。两套都装也不冲突，毕竟一个管"美"，一个管"真"。
Github:
适合谁？
公众号作者、个人站长这类"文章总要配图"的人，diagram-design 能让 AI 出的图跟你网站风格统一，拿得出手，代价是得先接受"极简克制"那套审美。工程师、架构师这类"要把系统讲给同事听"的人，archify 的交互地图加上代码证据，直接当评审材料用都行，代价是要适应"先写 JSON 草稿、再按修复收据改"的流程------不过对开发者来说，这流程反而挺自然。
最后用一句话收尾：diagram-design 教 AI 画得少、画得准；archify 教 AI 画得真、画得清。 等 AI 既学会了删、又学会了证明，它画出来的东西自然又好看又可信。
关注
如果你觉得这类"AI 技术拆解"对你有用，欢迎关注本公众号。我会持续用大白话拆解那些藏在热门开源项目背后的巧妙设计，不堆术语，只讲人话。也欢迎留言告诉我你感兴趣的项目，说不定下一篇就是它。