Diagram Design 可编辑安装如何克隆仓库定制 style-guide 并注册到 Pi 与 Claude Code【免费下载链接】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 这个 Agent Skill 生成品牌风格图表并希望直接修改工作中的style-guide.md而不是每次走 onboarding那么官方管理的插件安装方式有个隐患README 明确说明references/style-guide.md中的改动可能被后续 package update 替换掉。官方给出的解法是可编辑安装editable install克隆仓库到本地把本地 checkout 注册给 Pi 和 Claude Code之后所有图表皮肤都从你本地这份style-guide.md读取改完即生效。完成本文后你会得到一个本地 checkout、Pi 与 Claude Code 两条可用的注册链路以及一套能验证新皮肤是否真正生效的检查方法画廊对比、首图 gate 判定、self_check.py输出OK。为什么托管安装不能直接改 style-guideREADME 的 Editable install 一节给出了原因与替代边界托管安装marketplace/plugin 方式的style-guide.md改动会被包更新替换。如果你只是想让某次定制不被覆盖保存的客户端 profile~/.diagram-design/profiles/下能扛过更新带.diagram-designmarker 的项目也不受影响——这两条是不想动安装方式时的官方替代路径。只有计划直接定制工作版 style guide 时才需要克隆仓库并安装本地路径。这也是本文要完成的路线。第一步克隆仓库README 给出的原始命令如下SSH 形式要求你的机器对 GitHub 有访问凭证git clone gitgithub.com:cathrynlavery/diagram-design.git ~/code/diagram-designREADME 示例统一使用~/code/diagram-design这个目录。如果你换到别的本地路径后面pi install与ln -s两条命令中的路径要同步替换。克隆下来后共享 skill 位于skills/diagram-design/。README 说明Pi 通过仓库标准的skills/包目录发现它Claude Code、Codex、Factory Droid 等其他 Agent Skills 兼容工具复用同一份文件。第二步把本地 checkout 注册到 Pi 与 Claude Code两个宿主各一条注册命令均出自 README# Pi: 把 checkout 注册为本地包 pi install ~/code/diagram-design # Claude Code: 符号链接内部 skill ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design两条命令的适用条件Pipi install指向的是仓库根目录不是skills/子目录。在已打开的 Pi 会话里执行/reload使其生效。之后可以用自然语言匹配图表请求或显式调用/skill:diagram-design/export-diagram、/import-mermaid、/profile、/doctor等 prompt 模板也会随包加载。Claude Code符号链接的目标是~/.claude/skills/diagram-design用户级 skill 目录。链接指向 checkout 内的skills/diagram-design目录本身因此你后续对其中文件的编辑会直接反映到 Claude Code 的加载结果。注册完成后两个宿主读到的都是你 checkout 里的那份文件这是改 style-guide 立即生效的前提。第三步编辑 references/style-guide.md要改的文件是 skills/diagram-design/references/style-guide.md。style-guide.md 自述是颜色、排版与 token 的唯一事实来源每一张图都从这里取色而不是从其他 reference 文件里内联的 hex 值取色。README 的 Manual override 一节也确认打开这个文件编辑表格即可所有下游都从那里读取——39 种图型、annotation 原始件、画廊全部继承语义角色名引用的是accent而不是#eb6c36。改哪些行核心是### Semantic roles表格默认值light/dark 两列如下Role用途默认lightpaper页面背景、默认节点填充#f5f5f5(white-smoke)ink主文本、主描边#2d3142(jet-black)muted次级文本、默认箭头#4f5d75(blue-slate)accent焦点元素全图 1–2 个#eb6c36(atomic-tangerine)linkHTTP/API 调用、外部箭头#2e5aa8## Typography表格定义三套字体角色title用 Instrument Serif、node-name用 Geist sans、sublabel用 Geist Mono 等。style-guide.md 还给了 light→dark 的 inversion 规则light 里的rgba(28,25,23, X)在 dark 中变为rgba(250,247,242, X)不透明度不变、RGB 翻转accent 在暗色底上轻微提亮色相。改动必须满足的约束style-guide.md 的 Constraints 一节列了硬性限制改完请逐条对照对比度ink在paper上必须达到 WCAG AAmuted在paper上对 11px 文本要达到 AA。一个 accent只选一个颜色做accent两个焦点色会抹掉焦点信号。不要彩虹配色品牌如果给 8 个色选 3 个paper、ink、accent其余降为muted变体。三套字体家族serif sans mono 不能更多即使品牌全是 sans也保留 Instrument Serif 做title和callout。paper 不取纯白选带一点暖味的米色、骨色或浅灰。另外注意文件中的说明assets/里的预烘焙示例 HTML 是更早皮肤下构建的文件里标注重生成是 v5.1 任务不要拿这些 example 的配色当新皮肤基准skill 新生成的图会使用你写进去的 token。不想手改 hex 的话style-guide.md 还列出三种替代跑 onboarding把网站 URL 丢给 skill它提取调色板与字体并重写本文件流程见 references/onboarding.md、品牌 token JSON 手工映射、或用命名 client profilereferences/profiles.md。手动改完 token 后文件建议跑一次 pre-output taste gate确认新accent相对新paper仍读起来是焦点。第四步验证新皮肤是否生效按从快到慢的顺序做三项检查全部来自仓库文档1. 打开画廊肉眼过一遍 39 种图型onboarding.md 的收尾验证手动改 token 同样适用open skills/diagram-design/assets/index.html # macOS xdg-open skills/diagram-design/assets/index.html # Linux确认新调色板在全部 39 种类型上观感一致。文档给出的唯一排障方向如果某类图看着不对通常是muted需要微调——相对新paper偏深或偏浅。2. 确认首图 gate 已跳过SKILL.md §0 定义了 first-run gateskill 在新项目的第一张图前会检查 style guide 是否还是出厂默认paper#f5f5f5、ink#2d3142、accent#eb6c36。如果仍是默认值agent 会停下来问你是否要先做品牌 onboarding并给出 (a) 从网站 URL 提取、(b) 从已装 skill 提取、(c) 从本地文件夹提取、(d) 手工粘贴 token、(e) 用默认、(f) 载入已存 profile 六个选项。你改过 token 之后任何语义角色值或字体家族与默认不同就会被归类为 custom-unsaved 并跳过这个 gate——这正是定制已生效的行为信号。gate 只会在 token 全部回到出厂值且没有.diagram-designmarker 时触发。3. 生成一张图并跑 self_check让 agent 正常生成一张图例如Make me a flowchart然后从 skill 目录运行随包自检脚本python3 scripts/self_check.py 生成的文件.htmlREADME 的 Its working if… 一节把成功条件写得很直接python3 skills/diagram-design/scripts/self_check.py file在生成的文件上打印OK。该脚本检查 accessible-SVG 契约与单文件安全规则无第三方依赖随 skill 一起安装。可选跑环境诊断如果生成链路本身出疑点找不到 skill、Python 环境问题用只读诊断命令Claude Code 里/diagram-design:doctorPi 里/doctor。它不修改文件、不安装依赖报告格式固定Doctor summary: PASS|WARN|FAIL (pass_count pass, warn_count warn, fail_count fail) [PASS] Python 3.11.9 found at ... [WARN] Playwright package not found in active interpreter ...以上为 references/doctor.md 给出的示例结果格式。其中 Python 检查要求 3.10Playwright 缺失只报warn并给出pip install playwright playwright install chromium提示不会自动装。由于可编辑安装的解析根就是仓库 checkout内含CONTRIBUTING.md、CI 工作流与scripts/verify-plugin-package.pydoctor 会进入 maintainer-checkout 模式额外检查scripts/下五个验证脚本与commands/、prompts/的路由接线是否齐全——缺失会报fail正好可以顺便确认你 checkout 是完整的。限制与后续更新路径托管安装的 Pi 侧没有自动包刷新README 要求手动pi update --extensions拉取合入更新。本地 checkout 则是你自己的 git 仓库同步上游走常规的 git 操作即可同步前先留意你对style-guide.md的本地改动。profile 仍是最稳的跨客户端做法如果之后要服务多个客户品牌把改好的 guide 存为命名 profilePi 用/profileClaude Code 用/diagram-design:profile再给项目加.diagram-designmarker内容仅一行profile: slug。带 marker 的项目直接读~/.diagram-design/profiles/slug.md不会互相覆盖完整的存储、slug 校验与恢复契约见 references/profiles.md。profile 不要放进已安装插件目录profiles.md 明确那些目录在更新时可能被替换。三项验证都通过——画廊配色一致、gate 不再询问、self_check.py打印OK——即可认为可编辑安装完成此后在 Pi 或 Claude Code 中生成的每张图读的都是你 checkout 里这份style-guide.md。【免费下载链接】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），仅供参考