bybit-exchange/svg-diagram

svg‑diagram – AI 代理生成的 SVG 的统一风格和 lint 工具

是什么 – 一个零依赖的轻量级 Node 工具，为手写 SVG 图表定义严格的视觉风格，并提供命令行 lint 工具（svg‑lint），用于检查完成的 SVG 是否符合该风格。该仓库包含 技能（markdown 文件 SKILL.md），可安装到多个主流编码代理（Claude、Gemini、Copilot 等）中，使代理精确掌握如何设置框体、放置文本、绘制连接线、选择颜色。

对 AI 代理为何重要 – 现代代码生成代理经常需要输出图表（架构草图、流程图、基准测试图）。通过提供明确的算术规则而非模糊的“看起来好看”，该技能使输出具有确定性，可作为纯文本审查，并能通过 lint 工具自动验证。这减少了生成后的手动编辑，确保了不同代理间的一致性。

核心特性

• 统一风格 – 固定的 viewBox 边距、字体大小、颜色三元组、箭头几何、CJK 安全字体栈，以及明确的转义规则。所有规则均在 SKILL.md 中文档化。
• 零依赖 lint 工具 – 一个单一的 Node 脚本（tools/svg‑lint/bin/svg‑lint.mjs），无需 npm install 即可在任何机器上运行。执行 12 项检查（转义、viewBox、字体栈、框体尺寸、基线、间距、箭头标记、溢出、重叠、调色板、连接线几何、文档模型健全性检查）。
• 代理无关安装 – 使用 npx skills add bybit-exchange/svg-diagram -g 可将技能和 lint 工具复制到数十种代理的对应目录中。技能的 front-matter name 决定安装路径，因此仓库可移动而不会破坏安装。
• 人类可读的修复建议 – 每个 lint 失败报告当前值、允许范围/值，以及一行“修复”建议，例如 font-family: absent → 'PingFang SC', …。
• 合规图表图库 – 十个示例 SVG 展示了每条规则（布局、创作循环、lint 门禁、数据流、技能生命周期、仓库架构、多代理安装、CJK 字体处理、分层路由、A/B 基准）。
• 测试套件 – npm run lint:svg:all 验证随附的 SVG；npm test 运行 984 个单元测试，确保 lint 工具和技能保持可靠。

如何使用

1. 为你的代理安装该技能：

   npx skills add bybit-exchange/svg-diagram -g   # 全局安装，适用于所有代理
   

2. 在新的代理会话中请求生成图表；代理将宣布正在使用 svg‑diagram 技能，并遵循其中定义的算术规则。
3. 代理输出 diagram.svg 后，运行 lint 工具验证合规性：

   node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg
   

   添加 --json 以获取机器可读输出。
4. 若任何检查失败，根据修复提示编辑 SVG，或调整技能描述后重新运行。

项目存在的原因 – 为了让 AI 生成的图表 可作为代码审查：每个坐标都明确，每个样式都是呈现属性，且 lint 工具保证输出符合共享视觉语言，无需依赖布局引擎或外部 CSS。这提升了可复现性，简化了基于 diff 的审查，并确保 CJK 字符在各平台上正确渲染。

许可证 – MIT。