SVG Blueprint Generator

Diagrammer

by davila7 · MIT license · ★ 32,299 on GitHub

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…

---
name: diagrammer
description: 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.
---

# 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:

```bash
pipx install diagrammer
```

## Workflow

Overview

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.

Manual install (npx, ZIP)

Claude Codenpx skills add davila7/claude-code-templates --skill diagrammer -g -a claude-code

Claude Code (degit)

npx degit davila7/claude-code-templates/cli-tool/components/skills/creative-design/diagrammer#main ~/.claude/skills/diagrammer

Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md1.9 KB

Read SKILL.md here

davila7/main1 file shown

SKILL.md1.9 KB

Browse every file on GitHub↗

SKILL.md

Show the full text74 lines

diagrammer/SKILL.md74 lines · 1.9 KB

PreviewCode

Outline

RawView on GitHub

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 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"
label on edges
style: "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.

1	---
2	name: diagrammer
3	description: 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.
4	---
5
6	# diagrammer
7
8	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.
9
10	## Install
11
12	The renderer must be installed locally:
13
14	```bash
15	pipx install diagrammer
16	```
17
18	## Workflow
19
20	1. Convert the user's plain-English diagram request into a JSON spec.
21	2. Save the spec to a temporary or project file.
22	3. Render it:
23
24	```bash
25	diagrammer path/to/spec.json > path/to/diagram.svg
26	```
27
28	4. Return the SVG path to the user.
29
30	## Spec Essentials
31
32	```json
33	{
34	"nodes": [
35	{"id": "client", "type": "box", "label": "client"},
36	{"id": "api", "type": "box", "label": "api"},
37	{"id": "db", "type": "database", "label": "postgres"}
38	],
39	"edges": [
40	{"from": "client", "to": "api", "label": "request"},
41	{"from": "api", "to": "db", "label": "query"}
42	]
43	}
44	```
45
46	Built-in node types: `box`, `circle`, `text`, `database`, `stack`, `group`, `note`, and `custom`.
47
48	Useful optional fields:
49
50	- `direction`: `"LR"` or `"TB"`
51	- `router`: `"straight"` or `"ortho"`
52	- `label` on edges
53	- `style`: `"solid"` or `"dashed"`
54	- `weight`: `"thin"` or `"thick"`
55
56	For the full reference, run:
57
58	```bash
59	diagrammer prompt
60	```
61
62	## When To Choose This
63
64	Use `diagrammer` when the output should be a checked-in SVG artifact, especially for:
65
66	- README diagrams
67	- architecture sketches
68	- request flows
69	- state machines
70	- neural-net or transformer diagrams
71	- simple data pipelines
72
73	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.
74