svg-diagram skill
Skill that draws architecture, flowchart and sequence diagrams as hand-placed SVG in one house style
- 671 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill is instructions plus a local linter that only reads SVG
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/svg-diagramDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill is instructions plus a local linter that only reads SVG
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.
Good fit when
- You need an architecture diagram or flowchart in the docs
- You need a sequence or data-flow diagram as SVG
- You need one diagram style that a linter checks
Not a fit when
- A text diagram like Mermaid is enough, without hand-placed SVG
- You need an interactive diagram with logic, not a static SVG
Example request
Draw an architecture diagram of the service as SVG in the svg-diagram style and check it with the linterLimitations
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.
FAQ
What does the linter check?
Twelve rules: XML escaping, viewBox clipping, the font stack, box height, baseline offset, spacing, arrow markers, text overflow, overlap, the canvas fallback, palette conformance and connector geometry. A pass is only zero errors and zero warnings.
Is the linter required to use the skill?
No, the skill text works without it, but the linter is the proof that a diagram was built to the house style.
Discussion
No questions or reviews yet.
Related
SkillsFireworks Tech Graph
fireworks-tech-graph
A skill that builds technical SVG diagrams from a text description: architecture, UML, agent and cloud schemes, with PNG and GIF export
A skill that renders a system architecture as one HTML page with pan, zoom, node focus and a light or dark theme.
A skill that replaces terminal ASCII with self-contained HTML pages: diagrams, diff reviews, plan reviews, tables and slide decks
stack-diagram is an architecture-diagram skill that embeds logos and fonts in HTML, so the finished file opens offline.
A skill that turns code into interactive diagrams: eleven types, source-line evidence and a single offline HTML file.
A skill and CLI that draw architecture diagrams from Prisma, OpenAPI, GraphQL and code, and check the docs in CI for drift from the code
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.
README badge
Original 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, ``. Do not inline SVG XML.