Diagram Design 2.0 版本来袭：27 种图表类型，60 秒匹配品牌风格！

突发Diagram Design 编辑级图表功能强大Diagram Design 2.0 版本新增循环图Loop这是带有共享内存中心的飞轮图虚线表示回写操作共有 27 种图表类型。它还为 Claude Code、Codex 和 Pi 配备了单一代理技能只需 60 秒就能让图表匹配品牌风格该技能会读取网站将颜色和字体应用到每一张图表中。若已在 draw.io 或 Mermaid 中创建图表指定源文件后它就能按受众所需的格式、大小和细节程度重新绘制无需使用 Figma没有千篇一律的圆角框也不用花 30 分钟挑选颜色。开发缘由开发者在 littlemight.com 上发表文章同时运营着 BestSelf.co每次绘制图表如架构草图、流程图、重要事项金字塔等向 Claude 求助得到的总是千篇一律的圆角框图表与网站整体风格格格不入。要么花 30 分钟和 Figma 较劲要么放弃绘制图表。于是为其开发了 Claude Code 技能它支持 27 种图表类型具备编辑级质量60 秒读取网站就能让图表匹配品牌风格。高质量的图表通常会精简内容每个节点都有其存在的意义。强调色仅用于突出 1 - 2 个需要读者首先关注的元素目标密度为 4/10。支持的图表类型所有 27 种图表都有三种变体简约亮色版、简约暗色版和全编辑版。可直接在浏览器中打开这些图表无需构建步骤无需 JavaScript也无需外部图像。具体图表类型包括架构图Architecture组件与连接关系流程图Flowchart决策逻辑序列图Sequence随时间变化的消息传递状态机图State machine状态与转换实体关系/数据模型图ER / data model实体与字段时间线图Timeline轴上的事件泳道图Swimlane跨职能流程象限图Quadrant两轴定位嵌套图Nested包含关系的层次结构树形图Tree父节点 → 子节点组织结构图Org chart所有权与路由维恩图Venn集合重叠层叠图Layer stack堆叠的抽象概念金字塔/漏斗图Pyramid / funnel排名层次或漏斗效应咨询 2×2 矩阵图Consultant 2×2情景矩阵 · 命名单元格雷达/蜘蛛图Radar / Spider多轴比较循环图Loop围绕中心的飞轮图IT 当前状态图IT current - state遗留系统现状 · 现代化改造高层架构图High - Level集群上的端到端堆栈条形图Bar chart分类比较折线图Line chart趋势变化甘特图Gantt时间轴上的任务和阶段散点图Scatter plot分布与相关性流程图Process多参与者的顺序工作流勋章图Medallion多层数据存储数据流图Data flow角色范围的管道步骤数据保护集成图DP integration数据源 → 核心 → 消费者数据保护安全矩阵图DP security matrix按角色的访问权限可浏览实时图库在浏览器中打开 skills/diagram - design/assets/index.html通过亮色/暗色/全编辑版标签浏览所有 27 种图表。安装方法Pi执行 pi install https://github.com/cathrynlavery/diagram - design在打开的 Pi 会话中运行 /reload。Pi 会使该技能可用于匹配图表请求使用 /skill:diagram - design 可显式调用它。Pi 还会加载 /export - diagram 提示模板。Claude Code执行 /plugin marketplace add cathrynlavery/diagram - design 和 /plugin install diagram - designdiagram - design。Claude Cowork依次点击“Customize” → “Directory” → “Plugins” → “”粘贴 cathrynlavery/diagram - design然后点击“Sync”最后从个人列表中安装。Codex执行 npx skills add https://github.com/cathrynlavery/diagram - design --skill diagram - design。可编辑安装托管安装方便但对 references/style - guide.md 的更改可能会被包更新覆盖。若打算自定义样式指南可克隆仓库并安装本地路径git clone gitgithub.com:cathrynlavery/diagram - design.git ~/code/diagram - design# Pi: 将检出的内容注册为本地包pi install ~/code/diagram - design# Claude Code: 为内部技能创建符号链接ln -s ~/code/diagram - design/skills/diagram - design ~/.claude/skills/diagram - design共享技能位于 skills/diagram - design/。Pi 通过仓库的标准 skills/ 包目录发现它Claude Code、Codex 和其他支持 Agent Skills 的工具使用相同的文件。让图表匹配你的品牌风格核心目标以品牌颜色和排版风格输出编辑级质量的图表而非使用通用模板。默认情况下图表以简洁的纯黑色和橘红色调色板渲染烟白色背景、纯黑色文字、橘红色强调色、蓝灰色次要色、银色细线边框效果足以直接截图使用。但花 60 秒进行品牌适配会更好该技能会从网站提取品牌风格并应用到每一张图表中。操作流程输入onboard diagram - design to https://yoursite.com代理会获取主页 → 提取主色调和字体栈 → 将检测到的值映射到语义角色背景、文字、次要色、强调色、链接色 → 显示建议的更改 → 将配置写入 references/style - guide.md确认yes, apply it此后所有新图表都会使用品牌颜色。网站的背景色会成为图表的背景色CTA行动呼吁颜色会成为焦点强调色正文字体栈会成为节点标签字体。提取内容从网站检测到的内容转换为的配置背景颜色背景配置项主要文本颜色文字配置项次要/说明文本颜色次要色配置项卡片或容器颜色二级背景配置项最常用的品牌颜色CTA、链接、标题强调色配置项字体家族标题字体、节点名称字体、子标签字体对比度自动检查在写入配置之前该技能会验证文字在背景上的 WCAG AA 对比度。如果网站颜色在图表大小9 - 12px下对比度不达标它会提出调整值并说明原因。默认无障碍设计每个图表模板都会为内联 SVG 提供可访问的名称和描述包括 roleimg、可解析的 aria - labelledby 和第一个子元素插槽。每个图表和变体的 ID 都有前缀因此多个 SVG 导出可以安全地内联在同一页面上而不会出现重复的可访问名称 ID。装饰性图标会对辅助技术隐藏。手动覆盖若更喜欢手动设置配置可以打开 skills/diagram - design/references/style - guide.md 并编辑表格。下游的所有内容27 种图表、注释原语和图库都会从这里读取配置使用语义角色名称如“强调色”而非具体的颜色代码 #eb6c36。首次使用提示该技能不会在品牌项目中默认输出通用样式的图表。在新项目中首次使用时它会检查 style - guide.md 是否已自定义。如果未自定义它会暂停并询问这是你在这个项目中的第一张图表样式指南仍为默认设置。你想进行品牌适配、手动粘贴配置还是继续使用默认设置完整规范请参考 skills/diagram - design/references/onboarding.md。快速开始查看所有 27 种图表# macOSopen skills/diagram - design/assets/index.html# Linuxxdg - open skills/diagram - design/assets/index.html在 Claude Code、Codex 或 Pi 中请求图表# 示例请求Make me an architecture diagram of my app: frontend, backend, database, Redis cache.I need a quadrant showing Q2 projects by impact vs effort.Give me a sequence of a bearer call with token refresh on 401.分支刷新使用 type - sequence.md 中的 ALT 组合片段语法示例请参考 skills/diagram - design/assets/example - sequence - oauth.html并非完整的授权码握手流程代理会选择合适的图表类型生成 HTML 并保存。也可以直接从模板开始cp skills/diagram - design/assets/template.html my - diagram.html # 简约亮色版cp skills/diagram - design/assets/template - full.html my - diagram.html # 带摘要卡片的编辑版从 draw.io 或 Mermaid 导入图表若已在 draw.io / diagrams.net 或 Mermaid 中创建图表指定源文件后该技能就会重新绘制它们保持内容不变采用新的设计系统满足所需的输出要求。例如将一个 12 节点的 draw.io 文件重新绘制为适合博客文章的平衡细节版本。源文件中的六种柔和填充颜色会合并为一种强调色手动绘制的坐标会调整为 4px 网格。导入命令示例/diagram - design:import platform.drawio/diagram - design:import platform.drawio --sizeslide - 16x9 --detailsimplified --audienceexecutive/diagram - design:import platform.drawio --detailfaithful --formatpng --pageall/diagram - design:import - mermaid README.md --diagramall/diagram - design:import - mermaid architecture.mmd --sizeslide - 16x9 --detailsimplified也可以用自然语言请求例如“redraw this drawio file for my deck”、“make this Mermaid block editorial” 或 “この Mermaid をスライド用にきれいにして”。该技能支持读取 draw.io 常见的文件格式包括 .drawio、.drawio.xml、.drawio.png嵌入式图表和 .drawio.svg甚至包括在编辑器中看起来像 base64 乱码的压缩文件。对于 Mermaid它支持 .mmd、.mermaid 文件以及 Markdown 中的一个或多个围栏式 Mermaid 代码块。它仅解析文本不涉及渲染、JavaScript、浏览器、网络或点击目标。四个调整选项选项可选值作用格式Formathtml · svg · png · htmlpng输出格式SVG 适用于 FigmaPNG 适用于幻灯片HTML 适用于网页大小Sizedoc - inline · doc - wide · slide - 16x9 · slide - 4x3 · social - og · social - square · print - a4 - landscape · print - letter - landscape · fit视图框和字体大小例如投影幻灯片使用 16px 的节点名称而非 12px细节Detailfaithful (≤24 节点分区) · balanced (≤12) · simplified (≤7)通过固定的降级规则保留源文件的内容依次去除装饰、重复元素、叶节点集群和基础设施受众Audienceengineer · mixed · executive文字表述例如将 “Auth Service / JWT · RS256 · :8443” 转换为 “Auth Service / token check → Sign - in”每次导入都会生成一份保真度记录显示哪些内容被合并、折叠或删除。了解源文件内容自然能注意到这些变化。例如Detail: balanced · 12 source nodes → 8 drawnCollapsed: Token valid? decision → edge label on Gateway → AuthDropped: 1 sticky note (legacy path, to be retired) — unconnected in sourceKept in full: the request path (Web/Mobile → Gateway → Orders → Postgres)不会保留的内容包括源文件或渲染器的坐标、源调色板、源字体、draw.io 的对角线连接线以及 Mermaid 的自动布局。始终保留的内容包括组件、关系、分组和方向。详细信息请参考 references/import - drawio.md、references/import - mermaid.md 和 references/output - spec.md。导出为 PNG / SVG图表默认以自包含的 HTML 形式输出但可以将图表本身导出为适合 Figma、幻灯片或社交卡片的格式。使用代理的斜杠命令Pi/export - diagram path/to/diagram.html/export - diagram path/to/diagram.html --svg - only/export - diagram path/to/diagram.html --png - only --scale3Claude Code/diagram - design:export path/to/diagram.html/diagram - design:export path/to/diagram.html --svg - only/diagram - design:export path/to/diagram.html --png - only --scale3也可以用自然语言请求例如“Export this diagram as SVG and PNG.” 或 “Save my - diagram.html as PNG.”SVG 导出提取 节点并注入 Google Fonts使其可以在浏览器、Figma 和 Illustrator 中独立渲染。PNG 导出默认使用 Playwright 以 2 倍分辨率进行光栅化。首次使用需要进行一次性设置pip install playwright playwright install chromium两种格式都只包含图表本身不包括全编辑版中的编辑卡片和标题。如果需要全编辑布局的截图可以使用浏览器的打印为 PDF 或全页截图功能。完整步骤请参考 skills/diagram - design/references/export.md。架构设计采用渐进式披露原则。SKILL.md 是一个简洁的索引它告诉代理如何选择图表类型以及在哪里查找详细信息。每种图表类型都有自己的参考文件仅在需要时加载。diagram - design/├── commands/│ ├── export - diagram.md — Claude Code 导出命令│ ├── import - drawio.md — Claude Code draw.io 导入命令│ └── import - mermaid.md — Claude Code Mermaid 导入命令├── prompts/│ ├── export - diagram.md — Pi /export - diagram 提示模板│ └── import - mermaid.md — Pi Mermaid 导入提示模板├── skills/│ └── diagram - design/│ ├── SKILL.md — 设计理念、选择指南、检查清单│ ├── references/ — 仅在选择类型或原语时加载│ │ ├── style - guide.md — 颜色和字体的唯一真实来源│ │ ├── onboarding.md — URL 到配置的转换流程│ │ ├── import - drawio.md — draw.io 重新绘制流程│ │ ├── import - mermaid.md — Mermaid 重新绘制流程│ │ ├── output - spec.md — 格式 × 大小 × 细节级别│ │ ├── export.md — SVG / PNG 导出及尺寸设置│ │ ├── type - architecture.md│ │ ├── type - flowchart.md│ │ ├── type - sequence.md│ │ ├── type - state.md│ │ ├── type - er.md│ │ ├── type - timeline.md│ │ ├── type - swimlane.md│ │ ├── type - quadrant.md│ │ ├── type - nested.md│ │ ├── type - tree.md│ │ ├── type - org - chart.md│ │ ├── type - layers.md│ │ ├── type - venn.md│ │ ├── type - pyramid.md│ │ ├── primitive - annotation.md│ │ ├── primitive - sketchy.md│ │ └── primitive - terminal.md│ ├── scripts/│ │ ├── drawio_extract.py — draw.io → 结构化中间表示│ │ └── mermaid_extract.py — Mermaid → 结构化中间表示│ └── assets/│ ├── index.html — 实时图库带标签切换│ ├── template*.html — 新图表的模板│ ├── example-.html — 3 种变体 × 27 种类型│ ├── example - loop - terminal.html│ ├── example - quadrant - consultant.html│ ├── example - import - drawio.html│ ├── example - import - mermaid.html│ └── example - sequence - oauth*.html├── scripts/fixtures/│ ├── sample - flowchart.mmd│ ├── sample - readme - with - mermaid.md│ └── sample - adversarial.mmd└── docs/screenshots/ — README 中使用的图片这种设计使代理的工作上下文保持简洁仅加载所需内容并且易于扩展只需添加新的 type-.md 文件并将其连接到选择指南中即可。该技能附带 37 个参考文件涵盖了所有图表类型、原语和实用工具。贡献与样式检查在提交新示例之前请运行 python3 scripts/lint - skin.py .。仓库范围的检查 python3 scripts/lint - skin.py --all --baseline 必须通过。样式检查器的无障碍性类别会拒绝没有可解析可访问名称、标题/描述为空或位置错误、不安全的裸标题/描述 ID 的图表 SVG。如果修改了 draw.io 导入路径python3 scripts/verify - drawio - import.py 也必须通过它会使用真实的提取器对 scripts/fixtures/sample - architecture.drawio 的四种容器格式进行测试并检查参考文件是否同步。如果修改了 Mermaid 导入路径python3 scripts/verify - mermaid - import.py 也必须通过它会覆盖所有支持的语法、多块 Markdown、对抗性标签、信任边界行为、资源限制、命名失败和参考/命令连接。所有拉取请求和推送都会通过 GitHub Actions CI.github/workflows/ci.yml自动验证。按需加载启动时代理仅看到技能名称和描述。当请求匹配时它会加载 SKILL.md仅在需要时才会加载类型参考文件。即使有 37 个参考文件这种设计也能确保技能快速响应。请求内容代理加载的文件Make me a flowchartSKILL.md references/type - flowchart.mdBuild an architecture diagramSKILL.md references/type - architecture.mdOnboard this skill to my siteSKILL.md references/onboarding.md references/style - guide.mdAdd an editorial callout to this diagramSKILL.md references/primitive - annotation.mdGive me a hand - drawn versionSKILL.md references/primitive - sketchy.mdGive me a terminal / CLI - window versionSKILL.md references/primitive - terminal.mdRedraw this .drawio file for my deckSKILL.md references/import - drawio.md references/output - spec.md 所选类型的参考文件Redraw this Mermaid block for my deckSKILL.md references/import - mermaid.md references/output - spec.md 所选类型的参考文件常规图表制作27 种图表中的任何一种仅 SKILL.md 该类型的参考文件无论有多少种图表类型代理只会读取需要的文件。即使明天添加了新的图表类型其他部分也无需改动。设计系统概述每张图表使用一种强调色突出 1 - 2 个焦点元素。使用三种字体家族Instrument Serif标题和斜体注释、Geist sans节点名称、Geist Mono技术子标签。采用 1px 细线边框无阴影最大边框半径为 10px。所有坐标、宽度和间距都能被 4 整除这是确保图表不显得是 AI 生成的关键。Mono 字体用于技术内容端口、URL、字段类型并非统一的“开发”风格。珊瑚色调的焦点节点会吸引读者关注 1 - 2 个重要元素。完整规范请参考 SKILL.md。原语功能注释标注使用斜体 Instrument Serif 字体和虚线贝塞尔引导线用于页边的编辑注释。详细信息请参考 skills/diagram - design/references/primitive - annotation.md。手绘风格滤镜使用 SVG 湍流和位移映射实现手绘风格变体适合用于文章但不适合技术文档。详细信息请参考 skills/diagram - design/references/primitive - sketchy.md。图标集包含 55 个单色 IT/云图标笔记本电脑、手机、用户、服务器、数据库、Docker、Kubernetes、AWS、Azure、GitHub、Postgres 等可用于丰富架构图和序列图。图标源自 Tabler IconsMIT 许可的描边图标和 Simple IconsCC0 许可的品牌轮廓。每个图标都使用当前颜色因此会继承编辑样式或适配的品牌风格。详细信息请参考 skills/diagram - design/references/primitive - icons.md并可浏览图库。使用 python scripts/build - icons.py 重新生成图标。不适用场景用于推文或终端输出的快速 Unicode 图表 → 使用 wiretext 风格的技能。任何列表内容 → 使用表格或项目符号。前后对比 → 使用表格。单形状“图表”带标签的单个框 → 直接写句子。在绘制图表之前请先思考读者从这个图表中获得的信息是否比从一段精心撰写的段落中更多如果答案是否定的那就不要绘制图表。关于作者本项目由 Cathryn Lavery 创建她是 BestSelf.co 的创始人。她在 littlemight.com 上发表关于 AI、创业和设计美观事物的文章和时事通讯。如果觉得这个项目有用请给仓库加星并在 X 上与作者交流。提醒请根据上述提示检查设备并采取相应措施以更好地使用 Diagram Design 相关功能避免可能出现的问题。