Repolode
Submit
bybit-exchange

bybit-exchange/svg-diagram

An agent skill and zero-dependency linter that makes coding agents draw hand-placed SVG diagrams in one consistent house style.

View on GitHub
Stars
629
Forks
45
Open issues
2
Last commit
2 months ago

What is it?

svg-diagram is an agent skill for coding assistants such as Claude Code, Codex and opencode. It gives the agent the layout arithmetic, colour system and typography rules needed to draw architecture, flowchart, sequence, data-flow and lifecycle diagrams as plain SVG with explicitly placed elements instead of auto-laid-out output.

The project also ships svg-lint, a Node tool with no dependencies that checks a finished SVG against the house style. It reports 12 checks covering XML escaping, viewBox margins, the font stack, box height, arrowhead markers, text overflow, overlap and palette conformance, and each finding includes the value found and the value expected.

The skill includes CJK-aware character width tables and a font stack that keeps Chinese labels from rendering as missing glyphs. Installation uses npx skills add and copies the skill into each supported agent's directory.

Key features

  • 01Hand-placed SVG layout rules covering viewBox margins, box heights and connector geometry.
  • 02A zero-dependency svg-lint tool that checks finished SVG files against the house style.
  • 03Findings report the value found and the value expected, with a repair suggestion.
  • 04Separate Latin and CJK character width tables for checking label overflow.
  • 05Five semantic colour triples applied through presentation attributes, with no CSS classes.

Use cases

  • Having a coding agent produce architecture or sequence diagrams that stay consistent across a documentation set.
  • Embedding diagrams with Chinese labels in Markdown docs without missing-glyph problems.
  • Reviewing SVG diagrams as text diffs because every coordinate is a literal value.

Quick start

  1. 1

    Install the skill for your agents

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

    Run the linter on a diagram (no install needed)

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

Things to know

  • The linter is a manual maintainer tool and nothing runs it automatically.
  • Claude.ai users get the skill text only, without the linter, which needs local Node.

Topics

#svg#diagrams#agent-skills#documentation#linter#cjk#claude-code#system-design#architecture-diagram#claude-skill

FAQ

What is svg-diagram?
An agent skill and zero-dependency linter that makes coding agents draw hand-placed SVG diagrams in one consistent house style. svg-diagram is an agent skill for coding assistants such as Claude Code, Codex and opencode. It gives the agent the layout arithmetic, colour system and typography rules needed to draw architecture, flowchart, sequence, data-flow and lifecycle diagrams as plain SVG with explicitly placed elements instead of auto-laid-out output.
Is svg-diagram free to use? What license does it have?
svg-diagram is open source under the MIT license. Check the license terms before using it in commercial products.
Is svg-diagram still maintained?
Updated within 6 months. The last commit to svg-diagram was on Sep 3, 2026.
What can I use svg-diagram for?
Having a coding agent produce architecture or sequence diagrams that stay consistent across a documentation set. Embedding diagrams with Chinese labels in Markdown docs without missing-glyph problems. Reviewing SVG diagrams as text diffs because every coordinate is a literal value.
How do I install svg-diagram?
Install the skill for your agents: npx skills add bybit-exchange/svg-diagram -g Run the linter on a diagram (no install needed): node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg
Where can I get svg-diagram?
The source code and installation instructions are on GitHub: https://github.com/bybit-exchange/svg-diagram

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects