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.
Use diagrammer in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add diagrammer and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the diagrammer skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
No other account needed.
Have an agent setup that supports loading skills.
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
- Oct 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
github.com/davila7/claude-code-templates
Related picks
Skill · thedaviddias
The pick for Svgfigure.create_svg
Skill · causify-ai
The pick for Svghandoff
Skill · mattpocock
More in Docs & knowledgecanvas-design
Skill · anthropics
More in Docs & knowledgedoc-coauthoring
Skill · anthropics
More in Docs & knowledgewriting-for-agents
Skill · mattpocock
More in Docs & knowledge