5分钟搞定专业级技术图表Diagram Design 完整安装教程与新手配置指南【免费下载链接】diagram-design27 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design画图半小时、改图一下午这个 AI 图表技能帮你彻底告别如果你写过技术博客、做过项目汇报一定经历过这种崩溃想要一张能放进文档的架构图先用文本工具画了半小时布局又花一下午调颜色对齐最后出来的成品还是一眼 AI 生成的圆角方块堆。别急这个问题有解了——Diagram Design就是为 Claude Code 打造的开源图表设计技能内置 27 种编辑级图表类型输出自包含的 HTMLSVG 文件不需要任何渲染库让 AI 直接产出设计师看了也不皱眉的成品图。它不是又一个画图软件而是一套喂给 AI 的审美规则书。接下来我会用七步带你从认识它、装好它到画出一张能直接放进博客的品牌级架构图。它能帮你做什么你可以把 Diagram Design 理解成一位懂排版的绘图助理。你只需要用一句话描述需求它会自动做四件事选对图表类型架构图、流程图、时序图、状态机、泳道图、ER 模型、雷达图、四象限矩阵……共 27 种覆盖文档和汇报的绝大多数场景遵守专业排版规范4px 网格、统一字重、1-2 个强调色、禁止投影和花哨圆角成品自带编辑杂志感匹配你的品牌风格60 秒抓取你的网站把主色、字体自动套用到每一张图上输出即用文件一个 HTML 文件双击就能打开无构建步骤、无 JavaScript 依赖、可离线展示它能帮你……把前端 后端 数据库 Redis 缓存这类口头描述变成一张正式的系统架构图把散落在 Markdown 里的 Mermaid 流程图重绘成风格统一的正式插图把一份 12 个节点的 draw.io 旧图一键重排成 4px 网格的清晰版本按doc-inline、slide-16x9、social-og等预设尺寸输出直接适配博客、投屏和社交卡片适合谁写技术文档的工程师、做产品汇报的 PM、经营技术博客的作者——凡是需要插图但不想被画图本身折磨的人。这是用 Diagram Design 生成的架构图示例注意右侧的图例和蓝色/橙色箭头分层细节经得起放大查看三条上手路径你属于哪一种装工具不该只有一条路。我按最快、最省心、最完整给你三种选择对号入座就行。最快直接克隆仓库符号链接启用技能如果你赶时间想立刻体验全部能力这是最快的路径。先克隆项目到本地git clone https://gitcode.com/GitHub_Trending/di/diagram-design ~/code/diagram-design然后把技能目录软链接到 Claude Code 的技能目录ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design重启 Claude Code 后技能会自动注册为diagram-design。优点是全部源码在本地、可随时改样式取舍是更新需要手动git pull。最省心插件市场一键安装如果你只是想在现有项目里快速试用走插件市场最省心。在 Claude Code 里执行/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-design安装后建议顺手开启自动更新/plugin→ Marketplaces → 选中 diagram-design → Enable auto-update之后版本更新会在后台自动完成。注意一个取舍插件模式下你对references/style-guide.md的修改可能被版本更新覆盖所以重度自定义样式的需求请走第一种路径。使用 Codex 的用户可以用codex plugin marketplace add cathrynlavery/diagram-design加装Pi 用户则用pi install后执行/reload加载。最完整可编辑安装样式自定义不被覆盖打算长期用、并且要深度定制样式的建议用可编辑安装。克隆仓库后# Claude Code 方式软链接技能目录 ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design # Pi 方式注册为本地包 pi install ~/code/diagram-design这样你对skills/diagram-design/references/style-guide.md的改动保存在自己的 checkout 里更新包不会悄悄覆盖。同时你还能用.diagram-design标记文件把不同项目绑定到不同品牌配置后面会讲到。三条路径怎么选想马上看到效果选插件、想长期深度定制选克隆安装、只想写两篇文章选符号链接。别纠结随时可以从一种迁移到另一种。首次使用前60 秒搞定品牌风格定制安装完成后的第一件事不是画图而是先让工具认识你的品牌。这一步决定了你后面每一张图的质感。自动抓取网站风格在 Claude Code 里直接说一句onboard diagram-design to https://你的网站域名.com它会自动完成五步抓取网站首页 → 提取主色调与字体栈 → 把检测值映射到语义角色背景、文字、强调色等→ 生成样式修改提案 → 等你确认后写入references/style-guide.md。这里的核心概念是语义角色。样式指南不直接存 hex 色值而是定义了几个带名字的角色角色作用类比paper页面背景画纸的底色ink主要文字与线条墨水的颜色muted次要文字、默认箭头淡化过的注释accent强调色每张图最多 1-2 处文中的高亮笔link链接与外部箭头超链接的蓝色把样式指南想成图表的着装规范它规定衬衫用什么颜色、领带强调色用哪个色而不是规定某一件衣服。这样换皮肤时27 种图表全部自动跟随。手动配置与第一次使用的关卡不想抓网站直接编辑skills/diagram-design/references/style-guide.md改色值表格即可所有图表自动继承。还有一点要注意工具在每个新项目的第一次生成前会检查样式指南是否还是默认值。如果仍是默认它会停下来问你这是本项目的第一张图样式指南还是默认值。要运行 onboarding、手动粘贴 tokens还是先用默认继续——选 proceed with default 就能跳过后面随时可以补做。首个实战三分钟给项目画一张架构图装好了、风格也配好了现在我们真正动手。假设你手上有个内容站点想画一张生产环境架构图目标是放进下一篇博客里。第一步一句话描述让 AI 干活在 Claude Code 里输入Make me an architecture diagram of my app: frontend, backend, database, Redis cache.注意观察工具的行为它会先声明选型用 Architecture 类型、默认doc-inline尺寸、计划保留哪些节点然后才动手。这是它的好习惯——先让你有机会在画图前纠正方向。第二步理解它背后的删减哲学生成前它内部其实跑了一遍删除测试每个节点是否都有存在的意义可合并的节点是不是该合并连接线是否只在关系不明显时才画强调色是否只用于 1-2 个焦点元素目标密度是 4/10——够专业但不拥挤。这解释了为什么它的成品不AI 味。参考文件skills/diagram-design/SKILL.md里写着整套设计系统与检查清单值得通读一遍。第三步打开成品确认细节生成的 HTML 文件双击即可在浏览器打开。检查三处图例是否覆盖了所有形状类型、箭头是否正交直角不允许斜线乱飞、文字标签是否与连线保持 6-10px 的可见间隙。没问题这张图就可以用了。流程图同样遵循删减哲学每个判断框都有明确去路橙色标注最终结论节点第四步不满意直接改模板文件如果你想完全掌控项目提供了可直接编辑的模板# 简约浅色版默认 cp skills/diagram-design/assets/template.html my-diagram.html # 完整编辑模式带摘要卡片 cp skills/diagram-design/assets/template-full.html my-diagram.html # 深色版本适合暗色网站与投屏 cp skills/diagram-design/assets/template-dark.html my-diagram.html进阶玩法让你的图再上一个台阶基础画图已经跑通接下来这几个能力会让你的作品明显拉开档次。如果你有旧图draw.io / Mermaid——就能一键重绘这是很实用的能力已有图不用重画直接让工具按新设计系统重绘。它读取的是内容不是布局——源坐标、配色、字体全部丢弃只保留组件、关系、分组和方向。/diagram-design:import-drawio platform.drawio --sizeslide-16x9 --detailsimplified --audienceexecutive /diagram-design:import-mermaid README.md --diagramall重绘时四个旋钮决定输出形态格式html/svg/png、尺寸doc-inline到print-a4-landscape共 9 档、细节faithful/balanced/simplified对应节点数上限 24/12/7、受众engineer/mixed/executive只改措辞不改数量。比如给投屏用的图slide-16x9会把节点字号从 12px 提到 16px——光缩放画布不缩放字号正是投屏看不清的通病。每次重绘结束它还会交一份保真度清单告诉你合并了什么、精简了什么、删掉了什么Detail: balanced · 12 source nodes → 8 drawn Collapsed: Token valid? decision → edge label on Gateway → Auth Dropped: 1 sticky note (legacy path, to be retired) — unconnected in source这是一份 12 节点 draw.io 源文件重绘后的效果六个马卡龙色填充被收敛为一个强调色手工拖拽的坐标被重排进 4px 网格如果你要交付 PNG/SVG——就能用导出命令图表本身是 HTML但要放进 Figma、PPT 或社交卡片需要矢量或位图格式/diagram-design:export-diagram path/to/diagram.html --svg-only /diagram-design:export-diagram path/to/diagram.html --png-only --scale3SVG 会保留无障碍名称与描述可直接进 FigmaPNG 默认 2 倍清晰度投屏/打印用 3 倍背景透明方便叠在任何文档上。首次导出 PNG 需要一次性准备pip install playwright playwright install chromium。如果你想突出特殊风格——就有三种输出变体每种图表类型都附带简约浅色、简约深色、完整编辑模式三个变体文件对应template.html、template-dark.html、template-full.html。另外还有两个可选皮肤手绘风primitive-sketchy.md适合随笔和文章插图和终端风primitive-terminal.md碳黑命令行窗口等宽字体适合开发者工具类内容。如果你同时服务多个客户项目——就有配置文件机制把品牌存成命名 profile 放在~/.diagram-design/profiles/然后在项目根目录放一个.diagram-design标记文件内容为profile: 你的slug该项目的所有图就直接读取对应配置互不覆盖。Claude Code、Codex、Pi 三个终端共享这套配置库。避坑指南新手最容易踩的五个坑为什么导出 PNG 报错Playwright isnt installed这是最常见的拦路虎。别慌一次性解决pip install playwright然后playwright install chromium再让工具重新导出即可。工具坚持不自动安装是怕在你机器上悄悄改动系统。为什么我改的颜色没生效确认你改的是skills/diagram-design/references/style-guide.md——这是唯一的事实来源其他类型参考文件里都只说语义角色accent而不写具体色值。改错文件等于白改。为什么插件更新后我的自定义样式消失了这正是文档强调的取舍插件托管模式下对style-guide.md的修改可能被包更新覆盖。解法有两个改走可编辑安装或者把品牌存成命名 profile 放进~/.diagram-design/profiles/profile 文件在插件更新后依然存活。为什么工具一直提示样式指南还是默认值这是首次使用关卡在起作用——它宁可多问一句也不愿往你的品牌项目里悄悄塞一套默认皮肤的图。按提示运行 onboarding 或选择 proceed with default 即可不是报错。为什么导入的图节点数超限每类图表都有复杂度预算如最大 9 节点、最多 12 条连线。超了怎么办拆分一张总览 一张细节图而不是硬塞。这符合它的核心哲学——能删除的才是好图。下一步去哪深入探索到这里你已经能画出第一张专业级图表了。想再深入项目里这几个位置值得收藏示例图库打开skills/diagram-design/assets/index.html可切换浅色/深色/完整模式浏览全部 27 种图表类型的成品类型参考skills/diagram-design/references/目录下type-*.md按图表类型拆分画哪种读哪种信息量刚好设计系统总纲skills/diagram-design/SKILL.md记录了全部排版规则、连接线约束与输出前检查清单导入与导出规范references/import-drawio.md、references/import-mermaid.md、references/export.md覆盖重绘与导出的完整流程画图的最高境界是看起来像人设计的。Diagram Design 已经替你守住了排版的底线你要做的只是把脑子里那张图用一句话讲给 AI 听。现在就去克隆项目画出你的第一张品牌级架构图吧【免费下载链接】diagram-design27 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考