Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
davila7 avatar

Diagrammer

  • 11 installs
  • 30.1k repo stars
  • Updated August 4, 2026
  • davila7/claude-code-templates

Render clean blueprint-style SVG diagrams from a small JSON spec for request flows, architectures, state machines, data pipelines, and neural nets.

About

Converts a plain-English diagram request into a JSON node-and-edge spec and renders it to an SVG via the local diagrammer tool. A developer uses it to produce precise technical diagrams for docs, READMEs, posts, or slides without a design tool.

  • JSON spec of nodes and edges rendered to SVG
  • Covers architectures, state machines, pipelines, and neural nets

Diagrammer by the numbers

  • 11 all-time installs (skills.sh)
  • Ranked #1,126 of 1,879 Documentation skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/davila7/claude-code-templates --skill diagrammer

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs11
repo stars30.1k
Last updatedAugust 4, 2026
Repositorydavila7/claude-code-templates

What it does

Render clean blueprint-style SVG diagrams from a small JSON spec for request flows, architectures, state machines, data pipelines, and neural nets.

Files

SKILL.mdMarkdownGitHub ↗

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

4. 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.

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.