How to use the SVG Diagram Generator skill (baoyu-diagram)

What an agent skill is and what this one makes the agent do

An agent skill is a folder of instructions and optional scripts that an AI agent loads when a request matches the skill's description. This skill tells the agent how to produce professional, dark-themed SVG diagrams of many types: architecture diagrams, flowcharts, sequence diagrams, structural diagrams (class and ER diagrams, org charts), mind maps, timelines, illustrative diagrams and state machines.

Every output is a single self-contained .svg file with embedded styles and fonts. The skill also follows a built-in visual system: a slate-900 background with a faint grid, colour-coded component categories (for example cyan for frontend or user-facing parts, emerald for services, violet for databases), and fixed font sizes and spacing so diagrams look consistent.

Install the baoyu-diagram skill

Download the ZIP for this skill from the directory page and unzip it. For a personal setup, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder instead.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/ (available across your projects)
• Project install: .claude/skills/ inside the project folder (available only there)
• Claude apps: Settings → Capabilities → Skills, then upload

How to trigger the skill with natural requests

You do not need a special command. The skill is triggered by the kind of request you make. It responds to requests for any technical or conceptual diagram, system visualisation, process flow, data flow, component relationship, network topology, decision tree, org chart or state machine. It also responds to phrases such as "diagram", "flowchart", "sequence diagram", "draw me a ..." and the Chinese phrases 画个图 and 画一个架构图.

Describe the system or process in plain words, and say what kind of diagram you want if you know. You can also upload content and ask the agent to visualise it.

• Draw me a flowchart of how a user password reset works.
• Make an architecture diagram of our API gateway, two backend services and a Postgres database.
• Create a sequence diagram showing a login request between the browser, auth service and database.
• Visualise this state machine for an order: created, paid, shipped, refunded.

What you get back and how to use it

The result is a standalone .svg file, which opens in any web browser and most design tools. You can drop it into a document, README or pull request. If the layout needs adjusting, ask the agent to change the diagram or edit the SVG directly.

A bundled script, scripts/main.ts, can convert the SVG to PNG at a chosen scale. That conversion needs the Bun runtime and the sharp image library, as described below.

What the skill needs and safety notes

The skill itself is text instructions plus scripts. It runs scripts, so review scripts/main.ts before you trust it on a machine. It also uses the network: when a diagram is rendered, the SVG can reference a Google Fonts URL (JetBrains Mono) for typography.

That font reference matters for confidential work. If your architecture details are sensitive, be aware that viewing the SVG can make a request to Google Fonts. The PNG conversion needs Bun and sharp, but only for that optional script; the diagram generation itself does not require them according to the source.

• Runs scripts: yes (scripts/main.ts for optional SVG-to-PNG conversion)
• Uses network: yes (Google Fonts URL referenced in the SVG)
• Requires Bun runtime and the sharp image library only for PNG conversion
• Licence: MIT

Tips for better diagrams

Name each component and say what it does, because the skill uses component names and short sublabels. Say which direction the diagram should flow if it matters, for example left to right for a data pipeline or top to bottom for layered architecture.

Layout is generated from rules, so expect to tweak positions on complex diagrams. For flowcharts, describe the main happy path first and then the decisions and loops.

• Give the main path first, then branches and loop-backs.
• For architecture, group components into layers such as clients, services and data.
• Ask for a PNG only if you need one, and install Bun and sharp first.