应用介绍
让 AI 画一张架构图,回来的十有八九是那种圆角灰盒子加自动连线的 Mermaid 图:配色跟文章一点不搭,连线绕来绕去,贴进博客里格格不入。想要能看的,要么开 Figma 磨半小时,要么干脆这张图就不画了。
diagram-design 是装在 Claude Code、Codex、Factory Droid、Pi 这类 Agent 上的一个技能包。装完再让它画图,出来的是 39 种版式的编辑级图表,自包含 HTML 加内联 SVG,没有阴影,没有通用圆角灰盒子,浏览器直接打开或者截图就能用。目标信息密度 4/10,每个节点都得有存在的理由,强调色只留给读者最该先看的那一两处。
最省事的是品牌适配那一步:跟它说「onboard diagram-design to 你的站点地址」,它读一遍首页,把配色和字体抽出来映射成 paper、ink、muted、accent 几个语义角色,此后画的每张图都是你网站的颜色和字体。MIT 许可证。
39 种图表类型:架构图、流程图、时序图、状态机、ER 数据模型、时间线、泳道、四象限、雷达、飞轮、树、组织架构,2.5 之后又补进桑基图、鱼骨图、Wardley 地图、看板、用户旅程、部署图、依赖图、UML 类图、故事地图和数据库结构。每种都提供极简浅色、极简深色、完整编辑版三个静态变体。
从网站抽品牌:body 背景变成图的底色,正文色变成主墨色,CTA 色变成强调色,h1 的字体变成标题字体,代码字体变成小标签字体。写入配置前自动跑一遍 WCAG AA 对比度校验,遇到在 9 到 12px 小字下不达标的颜色,会给出调整值并说明为什么改。最后附一份取样凭证:取自哪些页面、字体从哪来、有没有回退。
重画 draw.io 和 Mermaid:指着一个 drawio 文件(含压缩负载的 .drawio.png、.drawio.svg 都认)、一个 mmd 文件,或者 Markdown 里的 mermaid 代码块,它按这套设计系统重画一遍。只解析文本,不渲染、不执行脚本、不联网、不跟随任何链接。
四个输出旋钮:格式选 HTML、SVG、PNG;尺寸从文档内嵌到 16:9 幻灯片、社交卡片、A4 横版,同时决定字号阶梯——投影用的幻灯片给 16px 节点名,而不是硬塞 12px;详细度按固定的降级顺序裁节点,先砍装饰再砍重复再砍叶子集群;受众只改措辞不改数量,同一个节点对工程师写「Auth Service / JWT · RS256」,对高管就写「登录」。
保真台账:每次导入结束会列清楚哪些节点被合并、哪个判断被折叠成了边上的标签、哪张孤立便签被丢掉、哪条主路径完整保留。源文件是你自己的,少了什么你迟早会发现,不如直接摊开说。
无障碍是默认项:每张图的内联 SVG 都带 role="img"、能解析的 aria-labelledby 以及 title 和 desc;ID 按图和变体加前缀,同一个页面内联多张导出的 SVG 也不会撞名,装饰性图标则对辅助技术隐藏。
静态优先,动效可选:默认输出纯静态、不含脚本的 HTML。只有需要按步骤讲解时才启用 reveal、step、loop 三种动效,且必须带完整静态首帧;系统开了「减少动态效果」就退回静态并隐藏播放控件。
装在哪个 Agent 都行:Claude Code 用 /plugin marketplace add 装,Codex 用 codex plugin,Factory Droid 用 droid plugin,Pi 同样支持。导出 PNG 或 SVG 也是一条斜杠命令的事,可以指定倍率给幻灯片用。
diagram-design 是装在 Claude Code、Codex、Factory Droid、Pi 这类 Agent 上的一个技能包。装完再让它画图,出来的是 39 种版式的编辑级图表,自包含 HTML 加内联 SVG,没有阴影,没有通用圆角灰盒子,浏览器直接打开或者截图就能用。目标信息密度 4/10,每个节点都得有存在的理由,强调色只留给读者最该先看的那一两处。
最省事的是品牌适配那一步:跟它说「onboard diagram-design to 你的站点地址」,它读一遍首页,把配色和字体抽出来映射成 paper、ink、muted、accent 几个语义角色,此后画的每张图都是你网站的颜色和字体。MIT 许可证。
软件功能
39 种图表类型:架构图、流程图、时序图、状态机、ER 数据模型、时间线、泳道、四象限、雷达、飞轮、树、组织架构,2.5 之后又补进桑基图、鱼骨图、Wardley 地图、看板、用户旅程、部署图、依赖图、UML 类图、故事地图和数据库结构。每种都提供极简浅色、极简深色、完整编辑版三个静态变体。
从网站抽品牌:body 背景变成图的底色,正文色变成主墨色,CTA 色变成强调色,h1 的字体变成标题字体,代码字体变成小标签字体。写入配置前自动跑一遍 WCAG AA 对比度校验,遇到在 9 到 12px 小字下不达标的颜色,会给出调整值并说明为什么改。最后附一份取样凭证:取自哪些页面、字体从哪来、有没有回退。
重画 draw.io 和 Mermaid:指着一个 drawio 文件(含压缩负载的 .drawio.png、.drawio.svg 都认)、一个 mmd 文件,或者 Markdown 里的 mermaid 代码块,它按这套设计系统重画一遍。只解析文本,不渲染、不执行脚本、不联网、不跟随任何链接。
四个输出旋钮:格式选 HTML、SVG、PNG;尺寸从文档内嵌到 16:9 幻灯片、社交卡片、A4 横版,同时决定字号阶梯——投影用的幻灯片给 16px 节点名,而不是硬塞 12px;详细度按固定的降级顺序裁节点,先砍装饰再砍重复再砍叶子集群;受众只改措辞不改数量,同一个节点对工程师写「Auth Service / JWT · RS256」,对高管就写「登录」。
保真台账:每次导入结束会列清楚哪些节点被合并、哪个判断被折叠成了边上的标签、哪张孤立便签被丢掉、哪条主路径完整保留。源文件是你自己的,少了什么你迟早会发现,不如直接摊开说。
无障碍是默认项:每张图的内联 SVG 都带 role="img"、能解析的 aria-labelledby 以及 title 和 desc;ID 按图和变体加前缀,同一个页面内联多张导出的 SVG 也不会撞名,装饰性图标则对辅助技术隐藏。
静态优先,动效可选:默认输出纯静态、不含脚本的 HTML。只有需要按步骤讲解时才启用 reveal、step、loop 三种动效,且必须带完整静态首帧;系统开了「减少动态效果」就退回静态并隐藏播放控件。
装在哪个 Agent 都行:Claude Code 用 /plugin marketplace add 装,Codex 用 codex plugin,Factory Droid 用 droid plugin,Pi 同样支持。导出 PNG 或 SVG 也是一条斜杠命令的事,可以指定倍率给幻灯片用。
