Diagrammer
Render clean blueprint-style SVG diagrams from JSON specs. Use when users ask to draw, sketch, or diagram a request flow, neural net, transformer block, system architecture, state machine, data pipeline, or any node-and-edge technical visual they want as an SVG for docs, READMEs, posts, or slides.
npx claude-code-templates@latest --skill creative-design/diagrammer Scanned by NVIDIA SkillSpector
Automated static analysis (no LLM) · v2.12.0 · 2026-10-17
Partial analysis: some checks could not run on this component.
SkillSpector looks for patterns such as shell commands, credential access, network calls or unpinned dependencies. An observation is something worth reading in the files before you install, not a confirmed vulnerability. Components that run code locally, like hooks, MCP servers and security tooling, naturally show more of them.
No observations.
Learn more about NVIDIA SkillSpector.
Content
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
- Convert the user's plain-English diagram request into a JSON spec.
- Save the spec to a temporary or project file.
- Render it:
diagrammer path/to/spec.json > path/to/diagram.svg- 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.