Svg Diagram
Agent skill that draws architecture, flowchart, sequence, data-flow and lifecycle diagrams as hand-placed SVG, to one linted house style.
Install
npx skills add bybit-exchange/svg-diagram -gclaude mcp add svg-diagram -- npx skills add bybit-exchange/svg-diagram -g{
"mcpServers": {
"svg-diagram": {
"command": "npx",
"args": [
"skills",
"add",
"bybit-exchange/svg-diagram",
"-g"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →svg-diagram
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.
Install
Paste this to your coding agent:
Install the svg-diagram skill from https://github.com/bybit-exchange/svg-diagram
for me by running: npx skills add bybit-exchange/svg-diagram -g
Or run it yourself:
npx skills add bybit-exchange/svg-diagram -g
The CLI detects which agents you have installed and writes each one's path. Drop -g to install into the current project instead.
| Surface | Path |
|---|---|
| Claude Code | ~/.claude/skills/svg-diagram/ |
| Codex, Cursor, Gemini CLI, Copilot, opencode, Antigravity | ~/.agents/skills/svg-diagram/ — they share one directory |
| Pi | ~/.pi/skills/svg-diagram/ |
| Windsurf, Continue, Roo, Goose, Kiro, Trae and 40+ more | ~/./skills/svg-diagram/ |
| Claude.ai | Zip the folder and upload it under Settings → Capabilities → Skills (skill text only — svg-lint needs local Node) |
Every path is named from the skill's frontmatter name, not from where the skill sits here, so moving files in this repository doesn't change them.
SKILL.md is at the repository root, so the install copies the root and svg-lint comes along with the skill text. The linter has no dependencies, so it runs from wherever it landed:
node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg
If you only want the skill text, take the one file the agent reads:
mkdir -p ~/.claude/skills/svg-diagram
curl -fsSL https://raw.githubusercontent.com/bybit-exchange/svg-diagram/main/SKILL.md \
-o ~/.claude/skills/svg-diagram/SKILL.md
The skill works on its own that way; svg-lint is what you give up.
Then start a new session and ask for a diagram — the agent should announce that it's using svg-diagram.
Gallery
Ten diagrams, all drawn under this skill and all lint clean. Each one is here for the rule it demonstrates.
How an agent loads a skill
Two dashed containers side by side. Connectors cross the channel between them, and a colour change marks the point where a request matches.
The authoring loop
A cross-layer loop-back line, painted after the boxes so they don't cover it.
Where the lint gate sits
A self-call that leaves its lifeline and curves back to it, its second control point sharing the end point's y so the arrowhead closes level and points at the participant rather than down the lifeline.
From a data API to a document figure
CJK labels sized from the CJK column of the width table — one full font size per character, 12px rather than 7.
The life of a skill in this repo
One semantic colour triple per state. Each forward arrow carries the colour of the state it leaves.
What's in this repository
A dashed border only where the contents are actually drawn — gallery/ and assets/ are directories too, but their members aren't in the figure, so they stay plain boxes.
One command, every agent
A one-to-many fan-out whose branch curves keep each second control point level with the end point, so every arrowhead lands pointing right.
Why the font stack cannot be dropped
A contrast pair built from two semantic triples: the working paths in green, the branch that fails in pink.
Tiered model routing behind one gateway
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
