bybit-exchange/svg-diagram

这是什么？

核心功能

• 01手工定位的 SVG 布局规则，涵盖 viewBox 边距、方框高度和连线几何。
• 02零依赖的 svg-lint 工具，用于检查成品 SVG 是否符合风格规范。
• 03报错会给出实际值、期望值和修复建议。
• 04分别提供拉丁字符与 CJK 字符的宽度表，用于检查标签溢出。
• 05五组语义化配色通过展示属性应用，不使用 CSS 类。

适用场景

• 让编码代理为文档集生成风格统一的架构图或时序图。
• 在包含中文标签的 Markdown 文档中嵌入图示，避免缺字问题。
• 以文本 diff 方式审查 SVG 图表，因为每个坐标都是明确的字面值。

快速上手

1. 1

   为你的智能体安装该技能

   npx skills add bybit-exchange/svg-diagram -g
2. 2

   对图表运行检查器（无需安装）

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

使用前须知

• !检查器需要手动运行，不会自动执行。
• !在 Claude.ai 上使用时只能获得技能文本，无法使用需要本地 Node 的检查器。

标签

常见问题

svg-diagram 是什么？

一套让编码代理按统一风格手工绘制 SVG 架构图的技能，附带零依赖的校验工具。 svg-diagram 是一个面向 Claude Code、Codex、opencode 等编码代理的技能。它为代理提供布局计算、配色系统和排版规则，让代理能把架构图、流程图、时序图、数据流图和生命周期图画成显式定位元素的纯 SVG，而不是交给自动布局引擎。

svg-diagram 可以免费使用吗？用的什么许可证？

svg-diagram 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

svg-diagram 还在维护吗？

半年内有更新。svg-diagram 最近一次提交是在 2026年9月3日。

svg-diagram 适合用来做什么？

让编码代理为文档集生成风格统一的架构图或时序图。 在包含中文标签的 Markdown 文档中嵌入图示，避免缺字问题。 以文本 diff 方式审查 SVG 图表，因为每个坐标都是明确的字面值。

svg-diagram 怎么安装和运行？

为你的智能体安装该技能: npx skills add bybit-exchange/svg-diagram -g 对图表运行检查器（无需安装）: node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg

在哪里获取 svg-diagram？

源代码和安装说明在 GitHub 上：https://github.com/bybit-exchange/svg-diagram