Diagram Design 快速上手一句话生成专业图表单图不超过 9 个节点【免费下载链接】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 打造。你用一句自然语言描述需求它回你一个自包含的 HTML SVG 文件。浏览器双击就打开不用装渲染库。它解决什么问题先说定位它是一个装进 Claude Code 的图表设计技能。你说人话它按编辑规范出图。日常写作里三类场景用得最多系统文档里要一张架构图前端、后端、数据库、缓存连在一起博客里配一张流程图分支和决策一眼看清汇报前出一张四象限图项目按影响和投入分类输出的都是单文件 HTML内嵌 SVG。发给同事双击就能看不依赖运行环境。工具内置 13 种图表类型。示例库收了 14 个完整样例架构、流程、时序、四象限、层次都在里面。最快安装方式 最短路径是两条命令。第一条克隆仓库git clone https://gitcode.com/GitHub_Trending/di/diagram-design.git ~/code/diagram-design代码落在 ~/code/diagram-design 目录。第二条建一个符号链接注册到技能目录ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design重启 Claude Code技能 diagram-design 就注册好了。之后你在对话里说需求它直接接管画图。不想动本地文件可以走插件市场/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-design装完立刻能画。但插件模式下样式自定义可能保存不下来。要长期沉淀品牌色还是用符号链接。Codex 用户有独立入口。用 npx skills add 加仓库地址安装。技能名同样是 diagram-design。画出第一张图一句话画图在 Claude Code 里直接描述就行。比如来一句「帮我画一张架构图前端、后端、数据库再加一个 Redis 缓存。」它会回你一个单文件 HTML。浏览器打开就是成图。换一种图也一样。再来一句「给我一张 OAuth 握手的时序图」时序图跟着出来。抄模板改想手动改可以直接复制模板。浅色版用 template.html。深色版用 template-dark.html。完整编辑模式用 template-full.html。三种输出样式对应不同的发布场景。把模板复制一份改掉节点和连线就是你的图。先翻示例库打开示例图库14 个样例都能翻。挑一张顺眼的照着结构套自己的内容比从零画快。产出为什么显专业图看着舒服靠的是几道硬约束。先说品牌色。onboard 一条命令搞定它会抓你网站首页提取主色调和字体栈onboard diagram-design to https://你的网站域名.com跑完值被映射到语义角色写进样式文件。也可以跳过抓取直接手动编辑这个文件。样式配置参考文件样式系统一共 5 个语义角色。paper 管页面背景。ink 管主文本和线条。muted 管次要文本也管默认箭头。accent 管强调每图限 1-2 处。link 管链接和外部箭头。换主题只改这 5 个值整套图自动跟着走。再说克制。所有尺寸压在 4px 网格上。字号、节点宽高、间距都是 4 的倍数。复杂度有天花板。单图不超过 9 个节点。连接线不超过 12 条。强调元素不超过 2 个。层级不超过 4 层。这些数字是硬限制。它宁可少画也不糊成一团。要加批注用注释原语。想要手绘感看sketchy 风格。一个管标注一个管质感。这几个坑先知道对比度不达标会被拦下。工具自动做 WCAG AA 检查文本对比度要 ≥4.5:1。不达标会告诉你调哪个色值原因也讲清楚。网站用自定义字体提取不到就回退默认方案。标题用 Instrument Serif。节点名用 Geist 无衬线。技术标签用 Geist 等宽。第一次在项目里用它会多问一句。样式还是默认值时它给三个选项跑 onboarding、手动贴 token、直接用默认。选一个往下走。从一句自然语言到一张能发出去的 HTML全程不用碰渲染配置。现在就把仓库克隆下来画你的第一张架构图。【免费下载链接】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），仅供参考