项目介绍
Diagram Design 是 cathrynlavery 维护的多宿主 Agent Skill。它让 Codex、Claude Code、Pi 等宿主按照一套编辑式设计规则生成技术与产品图表，交付自包含 HTML 和内联 SVG。项目同时提供品牌 onboarding、输入格式重绘、导出和几何自检。它适合需要在文档、博客、评审或演示中反复制作一致视觉图表的团队，但仍应审查输入文件、写入位置与可选浏览器依赖。
核心功能
41 种图表类型
覆盖架构、流程、时序、状态、ER、部署、依赖、甘特、Sankey、Wardley、用户旅程等类型，并用各自参考文件定义布局与预算。
品牌 onboarding 与 profiles
可以从公开网站提取颜色和字体，校验对比度后写入样式指南，也可以把令牌保存为用户级命名 profile 并由项目 marker 选择。
三种来源重绘
对 draw.io、Mermaid 和 Excalidraw 使用文本提取脚本建立结构摘要，然后保留组件、关系、分组和方向，舍弃源坐标与样式。
静态、动画与导出
默认生成静态单文件 HTML；需要时可加受限的可访问动画，并把图表导出为 SVG 或借助 Playwright 导出 PNG。
质量与安全检查
仓库提供输出自检、几何、动效、文档同步和浏览器渲染检查，尤其检查 SVG 可访问名称、连接线与裁切。
安装与使用
先把仓库添加为 Codex 插件市场，再安装 Diagram Design。首次任务先确认品牌策略和输出路径，用静态 HTML 做最小验证；只有需要 PNG 时再安装 Playwright 与 Chromium。
让 AI Agent 帮你安装
把这段话发送给 Codex、Claude Code 或其他可以操作本地环境的 AI Agent。
请帮我安装 Diagram Design Agent Skill。项目地址是 https://github.com/cathrynlavery/diagram-design。先读取 README.md、skills/diagram-design/SKILL.md、.codex-plugin/plugin.json、SECURITY.md 和 LICENSE，确认当前 Codex 支持插件市场，再依次运行 `codex plugin marketplace add cathrynlavery/diagram-design` 与 `codex plugin add diagram-design@diagram-design`。安装后开启新会话，先询问我要运行品牌 onboarding、手动提供样式令牌，还是使用默认样式。不要覆盖现有 `references/style-guide.md`、`.diagram-design` 或 profile；需要写入或覆盖时先确认。若要访问品牌网站、安装 Playwright/Chromium、启动浏览器、导入不可信 draw.io/Mermaid/Excalidraw 文件或写入项目目录，也先说明边界并向我确认。最后只生成一个小型静态 HTML 架构图，运行 self_check.py 并报告文件路径与检查结果。- 支持插件市场的 Codex
- 可访问 GitHub
- 允许 Agent 在目标目录读取资料并写入 HTML
- PNG 导出时需要 Python、Playwright 与 Chromium
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design- 1添加市场并安装插件
运行 `codex plugin marketplace add cathrynlavery/diagram-design`，再运行 `codex plugin add diagram-design@diagram-design`。完成后启动新会话，让 Codex 重新发现 Skill。
- 2选择品牌与输出约束
第一次生成前，在 onboarding、手动令牌和默认样式之间明确选择，并说明目标格式、尺寸、受众、输出目录与是否允许动画。
- 3生成最小静态图
先要求一个节点和连接关系都较少的架构图或流程图。检查单文件 HTML 能否离线打开，内容是否准确，是否存在连接线遮挡和文字裁切。
- 4运行输出自检
从 Skill 安装目录运行 `python3 scripts/self_check.py <file>`。如从仓库检出运行，还可执行几何、动效或浏览器渲染检查。
- 5按需导入或导出
导入现有图时先选择格式、尺寸、细节级别和受众，并复核 fidelity ledger。只有确实需要 PNG 时才安装 Playwright 与 Chromium。
安装后开启新会话，请 Codex 创建一个只有三至五个节点的静态架构图。确认输出为单个 HTML 文件，浏览器可打开，SVG 有标题与描述，并在安装目录运行 `python3 scripts/self_check.py <file>`。
- Codex 在启动时刷新已配置的 Git 市场；需要立即获取更新时运行 `codex plugin marketplace upgrade diagram-design` 并开始新会话。
- 保存到 `~/.diagram-design/profiles/` 的 profile 可跨项目使用；项目通过 `.diagram-design` marker 选择 profile。
- 静态输出是默认值；不要在未请求时添加动画或生成 PNG/SVG 导出文件。
- 仓库没有 GitHub Release，更新跟随市场和 main 分支。
使用场景
系统架构说明
把服务、数据存储、边界和请求路径整理为架构图，用于设计评审或 README。
重绘历史图表
从 draw.io、Mermaid 或 Excalidraw 提取组件与关系，在保留语义的前提下统一布局、字体和连接线。
品牌化技术内容
把公开品牌颜色与字体转为经过对比度检查的令牌，为博客、文档和演示生成一致图表。
产品与数据叙事
用用户旅程、时间线、Sankey、甘特、雷达或热力图表达流程、阶段、流量和对比。
使用评价
从公开仓库看，Diagram Design 的突出之处是把设计判断、输入重绘、可访问性和自动检查放进同一套 Skill，而不是只提供一组 SVG 模板。类型覆盖广，安装说明能对应多个宿主，仓库也给出了大量可直接审阅的输出示例。成本在于规则体量大、品牌首次门槛和导出依赖需要理解，且版本只存在于插件清单，没有 GitHub Release。此评价基于 README、SKILL.md、清单、验证脚本说明与示例图片，没有声称完成真实安装或长期使用。
值得一试的地方
- 视觉类型、语义模式与质量门槛说明完整
- 同时支持新建图表、来源重绘、品牌配置和导出
- 静态默认、可访问 SVG 与不可信输入规则边界明确
- MIT 许可证、安全报告渠道和多宿主安装证据清楚
使用前要知道
- 规则与参考文件较多，简单任务可能显得过重
- PNG 导出需要额外浏览器依赖
- 没有 GitHub Release 或 tag 可固定版本
- 实际效果仍受宿主遵循 Skill 指令的程度影响
README
Diagram Design
Overview
Diagram Design 是面向 Codex、Claude Code、Pi 等 Agent 宿主的技术图表 Skill，可生成自包含 HTML 与内联 SVG，并重绘 draw.io、Mermaid 和 Excalidraw 来源。 面向 Claude Code、Codex 与 Pi 的编辑式图表设计 Skill，生成自包含 HTML 与 SVG。
Getting started
- 先把仓库添加为 Codex 插件市场，再安装 Diagram Design。首次任务先确认品牌策略和输出路径，用静态 HTML 做最小验证；只有需要 PNG 时再安装 Playwright 与 Chromium。
- Diagram Design 把语义模式与视觉类型分开选择，再用复杂度预算、连接线规则、色彩焦点和可访问性清单约束结果。
- 仓库列出 41 种视觉类型，常规类型提供亮色、暗色和完整编辑版静态示例；默认输出不需要构建步骤或外部图片。
- 安装后开启新会话，请 Codex 创建一个只有三至五个节点的静态架构图。确认输出为单个 HTML 文件，浏览器可打开，SVG 有标题与描述，并在安装目录运行 `python3 scripts/self_check.py <file>`。
Configuration
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design