Diagram Design 快速上手指南5 分钟装好一句话出 44 种图【免费下载链接】diagram-designEditorial diagram design for Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. 44 diagram types. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design你找 AI 编码助手画图拿回来的通常是圆角框加荧光箭头能看但发不出去。Diagram Design 是装进 Claude Code、Codex 这类 AI Agent 的图表设计技能一句话描述需求它直接产出 44 种图型之一的自包含 HTMLSVG 文件双击即开不依赖任何渲染库。这篇指南覆盖四件事装好它、出第一张图、把图换成你的品牌色、重绘手头已有的旧图。装到能用大约 5 分钟。⚡ 5 分钟从 clone 到打开第一张图先选装法装法你得到什么代价插件市场Claude Code 走/pluginCodex 走codex plugin自动更新外加/export-diagram、/import-mermaid等斜杠命令你改过的style-guide.md可能被更新覆盖clone 软链接一份可自由改的本地副本样式改动不会被冲掉更新要自己手动拉只想最快体验就选插件市场打算动style-guide就选 clone。clone 装法两条命令git clone https://gitcode.com/GitHub_Trending/di/diagram-design ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design10 秒验证双击打开 skills/diagram-design/assets/index.html。预期结果浏览器弹出一个画廊44 种图型按浅色 / 深色 / 完整编辑版 3 个 tab 排列随便双击一个 example 文件离线就能开没有构建步骤。画廊翻得动就说明装好了。装到验证的完整步骤在 docs/cookbook.md。出第一张图在会话里直接说Make me an architecture diagram of my app: frontend, backend, database, Redis cache.它动笔前先报方案选了什么图型、什么尺寸、超预算的部分砍什么。你不拦它就直接出图产出就是一个.html。想换方向也简单把 architecture 换成 quadrant拿到的就是 2×2 定位图。架构图示例强调色只落在 1-2 个关键节点其余全部是墨色和 1px 细线。 出图前先过预算9 个节点、12 条箭头的硬上限它不是一问一答的画图机动笔前有一道减法闸门。复杂度预算每张图一份指标上限超了怎么办节点数9拆成总览 细节两张箭头 / 状态迁移12先删从布局就能读出来的那些强调色元素2还想加第 3 个说明你还没想好焦点旁白标注2合并成一句目标密度4/10图完成的标准是不能再删任何东西网格不是建议是硬约束。所有坐标、尺寸、间距必须是 4 的倍数字号走 8 / 12 / 16 / 20 / 24 / 28 的刻度。这条规则由 CI 的几何校验逐条检查目的只有一个不让图看起来像 AI 生成的。全部允许值见 layout-budget.md。减法哲学是写死的。每个节点必须挣得自己的位置两个总是一起出现的节点合成一个布局已经说明关系的箭头直接删掉。流程图示例分支决策逻辑连接线全部走圆角直角走线没有一条对角线。换一句话就是另一种图型预算照算Give me a sequence diagram of the OAuth handshake.时序图示例OAuth 令牌刷新过程中各角色随时间的消息传递。 60 秒把 44 种图换成你的品牌色默认皮肤白烟纸底 焦橙强调色直接截图不丢人但让它长在你的品牌上更好。把官网 URL 丢给它onboard diagram-design to https://yoursite.com它抓首页、提取主色板和字体栈、映射到 5 个语义角色然后给你看一份 diff 提案——你说 apply它才落盘。之后每张图都继承这套皮肤不用逐类型调。5 个语义角色所有图型只认角色名不认色值角色落在图上的哪里默认浅色值paper页面背景、默认节点填充#f5f5f5ink主文本、主线#2d3142muted次要文本、默认箭头#4f5d75accent焦点元素每图最多 1-2 处#bf4520linkHTTP / 外部调用箭头#2e5aa8写色值前自动过对比度。ink对paper必须 ≥ 4.5:1WCAG AA。不过关时它给出调整后的值并解释原因你确认才落盘不会硬写。字体只认两种结果精确匹配或明说 fallback。自定义托管字体会被标成 fallback保留默认字体方案绝不静默换成系统字体。完事附一份保真回执采样了哪些页面、每个色值落在哪个角色、字体是精确还是回退。不想走自动流程手动改 style-guide.md 一张表就够全部 44 种图型都从它读色。多客户并行onboard 一次存成命名 profile客户项目里放一个.diagram-design标记多个品牌互不覆盖存储与恢复契约在 profiles.md。层次结构图示例换肤后整套图型自动继承新色板节点、箭头、标注一次到位。♻️ 手头的 draw.io 和 Mermaid 图一句话重绘旧图不用推倒指给技能重画。它的做法是重绘不是转换源坐标、源配色、源字体全部丢掉保留的是组件、关系、分组和方向。一个 12 节点的 draw.io 文件可以压成 7 个节点的版本去发博客。4 个旋钮动笔前定旋钮可选值影响什么formathtml·svg·png·htmlpng交付物SVG 进 FigmaPNG 进幻灯片HTML 上网页sizedoc-inline、slide-16x9、print-a4-landscape等 10 档viewBox 和字号刻度投影图给 16px 节点名不给 12pxdetailfaithful≤24·balanced≤12·simplified≤7源文件还剩多少按固定降级阶梯砍audienceengineer·mixed·executive改措辞不改数量JWT · RS256 · :8443最后会变成Sign-in每次导入结束有一份保真台账合并了什么、压缩了什么、丢了什么逐条列出来。你本来就知道源长什么样不如直接说清楚。Mermaid 走这条命令.mmd文件和 Markdown 里的 mermaid 代码块都认规范见 import-mermaid.md/diagram-design:import-mermaid README.md --diagramall导入重绘示例源文件的多种粉彩填充被收敛成一个强调色手拖坐标落回 4px 网格。 3 种皮肤1 条命令导出 PNG每种图型都自带 3 个静态变体按投放场景挑变体模板给谁用简约浅色默认template.html截图即用暖色纸底简约深色template-dark.html深色站点、投影场景完整编辑版template-full.html长文配图、图是主角时导出就一句话Export this diagram as SVG and PNG.SVG 只保留 SVG 本体注入字体后在 Figma、Illustrator 里独立渲染-full变体的摘要卡和页头会被剥掉。PNG 默认 2×走 Playwright一次性装好即可pip install playwright playwright install chromium出图后可以自己验货。对生成文件跑python3 skills/diagram-design/scripts/self_check.py file输出OK表示可访问契约、单文件安全这些检查全过。完整导出流程见 export.md。❓ 新手最常问的 4 个问题产出的 .html 能进 Git diff 吗不能当源码用。它是成品文件不是文本格式没有可 diff 的行。文档活在 Git 里、每周都在变的场景Mermaid 更合适Diagram Design 给的是你要发出去的那张图。同一句话跑两次布局为什么略有不同这是明说的取舍布局由模型决定受 4px 网格和几何校验约束但不锁像素。要逐像素稳定导出 SVG 存版之后改图走再问一次而不是手改文件。想要手绘感或终端感呢手绘版套一个 SVG 扰动滤镜只晃线条不晃文字适合博客随笔技术文档别用规范在 primitive-sketchy.md。终端版换成 CLI 窗口外框走 primitive-terminal.md。想给图补一句旁白用斜体衬线 虚线引导线的标注气泡每图最多 2 个见 primitive-annotation.md。多个客户品牌怎么并行onboard 的结果存成命名 profile每个客户项目放一个.diagram-design标记指向各自的 slug并行工作区各读各的品牌不覆盖共享的style-guide.md。图库就放在 assets/index.html44 种图型、每种 3 个皮肤。别再对着三页文字解释你的系统了——挑一个最接近本周要画的图型用一句话让它画出来。【免费下载链接】diagram-designEditorial diagram design for Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. 44 diagram types. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Diagram Design 快速上手指南：5 分钟装好，一句话出 44 种图
Diagram Design 快速上手指南5 分钟装好一句话出 44 种图【免费下载链接】diagram-designEditorial diagram design for Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. 44 diagram types. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design你找 AI 编码助手画图拿回来的通常是圆角框加荧光箭头能看但发不出去。Diagram Design 是装进 Claude Code、Codex 这类 AI Agent 的图表设计技能一句话描述需求它直接产出 44 种图型之一的自包含 HTMLSVG 文件双击即开不依赖任何渲染库。这篇指南覆盖四件事装好它、出第一张图、把图换成你的品牌色、重绘手头已有的旧图。装到能用大约 5 分钟。⚡ 5 分钟从 clone 到打开第一张图先选装法装法你得到什么代价插件市场Claude Code 走/pluginCodex 走codex plugin自动更新外加/export-diagram、/import-mermaid等斜杠命令你改过的style-guide.md可能被更新覆盖clone 软链接一份可自由改的本地副本样式改动不会被冲掉更新要自己手动拉只想最快体验就选插件市场打算动style-guide就选 clone。clone 装法两条命令git clone https://gitcode.com/GitHub_Trending/di/diagram-design ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design10 秒验证双击打开 skills/diagram-design/assets/index.html。预期结果浏览器弹出一个画廊44 种图型按浅色 / 深色 / 完整编辑版 3 个 tab 排列随便双击一个 example 文件离线就能开没有构建步骤。画廊翻得动就说明装好了。装到验证的完整步骤在 docs/cookbook.md。出第一张图在会话里直接说Make me an architecture diagram of my app: frontend, backend, database, Redis cache.它动笔前先报方案选了什么图型、什么尺寸、超预算的部分砍什么。你不拦它就直接出图产出就是一个.html。想换方向也简单把 architecture 换成 quadrant拿到的就是 2×2 定位图。架构图示例强调色只落在 1-2 个关键节点其余全部是墨色和 1px 细线。 出图前先过预算9 个节点、12 条箭头的硬上限它不是一问一答的画图机动笔前有一道减法闸门。复杂度预算每张图一份指标上限超了怎么办节点数9拆成总览 细节两张箭头 / 状态迁移12先删从布局就能读出来的那些强调色元素2还想加第 3 个说明你还没想好焦点旁白标注2合并成一句目标密度4/10图完成的标准是不能再删任何东西网格不是建议是硬约束。所有坐标、尺寸、间距必须是 4 的倍数字号走 8 / 12 / 16 / 20 / 24 / 28 的刻度。这条规则由 CI 的几何校验逐条检查目的只有一个不让图看起来像 AI 生成的。全部允许值见 layout-budget.md。减法哲学是写死的。每个节点必须挣得自己的位置两个总是一起出现的节点合成一个布局已经说明关系的箭头直接删掉。流程图示例分支决策逻辑连接线全部走圆角直角走线没有一条对角线。换一句话就是另一种图型预算照算Give me a sequence diagram of the OAuth handshake.时序图示例OAuth 令牌刷新过程中各角色随时间的消息传递。 60 秒把 44 种图换成你的品牌色默认皮肤白烟纸底 焦橙强调色直接截图不丢人但让它长在你的品牌上更好。把官网 URL 丢给它onboard diagram-design to https://yoursite.com它抓首页、提取主色板和字体栈、映射到 5 个语义角色然后给你看一份 diff 提案——你说 apply它才落盘。之后每张图都继承这套皮肤不用逐类型调。5 个语义角色所有图型只认角色名不认色值角色落在图上的哪里默认浅色值paper页面背景、默认节点填充#f5f5f5ink主文本、主线#2d3142muted次要文本、默认箭头#4f5d75accent焦点元素每图最多 1-2 处#bf4520linkHTTP / 外部调用箭头#2e5aa8写色值前自动过对比度。ink对paper必须 ≥ 4.5:1WCAG AA。不过关时它给出调整后的值并解释原因你确认才落盘不会硬写。字体只认两种结果精确匹配或明说 fallback。自定义托管字体会被标成 fallback保留默认字体方案绝不静默换成系统字体。完事附一份保真回执采样了哪些页面、每个色值落在哪个角色、字体是精确还是回退。不想走自动流程手动改 style-guide.md 一张表就够全部 44 种图型都从它读色。多客户并行onboard 一次存成命名 profile客户项目里放一个.diagram-design标记多个品牌互不覆盖存储与恢复契约在 profiles.md。层次结构图示例换肤后整套图型自动继承新色板节点、箭头、标注一次到位。♻️ 手头的 draw.io 和 Mermaid 图一句话重绘旧图不用推倒指给技能重画。它的做法是重绘不是转换源坐标、源配色、源字体全部丢掉保留的是组件、关系、分组和方向。一个 12 节点的 draw.io 文件可以压成 7 个节点的版本去发博客。4 个旋钮动笔前定旋钮可选值影响什么formathtml·svg·png·htmlpng交付物SVG 进 FigmaPNG 进幻灯片HTML 上网页sizedoc-inline、slide-16x9、print-a4-landscape等 10 档viewBox 和字号刻度投影图给 16px 节点名不给 12pxdetailfaithful≤24·balanced≤12·simplified≤7源文件还剩多少按固定降级阶梯砍audienceengineer·mixed·executive改措辞不改数量JWT · RS256 · :8443最后会变成Sign-in每次导入结束有一份保真台账合并了什么、压缩了什么、丢了什么逐条列出来。你本来就知道源长什么样不如直接说清楚。Mermaid 走这条命令.mmd文件和 Markdown 里的 mermaid 代码块都认规范见 import-mermaid.md/diagram-design:import-mermaid README.md --diagramall导入重绘示例源文件的多种粉彩填充被收敛成一个强调色手拖坐标落回 4px 网格。 3 种皮肤1 条命令导出 PNG每种图型都自带 3 个静态变体按投放场景挑变体模板给谁用简约浅色默认template.html截图即用暖色纸底简约深色template-dark.html深色站点、投影场景完整编辑版template-full.html长文配图、图是主角时导出就一句话Export this diagram as SVG and PNG.SVG 只保留 SVG 本体注入字体后在 Figma、Illustrator 里独立渲染-full变体的摘要卡和页头会被剥掉。PNG 默认 2×走 Playwright一次性装好即可pip install playwright playwright install chromium出图后可以自己验货。对生成文件跑python3 skills/diagram-design/scripts/self_check.py file输出OK表示可访问契约、单文件安全这些检查全过。完整导出流程见 export.md。❓ 新手最常问的 4 个问题产出的 .html 能进 Git diff 吗不能当源码用。它是成品文件不是文本格式没有可 diff 的行。文档活在 Git 里、每周都在变的场景Mermaid 更合适Diagram Design 给的是你要发出去的那张图。同一句话跑两次布局为什么略有不同这是明说的取舍布局由模型决定受 4px 网格和几何校验约束但不锁像素。要逐像素稳定导出 SVG 存版之后改图走再问一次而不是手改文件。想要手绘感或终端感呢手绘版套一个 SVG 扰动滤镜只晃线条不晃文字适合博客随笔技术文档别用规范在 primitive-sketchy.md。终端版换成 CLI 窗口外框走 primitive-terminal.md。想给图补一句旁白用斜体衬线 虚线引导线的标注气泡每图最多 2 个见 primitive-annotation.md。多个客户品牌怎么并行onboard 的结果存成命名 profile每个客户项目放一个.diagram-design标记指向各自的 slug并行工作区各读各的品牌不覆盖共享的style-guide.md。图库就放在 assets/index.html44 种图型、每种 3 个皮肤。别再对着三页文字解释你的系统了——挑一个最接近本周要画的图型用一句话让它画出来。【免费下载链接】diagram-designEditorial diagram design for Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. 44 diagram types. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考