Diagram Design 图表工具实测：5分钟从安装到出图，文档告别“丑图“

Diagram Design 图表工具实测5分钟从安装到出图文档告别丑图【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design写文档最怕的不是没内容而是配图拿不出手。Diagram Design 是一款面向 Claude Code、Codex 与 Pi 的开源图表工具用自包含的 HTML SVG 生成干净利落的编辑级图表覆盖 14 种高频图表类型。本文陪你从零装好工具5 分钟画出第一张能放进正式文档的图。先想清楚图为什么会丑团队图翻车的常见原因不是信息错而是视觉乱。阴影到处飘、配色随缘、节点堆成墙。Diagram Design 的设计观恰好相反每个节点都要有存在理由能合并就合并连接线只在关系不明显时才出现强调色最多留给 1-2 个焦点目标信息密度控制在 4/10留白也是设计一句大白话少画一点图就好看一点。两条命令把工具请进门克隆仓库再建一条符号链接技能就注册好了git clone https://gitcode.com/GitHub_Trending/di/diagram-design ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design重启 Claude Codediagram-design 就位。想先尝鲜也可以走插件市场安装代价是自定义样式可能无法持久保存。第一张图从一句大白话开始打开 Claude Code直接说需求Make me an architecture diagram of my app: frontend, backend, database, Redis cache.几十秒后一张结构清楚的架构图就躺在了你的目录里。不急着打字就复制模板cp skills/diagram-design/assets/template.html my-diagram.html想预览 14 种类型长什么样用浏览器打开 assets 下的 index.html一页逛完。品牌风格让图表自动抄作业每换一个项目就重配配色太麻烦。执行一次onboard diagram-design to your-website.com工具会抓取站点首页提取主色与字体栈把检测值映射到语义角色上paper 是页面背景ink 是主文本与线条muted 是次要文本accent 是强调色一张图限 1-2 处link 是链接与外部箭头。生成提案后写进 references/style-guide.md不满意就手改。字体也有保底方案标题用 Instrument Serif节点名用 Geist技术标签用 Geist Mono。专业感藏在三个硬指标里设计师看图第一眼看的是节奏不是内容。4px 网格系统字号走 8/12/16/20/24节点尺寸 80/96/112/128间距取 20/24/32/40内边距 8/12/16处处严丝合缝复杂度上限单图最多 9 个节点、12 条连线、2 处强调色、4 层深度超了就该拆图对比度自动校验文本与背景需满足 WCAG AA≥4.5:1不达标会收到修改建议还附带原因解释三种输出总有一款适合你的场合template.html简约浅色默认首选template-dark.html简约深色配暗色主题文档template-full.html完整编辑模式样样可调想让图更有味道还有两个小开关用 primitive-annotation.md 给关键节点加编辑注释用 primitive-sketchy.md 一键开手绘风放进文章里亲和力拉满。别光看去画你的第一张图首次出图时如果样式指南还是默认值工具会主动提醒你先跑一遍 onboarding。跑与不跑都行但跑完图会更长在你的项目上。工具再好也不如自己动手画一张。现在打开 Claude Code用一句话描述你最想表达的那个系统5 分钟后一张真正能放进正式文档的图就交出来了。从这张开始把你文档里的截图一张张换成 Diagram Design 出品。✍️【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考