New to Claude Skills? Learn how to install them →

davila7 on GitHub

Diagrammer

Free

Transform JSON specs into clean SVG diagrams.

Get this skill

Free · Opens the source repo

What Diagrammer does

Diagrammer is a tool designed for developers and designers who need to quickly create technical diagrams without the overhead of traditional design software. By converting a concise JSON specification into a clean SVG diagram, it streamlines the process of visualizing complex concepts such as system architectures, request flows, and data pipelines. This allows users to focus on their technical content rather than getting bogged down in design details.

The workflow is straightforward: users first convert their diagram requests into a JSON format that describes the nodes and edges of the diagram. The nodes can represent various elements like boxes, circles, or databases, while edges define the relationships between these elements. Once the JSON spec is prepared, it can be rendered into an SVG file with a simple command. This SVG can then be easily integrated into documentation, READMEs, or presentations, ensuring that technical visuals are both accurate and professional.

Diagrammer is particularly useful for generating diagrams that need to be version-controlled or included in collaborative projects. By producing SVG files, it ensures high-quality visuals that maintain their clarity at any size. This makes it ideal for use cases such as architecture sketches, state machines, and neural network representations. The tool is designed to cater to the needs of technical professionals who require precise visual representations without the complexity of full-fledged design applications.

However, it is important to note that Diagrammer is not suited for scenarios where users need interactive or editable diagrams, such as those created with tools like Excalidraw. For users specifically requesting Mermaid syntax or integration with Markdown platforms, alternative tools may be more appropriate. Overall, Diagrammer serves as an efficient solution for creating technical diagrams in a streamlined manner.

When to use it

Use Diagrammer when you need to generate SVG diagrams for documentation or presentations based on technical specifications.

When not to use it

Avoid Diagrammer if you require interactive diagrams or if the user specifically requests Mermaid or Excalidraw formats.

What you can build with it

Creating Architecture Diagrams

Use Diagrammer to visualize system architectures by defining nodes for services and databases, and edges for their interactions.

Documenting Request Flows

Generate clear request flow diagrams that illustrate how data moves through your application, making it easier for teams to understand.

Visualizing Data Pipelines

Quickly create diagrams that represent data pipelines, helping to clarify the flow of data from sources to destinations.

How to install Diagrammer

View source

1. Install with the skills CLI

npx skills add davila7/claude-code-templates/diagrammer --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by davila7

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.

Frequently asked questions about Diagrammer

Similar skills