skill

diagrammer — Claude Code skill: what it does, how to install

Q: How do I install diagrammer in Claude Code?

Run `npx claude-code-templates@latest --skill creative-design/diagrammer` in your terminal. You can also install it via `npx skills add davila7/claude-code-templates --skill diagrammer -a claude-code` or link `~/.claude/skills/diagrammer/SKILL.md`.

Q: What external dependencies does diagrammer require?

You need the rendering CLI on your machine via `pipx install diagrammer`. The skill creates the JSON spec, but the binary compiles it into SVG.

Turns plain-text prompts into blueprint-styled SVG charts via JSON specs. Helpful when documentation or slide decks require clean vector visuals.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill creative-design/diagrammer

Open on GitHub

What diagrammer does

The skill lets Claude Code build technical vector diagrams directly inside your workspace. You describe an architecture in plain words. The agent structures it into a JSON object with nodes and edges, supporting shapes like box, database, circle, and stack.

Actual rendering depends on the local CLI installed with pipx install diagrammer. The agent writes the JSON spec to disk and streams the rendered output into an .svg file. Without that tool, SVG generation fails.

This setup targets clean checked-in SVG assets for repositories. If your workflow relies on native Mermaid markdown or editable Excalidraw canvases, choose those instead.

What it helps with

render backend architecture schemes directly to SVG
sketch a request routing pipeline between client and database
visualize state machine transitions for project docs
diagram a neural network layout for technical slides

Example prompts for the agent

Draw an SVG architecture diagram with a client, API gateway, and Postgres database
Create a blueprint SVG showing our data processing pipeline for the README
Sketch a state machine diagram for the order checkout process

How to install diagrammer

1claude-code-templates

npx claude-code-templates@latest --skill creative-design/diagrammer

2Skills CLI (Vercel)

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

3Manually: put the files in place

~/.claude/skills/diagrammer/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/diagrammer/

Manually: put the files in place

.agents/skills/diagrammer/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/diagrammer/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates diagrammer

2Manually: put the files in place

.github/skills/diagrammer/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/diagrammer

Manually: put the files in place

.devin/skills/diagrammer/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about diagrammer

How do I install diagrammer in Claude Code?

Run npx claude-code-templates@latest --skill creative-design/diagrammer in your terminal. You can also install it via npx skills add davila7/claude-code-templates --skill diagrammer -a claude-code or link ~/.claude/skills/diagrammer/SKILL.md.

What external dependencies does diagrammer require?

You need the rendering CLI on your machine via pipx install diagrammer. The skill creates the JSON spec, but the binary compiles it into SVG.

When should I choose diagrammer over Mermaid?

Use diagrammer when you need a standalone vector SVG file committed to version control. If your markdown platform renders Mermaid blocks natively, stick with Mermaid.

Similar skills

Everything for Design →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set740

The whole set →

sync-migration-assistant A slash command that migrates issues between GitHub and Linear with validation and rollback. Useful when a project changes trackers. 120installs svelte-storybook Get help setting up Storybook in SvelteKit, writing component stories, and working through configuration issues. It can also review an existing setup. 120installs svelte-migrate Plan Svelte and SvelteKit upgrades, adopt runes, and work through breaking changes with this Claude Code command. 120installs screenshot Takes a picture of the whole screen, a single app window or a pixel region when the agent has no built-in capture route for the task. 119installs svelte-storybook-setup Sets up Storybook for SvelteKit projects with framework settings, addons, story folders, and npm scripts. 119installs twilio-communications Provides Claude Code with structured Python patterns for Twilio SMS messaging, Twilio Verify authentication, and interactive TwiML voice menus. 118installs svelte-test-setup Set up test infrastructure for Svelte and SvelteKit, with Vitest for unit and component checks and Playwright for end-to-end tests. 118installs svelte-storybook-troubleshoot A slash command that walks through common Storybook breakages in SvelteKit projects: build errors, unresolved modules, addon conflicts. 118installs