Overview
baoyu-diagram is an open-source design skill for Claude Code and compatible agents, published by JimLiu. Its author describes it as: “Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill w…”. The project has 25k stars on GitHub and is available under the MIT license. Add it to your setup with `/plugin marketplace add JimLiu/baoyu-skills`.
What baoyu-diagram does
Create professional SVG diagrams across multiple diagram types. All output is a single self-contained `.svg` file with embedded styles and fonts.
What’s inside
The SKILL.md for baoyu-diagram is organised into these sections:
- Supported Diagram Types
- Design System
- Color Palette
- Typography
- Core Visual Elements
- SVG Structure & Layering
- Spacing Rules
- Component Patterns
- Type-Specific Layout Guidance
- Architecture Diagrams
- Flowcharts
- Sequence Diagrams
Installation
Add baoyu-diagram to your agent with:
/plugin marketplace add JimLiu/baoyu-skillsReview a skill’s source before installing it — skills can instruct your agent to run commands. This command comes from the skill’s public repository, which is the source of truth for setup steps. New to skills? Read how to install Claude Code skills.
Supported agents
- Claude Code — ships a claude code plugin marketplace
- Codex — declared in the repository topics
License
baoyu-diagram is published under the MIT license.
Strengths
- Clear MIT license — safe to read and adapt within its terms
- Ships in JimLiu/baoyu-skills, an established project with 25,129 GitHub stars
- Works with Claude Code, Codex
- Actively maintained — repository updated in the last 90 days
Author
Topics
Alternatives to baoyu-diagram
Similar skills from other repositories:
Frequently asked questions
- What does baoyu-diagram do?
- Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. 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. Output is always a standalone .svg file.
- How do I install baoyu-diagram?
- Run /plugin marketplace add JimLiu/baoyu-skills in your agent, then reload your skills. Review the source at https://github.com/JimLiu/baoyu-skills before installing.
- Is baoyu-diagram free to use?
- Yes. baoyu-diagram is free and open source under the MIT license, so you can read, run, and adapt it within that license's terms.
- Which agents does baoyu-diagram work with?
- baoyu-diagram lists Claude Code and Codex — named in its SKILL.md, its plugin marketplace or its repository topics. Skills use the portable SKILL.md format, so other agents that read that format may load it too.
- Where does baoyu-diagram come from?
- baoyu-diagram ships inside JimLiu/baoyu-skills, a repository that contains 23 catalogued skills in total. The repository's 25,129 GitHub stars apply to that whole collection, not to this skill on its own.