diagrammer
SkillDocs & knowledgeDiagrammer is a skill that renders blueprint-style SVG diagrams from JSON specs. It suits an agent that needs to draw request flows, neural nets, transformer blocks, system architectures, state machines, or data pipelines as node-and-edge visuals for docs, READMEs, posts, or slides.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent setup that supports loading skills.
Then ask your AI: use the diagrammer skill
What your AI can do with it
- Render blueprint-style SVG diagrams from JSON specs
- Draw request flows and data pipelines as node-and-edge visuals
- Diagram neural nets and transformer blocks
- Sketch system architectures and state machines
- Produce SVG output suitable for docs, READMEs, posts, or slides
Getting started
- Have an agent setup that supports loading skills.
- Add the diagrammer skill to your available skills.
- Describe the diagram you want in JSON, such as nodes and edges for a flowchart or architecture.
- Ask the agent to draw, sketch, or diagram it, and use the resulting SVG in your docs or slides.
What this skill tells your AI
The instructions your AI receives, as published by davila7/claude-code-templates in cli-tool/components/skills/creative-design/diagrammer/SKILL.md and read by ahel’s review.
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 diagrammer
Workflow
- 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 prompt
When 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.
Signals
- GitHub stars
- 32k
- Forks
- 4k
- Last commit
- Sep 2026
Questions
- What kinds of diagrams can it make?
- Blueprint-style SVG diagrams such as request flows, neural nets, transformer blocks, system architectures, state machines, data pipelines, and other node-and-edge technical visuals.
- What input does it take?
- A JSON spec describing the diagram you want rendered.
- What output format does it produce?
- SVG.
- When should the agent use it?
- When a user asks to draw, sketch, or diagram a technical visual they want as an SVG for docs, READMEs, posts, or slides.
Advanced
- Item type
- skill
- Key
diagrammer- Source
- github.com/davila7/claude-code-templates