
Diagrammer
- 11 installs
- 30.1k repo stars
- Updated August 4, 2026
- davila7/claude-code-templates
Render clean blueprint-style SVG diagrams from a small JSON spec for request flows, architectures, state machines, data pipelines, and neural nets.
About
Converts a plain-English diagram request into a JSON node-and-edge spec and renders it to an SVG via the local diagrammer tool. A developer uses it to produce precise technical diagrams for docs, READMEs, posts, or slides without a design tool.
- JSON spec of nodes and edges rendered to SVG
- Covers architectures, state machines, pipelines, and neural nets
Diagrammer by the numbers
- 11 all-time installs (skills.sh)
- Ranked #1,126 of 1,879 Documentation skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/davila7/claude-code-templates --skill diagrammerAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 11 |
|---|---|
| repo stars | ★ 30.1k |
| Last updated | August 4, 2026 |
| Repository | davila7/claude-code-templates ↗ |
What it does
Render clean blueprint-style SVG diagrams from a small JSON spec for request flows, architectures, state machines, data pipelines, and neural nets.
Files
diagrammer
Use diagrammer to turn a small JSON spec into a clean SVG diagram. It is useful when the user wants a precise technical diagram without opening a design tool.
Install
The renderer must be installed locally:
pipx install diagrammerWorkflow
1. Convert the user's plain-English diagram request into a JSON spec. 2. Save the spec to a temporary or project file. 3. Render it:
diagrammer path/to/spec.json > path/to/diagram.svg4. Return the SVG path to the user.
Spec Essentials
{
"nodes": [
{"id": "client", "type": "box", "label": "client"},
{"id": "api", "type": "box", "label": "api"},
{"id": "db", "type": "database", "label": "postgres"}
],
"edges": [
{"from": "client", "to": "api", "label": "request"},
{"from": "api", "to": "db", "label": "query"}
]
}Built-in node types: box, circle, text, database, stack, group, note, and custom.
Useful optional fields:
direction:"LR"or"TB"router:"straight"or"ortho"labelon edgesstyle:"solid"or"dashed"weight:"thin"or"thick"
For the full reference, run:
diagrammer promptWhen To Choose This
Use diagrammer when the output should be a checked-in SVG artifact, especially for:
- README diagrams
- architecture sketches
- request flows
- state machines
- neural-net or transformer diagrams
- simple data pipelines
Prefer Mermaid when the user specifically asks for Mermaid syntax or wants diagrams rendered by a Markdown platform. Prefer Excalidraw when the user wants editable hand-drawn canvas files.