New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Diagrammer

by davila7 in davila7/claude-code-templates

Render clean blueprint-style SVG diagrams from JSON specs. An agent skill from davila7/claude-code-templates.

MITAuto-check passedDevelopment

Install Diagrammer

skills CLI
$ npx skills add davila7/claude-code-templates --skill diagrammer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install davila7/claude-code-templates diagrammer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cli-tool/components/skills/creative-design/diagrammer .claude/skills/diagrammer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
diagrammer
GitHub stars
33k
Token cost
~494 tokens
SKILL.md length
171 words
Files
1
Skills in repo
479
Repo updated
First seen
Licence
MIT

At a glance

Render clean blueprint-style SVG diagrams from JSON specs. An agent skill from davila7/claude-code-templates.

  • Works in 4 steps: Convert the user's plain-English diagram… → Save the spec to a temporary or project… → Render it → …
  • Users ask to draw
  • SKILL.md covers Install, Workflow, Spec Essentials and When To Choose This
  • Calls pipx

What it does

Diagrammer is an agent skill from davila7/claude-code-templates. 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.

Its SKILL.md is about 490 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Diagrams, Data pipelines and ETL and Technical documentation. The repository describes itself as: CLI tool for configuring and monitoring Claude Code. The licence is MIT.

When your agent uses it

  • Users ask to draw
  • Diagram a request flow
  • Transformer block
  • System architecture

Example prompts

  • “/diagrammer”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  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
  4. Return the SVG path to the user.

What it can do on your machine

Read from SKILL.md and the folder at commit c0ca7da. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pipx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pipx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Diagrammer loads about 494 tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 171 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~77
When it runs · the whole SKILL.md, loaded when a task matches
~494

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from davila7/claude-code-templates at commit c0ca7da, republished under its MIT licence (© davila7). 171 words, ~494 tokens.

Download SKILL.mdSave it as .claude/skills/diagrammer/SKILL.md (or your agent's skills folder).
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

  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:
bash
diagrammer path/to/spec.json > path/to/diagram.svg
  1. Return the SVG path to the user.

Spec Essentials

json
{
  "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:

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

© davila7, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in cli-tool/components/skills/creative-design/diagrammer of davila7/claude-code-templates.

Open the folder on GitHubat commit c0ca7da

Compare with similar skills

Diagrammer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Diagrammer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Diagrammer this skilldavila7/claude-code-templates33k—~494Automated safety check: PassMIT
Visual Explainernicobailon/visual-explainer10k—~3.5kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT
Archifymolvqingtai/WebChat2.6k—~5.6kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Dark Architecture Diagram BuilderCocoon-AI/architecture-diagram-generator7.4k1 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • Visual Explainer

    nicobailon/visual-explainer

    Turns systems, code changes, plans and data into self-contained HTML pages where figures carry the explanation, with options for slide decks and narrated MP4 videos.

    10k GitHub stars~3.5k tokensUpdated today
    Media & CreativeAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed

  • Archify

    molvqingtai/WebChat

    Create professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as standalone HTML files with SVG graphics, a built-in dark/light theme toggle, and one-click export to…

    2.6k GitHub stars~5.6k tokensUpdated 28 days ago
    DevelopmentAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check: notes

  • Dark Architecture Diagram Builder

    Cocoon-AI/architecture-diagram-generator

    Creates dark-themed system, cloud, security and network architecture diagrams as self-contained HTML files with inline SVG and CSS.

    7.4k GitHub starsUsed in 1 repo~2.1k tokens
    DevelopmentAuto-check passed

  • Pretty Mermaid Renderer

    imxv/Pretty-mermaid-skills

    Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.

    1.5k GitHub stars~2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

More from davila7/claude-code-templates

All 479 skills in this repo

  • Perplexity Web Search

    davila7/claude-code-templates

    Runs web-grounded searches through Perplexity's Sonar models over OpenRouter for current events, recent literature and cited facts beyond the model's training cutoff.

    33k GitHub starsUsed in 11 repos~3.5k tokens
    Auto-check: notes

  • Neuropixels Data Analysis

    davila7/claude-code-templates

    Analyzes Neuropixels recordings from SpikeGLX or Open Ephys through preprocessing, drift correction, Kilosort4 spike sorting, quality metrics and curation.

    33k GitHub starsUsed in 9 repos~2.8k tokens
    Auto-check passed

  • Scientific Venue Templates

    davila7/claude-code-templates

    Supplies LaTeX templates and formatting rules for journals, conferences, posters, and grant proposals, then can check a draft against them.

    33k GitHub starsUsed in 9 repos~5.1k tokens
    Auto-check: notes

  • Brand Voice Content Creator

    davila7/claude-code-templates

    Analyzes a brand's existing writing to lock in a consistent voice, then builds SEO blog posts and platform-specific social content around it.

    33k GitHub starsUsed in 3 repos~1.9k tokens
    Auto-check passed

  • CAPA Officer

    davila7/claude-code-templates

    Guides corrective and preventive action (CAPA) work in a quality management system, from initiation and root cause analysis through effectiveness verification.

    33k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Fda Consultant Specialist

    davila7/claude-code-templates

    Senior FDA consultant and specialist for medical device companies including HIPAA compliance and requirement management.

    33k GitHub starsUsed in 1 repo~2.7k tokens
    Auto-check passed

Categories

Questions about Diagrammer

What does Diagrammer do?

Render clean blueprint-style SVG diagrams from JSON specs. An agent skill from davila7/claude-code-templates. Diagrammer is an agent skill from davila7/claude-code-templates. Render clean blueprint-style SVG diagrams from JSON specs.

When should I use Diagrammer?

Diagrammer fits situations like: users ask to draw; diagram a request flow; transformer block; system architecture.

How do I install Diagrammer in Claude Code?

Run `npx skills add davila7/claude-code-templates --skill diagrammer -a claude-code`. Or copy the skill folder (cli-tool/components/skills/creative-design/diagrammer in davila7/claude-code-templates) into .claude/skills/diagrammer in your project. Claude Code loads it when a task matches its description.

How do I install Diagrammer in Codex?

Run `npx skills add davila7/claude-code-templates --skill diagrammer -a codex`. Or copy the skill folder (cli-tool/components/skills/creative-design/diagrammer in davila7/claude-code-templates) into .agents/skills/diagrammer in your project. Codex loads it when a task matches its description.

Can I use Diagrammer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add davila7/claude-code-templates --skill diagrammer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/diagrammer, .gemini/skills/diagrammer, .github/skills/diagrammer and .opencode/skills/diagrammer in your project.

What does Diagrammer need to run?

Going by SKILL.md and its folder, Diagrammer needs the command-line tools its instructions call (pipx).

Does Diagrammer access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Diagrammer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Diagrammer use?

Diagrammer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Diagrammer use?

About 494 tokens (SKILL.md is roughly 2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Diagrammer?

Skills that share tags, products or a category with Diagrammer: Visual Explainer (nicobailon/visual-explainer, 10k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars), Archify (molvqingtai/WebChat, 2.6k stars) and Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Diagrammer?

davila7 (a GitHub user) maintains it in davila7/claude-code-templates, which has 32,512 GitHub stars. The repository holds 479 skills in this directory. The repository was last updated on October 10, 2026.

Source: davila7/claude-code-templates on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.