Guide · Agent skill
How to use the Blueprint Figure SVG Drawer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The blueprint-figure skill lets an AI agent draw one static SVG diagram that explains one mechanism of a real system, such as a sequence of calls, a state machine or a data flow. It is for course authors, documentation writers and developers who want figures that use real names from a log, capture, spec or source file and follow one consistent visual style. After this guide you will know what the skill does, how to install it, how to ask for a figure and what to check in the result.
Blueprint Figure SVG Drawerrohitg00/ai-engineering-from-scratch · MIT Download the skill Quick start
- 1Download the ZIP. Download the blueprint-figure skill ZIP from the directory page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Check Node.js. Make sure Node.js is installed, since the skill runs templates/figure.mjs.
- 5Ask for a figure. Make a plain request such as draw a sequence figure, and name the capture, log or source file that has the real names.
- 6Review the output. Check that the script ran, the checks in references/checks.md pass, and the figure reads clearly when rendered to PNG.
What is an agent skill?
An agent skill is a folder that holds a SKILL.md file with instructions, plus any supporting files the agent may read or run. When a skill is installed, the agent can load it when your request matches the skill's trigger phrases, so it follows the skill's method instead of improvising.
The blueprint-figure skill is one such folder. Its main file is SKILL.md, and it also includes reference files for checks, grammar and figure kinds, and a script at templates/figure.mjs.
What the skill makes the agent do
The agent produces a single static SVG figure. Each figure shows one claim about the system, and the skill asks the agent to write that claim first, in one sentence of at most 28 words.
The skill sets a fixed look: a light paper panel, a small set of hues with fixed meanings (rose for failure, grey for things outside the subject, amber for lifecycle, teal for durable state), standard arrow styles, and minimum text sizes of 11 units at 640 units wide. The agent picks one of nine figure kinds: sequence, structure, flow, comparison, timeline, tree, state, decision or layers.
The agent runs the script to generate the SVG, and the script stops on labels that are too small, too wide or outside the figure. The agent then runs the checks in references/checks.md and renders the SVG to PNG for a visual check.
Install the skill
Option one: download the ZIP of the skill from this page and unzip it into your personal skills folder, ~/.claude/skills/. Option two: unzip it into a project's .claude/skills/ folder so that only that project uses it.
Option three: in the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill from there.
- Personal folder: ~/.claude/skills/
- Project folder: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
Requirements
The skill needs Node.js to run templates/figure.mjs. It also needs a rendering tool that converts SVG to PNG for the visual check, such as a browser or an image converter. The source does not name a specific tool, so choose one you already have.
The skill runs scripts and does not use the network, according to its listing.
- Node.js, to run templates/figure.mjs
- A tool that converts SVG to PNG for the visual check
- Runs scripts: yes. Uses network: no.
Trigger the skill with natural requests
You do not need a special command. Ask in plain words. The skill's trigger phrases include "draw a figure", "blueprint figure", "sequence figure", "state machine figure", "figure for this lesson" and "add a diagram to the manual".
Give the agent the real source of the names as well. A request works better when it points to a capture, log, spec or code file, because the skill asks for real names and will not draw generic boxes such as "Component A".
- Draw a sequence figure of the calls in capture/out/session.txt
- Make a state machine figure for the task lifecycle in src/tasks.ts
- Add a diagram to the manual showing how the cache layers hand off data
Example: a state figure for a lesson
Suppose you have a file that lists the states a task can enter. Ask the agent for a state figure of that lifecycle. The skill will write the claim, choose the state kind, draw the transitions with the arrow styles, run its script and check the labels.
The skill also asks for a caption in the page: the bold claim first, then how to read the figure, then the source file.
draw a state figure for the task lifecycle in capture/out/task-states.txtSafety notes: scripts and network
The skill runs a script, templates/figure.mjs, to generate the SVG. Read the script before you let the agent run it in a sensitive project, as you would with any script. The skill's listing says it does not use the network.
The generated SVG is restricted by the skill's rules. It must not contain scripts, event handlers, links or images, and it must be at most 40 KB.
- Review templates/figure.mjs before first use
- Expect no network use from the skill
- The SVG contains no scripts, event handlers, links or images
Tips for better figures
Keep one claim per figure. If two kinds fit the claim, the skill suggests drawing two figures. Give real names and the source file, and do not ask the skill to compare with an earlier build of your own project.
Check the result at 100% and at 50% width, as the skill recommends, so you can see that labels stay readable on screen and in print.
- Use one claim per figure
- Name the source file in your request
- Do not use it for animated or interactive figures, or for numeric charts
What people use it for
- Drawing a sequence figure of calls from a capture for a course lesson
- Making a state machine figure of a task lifecycle for documentation
- Producing a data flow figure for a README that must stay readable in print
- Adding a layers figure to a manual that shows which part of a system owns each layer
Frequently asked questions
How do I install the blueprint-figure skill?
Download the ZIP from the directory page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, Capabilities, then Skills.
What do I need to run the blueprint-figure skill?
You need Node.js to run templates/figure.mjs, and a tool that converts SVG to PNG for the visual check. The source does not name a specific rendering tool.
Is the blueprint-figure skill free?
The skill is listed under the MIT licence. The source does not state any price, so check the licence file in the repository for the terms.
Does blueprint-figure make animated or interactive diagrams?
No. It produces only static SVG. The skill points animated or slider-driven figures to a sibling skill called motion-figure.
Why does the skill ask for a capture or source file first?
The skill draws real names from the system, such as field names, method names and sequence numbers. Without them it would draw generic boxes, so it asks for a capture, log, spec or source first.
Can I use blueprint-figure for a chart of numbers?
No. The skill directs charts of numeric data over many points to a chart tool.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use blueprint-figure if you write course material or documentation and want static SVG diagrams that use real system names and a consistent house style. Pick something else if you need animated or interactive figures, numeric charts, or diagrams of a system whose real names you cannot get.
Download the skill