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.
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.
The renderer must be installed locally:
pipx install diagrammer
diagrammer path/to/spec.json > path/to/diagram.svg
{
"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"label on edgesstyle: "solid" or "dashed"weight: "thin" or "thick"For the full reference, run:
diagrammer prompt
Use diagrammer when the output should be a checked-in SVG artifact, especially for:
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.
Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/diagrammer · pinned to the source commit
# Run from your project root
git clone https://github.com/davila7/claude-code-templates.git .skillboard-tmp
git -C .skillboard-tmp checkout 5cc17cf267132cc690dee82239b80a99ec82e4f8
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/cli-tool/components/skills/creative-design/diagrammer" ".claude/skills/"
rm -rf .skillboard-tmpReview the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
sudo apt update && sudo apt install -y gitnpm install -g @anthropic-ai/claude-code# Run from your project root
git clone https://github.com/davila7/claude-code-templates.git .skillboard-tmp
git -C .skillboard-tmp checkout 5cc17cf267132cc690dee82239b80a99ec82e4f8
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/cli-tool/components/skills/creative-design/diagrammer" ".claude/skills/"
rm -rf .skillboard-tmpDestination: .claude/skills/diagrammer
Scanner static-checks@0.1.0 · commit 5cc17cf26713. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.