Bybit's svg-diagram is an agent skill that draws architecture and flowchart diagrams to one house style, and a 12-check linter enforces it

Bybit, the cryptocurrency exchange, published svg-diagram on GitHub on 13 August 2026, an MIT-licensed agent skill for drawing SVG diagrams. The repository is at 421 stars and 2,700 active watchers at the time of writing. Its README calls it "a house style for hand-written SVG diagrams your agent can follow, the layout arithmetic, the colour system, and a zero-dependency linter that proves it did".

What ships in the repository

The skill installs into the file paths a coding agent already reads. Bybit's README lists the paths: ~/.claude/skills/svg-diagram/ for Claude Code, ~/.agents/skills/svg-diagram/ for the shared directory Codex, Cursor, Gemini CLI, Copilot, opencode and Antigravity read, ~/.pi/skills/svg-diagram/ for Pi, and per-agent paths for Windsurf, Continue, Roo, Goose, Kiro, Trae and about forty more agents. The single install command in the README is npx skills add bybit-exchange/svg-diagram -g.

The skill's rules live in one SKILL.md at the repository root, and the linter, svg-lint, is a Node script with no dependencies that ships alongside it.

The house style the file pins down

The README publishes a table of everything the skill fixes. The viewBox margins are 20 to 25 pixels. Boxes take their height from the font, at font size times three for one line and font size times 1.5 for each extra line. Connectors are a straight L only when the two ends line up on an axis, and a C or Q curve for anything that turns; no right-angle elbows are allowed. Arrowheads are notched markers sized to the line's stroke width, starting 5 pixels clear of the source and ending 11 pixels short of the target. Text is baselined at box y plus half the height plus 0.35 times the font size, and has 10 pixels of clearance from a straight connector and 15 from a curve.

Fonts are 16-pixel titles, 12-pixel box text and 10-pixel annotations, over a stack that keeps Noto Sans CJK SC so a Linux render does not fall back to blank tiles. Colours are five semantic fill, stroke and text triples applied through presentation attributes, with no CSS classes and no media queries. Every diagram paints a white canvas rectangle as the first element, so a light diagram stays readable when it is embedded in a GitHub dark-theme README.

The linter, and its 12 checks

svg-lint reads the finished SVG and reports what the house style forbids, according to the README. The 12 checks cover XML escaping, viewBox clipping, the font stack, box height, baseline offset, block spacing, arrow markers, text overflow, overlap, the light-background fallback, palette conformance and connector geometry. A thirteenth identifier, document-model, does not itself raise findings, and is how the model layer reports what it could not read, so the geometry checks never draw conclusions from coordinates they got wrong.

The README shows a broken example: a two-line SVG missing a font stack, missing the canvas rectangle, using an unescaped &, an off-palette fill, and viewBox margins outside the 20 to 25 range. The linter reports three errors and seven warnings and exits 1, and each finding carries the identifier of the check that raised it and a repair line that names the value it found and the value it should have. "Zero errors, zero warnings" is the only pass, and a warning counts as a failure.

Bybit publishes ten example diagrams in the repository, all drawn under the skill and all lint clean, each one there to demonstrate a specific rule.

Source

• svg-diagram on GitHub