baoyu-diagram Skill for Claude Code: Dark and Light SVG Diagrams with PNG Export

baoyu-diagram makes Claude draw a diagram as a themed SVG, then save dark and light versions and 2x PNG exports.

Installs: 15.6K; on skills.sh
Stars: 27.2K; on GitHub
Files: 13; besides SKILL.md
Updated: Nov 2026; last repo commit

baoyu-diagram is a skill in the jimliu/baoyu-skills collection. Claude writes the SVG by hand, with colors set as CSS variables, then produces up to four files: a dark SVG, a light SVG, and a 2x PNG of each. If you want only one theme or only SVG, it makes just those.

It covers nine diagram types: architecture, flowchart, sequence, structural, mind map, timeline, state machine, illustrative and data flow. It also triggers on phrases like "draw me a ..." and "画个图". Output is saved in a diagram/ folder next to your input file or in your project.

The PNG and light-theme steps run TypeScript scripts with bun. If bun is missing, the skill uses npx -y bun, and the PNG step needs the sharp package installed once.

Good for

Developers who need architecture, flow or sequence diagrams for docs and READMEs
Writers who want a diagram of a process, data flow or decision tree
Teams who want diagrams in a custom brand theme

Install baoyu-diagram

Claude Code

Copy this prompt.

Install the baoyu-diagram skill in Claude Code. Run this command:

npx skills add jimliu/baoyu-skills --skill baoyu-diagram -a claude-code

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Pick one route. The README asks you to install only the skills you need; its plain npx skills add command and its plugin install every skill in the repo (the plugin manifest lists 21). baoyu-diagram runs bun scripts and needs sharp for PNG output, installed once with bun install in its scripts folder.

From the vendor's docs. Source.

What's in the skill

When it loads

Create professional diagrams with configurable dark/light theme via CSS custom properties. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system, process flow, data flow, component relationship, network topology, decision tree, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Outputs a dark-theme SVG, a light-theme SVG, and a @2x PNG of each.

Sections in SKILL.md

Output Files
Theme System (CSS Custom Properties)
Theme Files ({baseDir}/themes/)
CSS Custom Properties Reference
Supported Diagram Types
Design System
Typography
Core Visual Elements
SVG Structure & Layering
Spacing Rules
Component Patterns
Type-Specific Layout Guidance
Architecture Diagrams
Flowcharts
Sequence Diagrams
Structural Diagrams

Key facts

License: MIT (repo license)
Author: jimliu (repo owner)
Repository: jimliu/baoyu-skills, folder skills/baoyu-diagram
Installs on skills.sh: 15,581 as of 2026-11-02
Repo stars: 27,159 as of 2026-11-02 (whole repo)
Last repo commit: 2026-11-01
Files in the skill folder: 14 files including SKILL.md
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: pass

What it includes

Nine types with layout rules
Architecture, flowchart, sequence and structural have reference files in references/. Mind map, timeline, state machine, illustrative and data flow use the layout notes in the SKILL.md table.
Files · Diagram types
Dark and light, plus custom JSON themes
Colors are CSS custom properties. Add a .json file to themes/ and pass --theme=<name> to apply it.
Themes
Fonts, arrows, boxes, layering
A monospace font stack with no web fonts, standard and colored arrowheads, component boxes, region boundaries and a fixed paint order.
Design system
Write the SVG in another theme
Replaces the :root values and writes <name>.light.svg next to the input. The source file is not modified.
Runs code · theme-switch.ts
Convert an SVG to a 2x PNG
Uses the sharp package. Options are --theme, --scale, --output and --json.
Runs code · main.ts
Inline CSS variables into literal colors
Only for other tools that cannot read CSS variables. main.ts does this itself.
Runs code · flatten-vars.ts
Eight rules for every SVG
One file with no external resources, a viewBox with 30px padding, CSS variables for every color, and a save location.
Files · Output rules
Nine steps from type to files
Identify the type, plan the layout, write the SVG, check spacing, save, then run theme-switch and the two PNG exports and present the files.
Runs code · Process

From the official docs

Permissions

Medium risk

The skill runs bun scripts, may download bun through npx and installs the sharp package for PNG export, and it writes files into a diagram folder. Approve the install commands yourself.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs third-party code to make PNGs
The skill tells Claude to run scripts with bun, falling back to npx -y bun, and to install sharp 0.34.5 with bun install. Install bun yourself if you prefer.
It writes files in your project
Output goes to a diagram/ folder next to your input file or in the project. Check it before committing.
SVGs load nothing over the network
The SKILL.md says each SVG embeds its styles and loads nothing remote, and that main.ts never installs anything itself.

Technical details

Talks to	npm registry, when npx -y bun or bun install runs
Scopes	Your input file and a diagram/ output folder Skill scripts folder (sharp install)

Questions

What does the baoyu-diagram skill do?

It makes Claude draw a technical or conceptual diagram as an SVG. It then produces a light version and 2x PNGs, so you get a dark SVG, a light SVG and a PNG of each.

How do I install it?

Use the install box above and pick one route. The skills CLI command installs only this skill. The README also shows a plain npx skills add jimliu/baoyu-skills and a Claude Code plugin; both install the whole collection, which the plugin manifest lists as 21 skills, and the README advises installing only the ones you need.

What does it need on my machine?

The scripts run with bun, or npx -y bun if bun is not installed. The PNG step needs the sharp package, installed once with bun install in the scripts folder. If sharp is missing, the SKILL.md says to deliver the SVG files and explain how to enable PNG.

Does it use an image model or API key?

No image model. The repo README says Claude writes the SVG by hand, and the SKILL.md names no API key.

Is it safe?

It runs bundled TypeScript scripts that read your SVG and write new files, and it may download bun through npx and the sharp package. Check the diagram folder it writes to and approve the install commands yourself.

Can I use my own colors?

Yes. Add a JSON file to the skill's themes folder with CSS variable names as keys, then use --theme=<name>. The SKILL.md gives an example brand theme.

The README mentions --type and --lang. Does the skill support them?

The repo README describes /baoyu-diagram options (--type, --lang and --out) that the SKILL.md in the skill folder does not define. Describe the diagram type and language in your prompt instead.

Information

updated Nov 2, 2026

Repository: jimliu/baoyu-skills
Folder: skills/baoyu-diagram

jimliu/baoyu-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 8

baoyu-diagram SKILL.md · github.com
baoyu-skills README · github.com
skills CLI commands · github.com
marketplace.json · github.com
scripts/package.json · github.com
scripts/theme-switch.ts · github.com
scripts/main.ts · github.com
references/architecture.md · github.com