Diagram Design

简介

Diagram Design 是 BestSelf 创始人 Cathryn Lavery（品牌 LittleMight）开源的智能体图表技能，MIT 许可，GitHub 星标约 4.4 万，2026 年 10 月 6 日登上 GitHub Trending 日榜。它的口号是「设计师不会嫌弃的编辑级图表」：不用 Figma、不用千篇一律的圆角框，也不要「Mermaid 式粗糙图」，而是让 Claude Code、Codex 等智能体按一套克制的设计规范生成图表——默认留白多、强调色只留给读者最该看的一两处、目标信息密度 4/10。覆盖架构图、IT 现状图、流程图、时序图、状态机、ER、时间线、泳道图、四象限、雷达图、飞轮、树、组织架构、维恩图、甘特图、桑基图、鱼骨图、Wardley 图、看板、用户旅程、部署图、UML 类图、数据库表结构、轴测图、热力图等 40 多种类型，每种都有浅色、深色和完整编辑版三个静态变体，输出为可直接用浏览器打开的自包含 HTML + SVG。 安装方式：Claude Code 中执行 /plugin marketplace add cathrynlavery/diagram-design 与 /plugin install diagram-design@diagram-design；Codex 执行 codex plugin marketplace add cathrynlavery/diagram-design 与 codex plugin add diagram-design@diagram-design；其他支持 Agent Skills 的工具（Cursor、Cline、Gemini CLI 等）可用 npx skills add cathrynlavery/diagram-design。装好后直接对智能体说「给我的应用画一张架构图：前端、后端、数据库、Redis 缓存」即可；说「onboard diagram-design to https://你的网站」可在约 60 秒内读取网站配色与字体，保存为命名品牌配置，供多个项目复用。它还能把 draw.io、Mermaid、Excalidraw 的已有图重绘成同一风格，并通过 Playwright 导出 2 倍分辨率 PNG 或 SVG。官方提醒：正式构建只来自该 GitHub 仓库，以其他名义发布的插件目录条目均为非官方副本。来源：github.com/cathrynlavery/diagram-design README、diagramdesign.dev（2026-10-07 核对）。

• 架构图、流程图、时序图、状态机、ER、甘特图、桑基图、Wardley 图等 40 多种类型
• 每种类型提供极简浅色、极简深色、完整编辑版三种静态样式
• 输出自包含 HTML + SVG，无构建步骤、无外部图片依赖
• 给出官网地址即可抓取品牌配色与字体，保存为可复用的品牌配置
• 可把 draw.io、Mermaid、Excalidraw 图重绘成同一设计体系
• 导出 PNG / SVG，可选无障碍动效（reveal / step / loop）
• 提供 Claude Code、Codex、Copilot、Droid 插件市场安装与 npx skills 安装

界面截图

可左右滑动，或使用方向键、Home 和 End 浏览截图。

定价 · 套餐对比