Agent skill · design visual · davila7
diagrammer
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.
Why this skill is useful
Adds a specific tool for generating SVG diagrams from JSON specs, which the AI wouldn't reliably generate on its own.
What it needs
Requires diagrammer installed locally. About 1k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
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: 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: 4. Return the SVG path to the user. Spec Essentials 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: 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/diagrammer