AgentAlley
Submit

Diagrammer skill

Render clean blueprint-style SVG diagrams from JSON specs.

by davila7·MIT license·★ 32,299 Stars on the repo·GitHub ↗

Use now

Files of Diagrammer

davila7/main1 file shown
SKILL.md
Show the full text74 lines
diagrammer/SKILL.md74 lines · 1.9 KB
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

  1. Convert the user's plain-English diagram request into a JSON spec.
  2. Save the spec to a temporary or project file.
  3. Render it:
diagrammer path/to/spec.json > path/to/diagram.svg
  1. 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---
2name: diagrammer
3description: 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 
8Use `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 
12The renderer must be installed locally:
13 
14```bash
15pipx install diagrammer
16```
17 
18## Workflow
19 
201. Convert the user's plain-English diagram request into a JSON spec.
212. Save the spec to a temporary or project file.
223. Render it:
23 
24```bash
25diagrammer path/to/spec.json > path/to/diagram.svg
26```
27 
284. 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 
46Built-in node types: `box`, `circle`, `text`, `database`, `stack`, `group`, `note`, and `custom`.
47 
48Useful 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 
56For the full reference, run:
57 
58```bash
59diagrammer prompt
60```
61 
62## When To Choose This
63 
64Use `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 
73Prefer 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 

Discussion

Browse more free Claude skills.