svg-diagram

Install

npx skillfoxx add skills/svg-diagram

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a claude-code -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a cursor -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a github-copilot -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a codex -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a gemini-cli -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a cline -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a roo -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a opencode -y

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

This is third-party code. Review the repository files before installing.

What it does

The skill gives the agent one house style for drawing diagrams straight in SVG: the layout arithmetic, the color system and CJK-friendly typography. The agent computes box height, spacing, arrow clearance and label placement so elements do not overlap and text is not cut by a frame. It ships svg-lint, a zero-dependency linter that reads the finished SVG and checks it against twelve rules: escaping, viewBox margins, the font stack, connector geometry and more. Each finding names the problem and the exact fix.

Who it is for. For developers and technical writers who need clean diagrams in docs and READMEs.

Example request

Draw an architecture diagram of the service as SVG in the svg-diagram style and check it with the linter

Limitations

The svg-lint linter is a manual tool; nothing runs it for you, so call it before handing a diagram over. A diagram carries one color set and paints a white canvas so it reads on a dark theme, which is not theme switching. Running the linter needs Node, though it has no dependencies.

How to disable. Remove the svg-diagram folder from the agent skills directory.

Security check

• The skill is instructions plus a local linter that only reads SVG

README in short

The README describes one house style for hand-written SVG diagrams: layout arithmetic, colors, typography and a zero-dependency linter. It shows a gallery of ten diagrams, each demonstrating a specific rule. Installation is via the skills CLI, with a path that takes only the skill text without the linter. The svg-lint linter reads the finished SVG and reports violations with the exact fix. MIT licensed.

SKILL.md

---
name: svg-diagram
description: SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context.
---

# SVG Diagramming Conventions

## Output location and referencing

> Diagrams go in SVG, never ASCII art. That rule decides *whether* to draw; this skill covers *how*, starting with where the file lands.

- Put the file in an `assets/` directory next to the document (e.g. `docs/foo.md` -> `docs/assets/foo-arch.svg`)
- Reference it from markdown with a relative path, `![title](assets/xxx.svg)`. Do not inline SVG XML.

Related