svg-diagram

An agent skill for creating consistent hand-placed SVG diagrams. It helps coding agents produce architecture, flowchart, sequence, data-flow, and lifecycle diagrams and check them with a local linter.

Share on XLicense: MIT

Overview

svg-diagram is an agent skill for creating architecture, flowchart, sequence, data-flow, and lifecycle diagrams as hand-placed SVG. It gives coding agents layout arithmetic and a consistent color system, so diagrams follow one house style rather than relying on automatic layout. A zero-dependency Node.js linter checks the resulting SVG against 12 rules. Install the skill for a supported coding agent, ask it to make a diagram, then run svg-lint locally to check the file.

Key features

  • Creates hand-placed SVG architecture, flowchart, sequence, data-flow, and lifecycle diagrams.
  • Provides layout guidance and a consistent color system for a shared diagram style.
  • Includes a zero-dependency Node.js linter with 12 checks for SVG files.

Best for

Coding-agent users who need consistent technical diagrams for architecture or documentation. Choose it when you want hand-placed SVG and a local lint check.

Upstream
bybit-exchange/svg-diagram
Fork on GitHub
Guo-astro/svg-diagram
Upstream stars
612
Category
AI agents and LLM tools
License
MIT
Forked
2026-10-07
Sync status
In syncLast synced 2026-10-11