# baoyu-diagram

> Claude/Codex skill by [@jimliu](https://omgskills.com/library/jimliu/index.md) · 27k stars · Updated 2026-09-10

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.

Tags: agent-skills, claude-skills, codex-skills, openclaw-skills

## Install

```sh
git clone https://github.com/JimLiu/baoyu-skills /tmp/baoyu-skills && ln -s /tmp/baoyu-skills/skills/baoyu-diagram ~/.claude/skills/baoyu-diagram
```

## From README

Diagram Generator Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded styles and fonts. Supported Diagram Types | Type | When to Use | Key Characteristics | |------|-------------|-------------------| | Architecture | System components & relationships | Grouped boxes, connection arrows, region boundaries | | Flowchart | Decision logic, process steps | Diamond decisions, rounded step boxes, directional flow | | Sequence | Time-ordered interactions between actors | Vertical lifelines, horizontal messages, activation bars | | Structural | Class diagrams, ER diagrams, org charts | Compartmented boxes, typed relationships (inheritance, composition) | | Mind Map | Brainstorming, topic exploration | Central node, radiating branches, organic layout | | Timeline | Chronological events | Horizontal/vertical axis, event markers, period spans | | Illustrative | Conceptual explanations, comparisons | Free-form layout, icons...

## Links

- HTML page: https://omgskills.com/skills/jimliu/baoyu-skills/baoyu-diagram/
- GitHub: https://github.com/JimLiu/baoyu-skills
- Author: [@jimliu](https://omgskills.com/library/jimliu/index.md)

## More from this repo

- [baoyu-post-to-wechat](https://omgskills.com/skills/jimliu/baoyu-skills/baoyu-post-to-wechat/index.md) — Posts content to WeChat Official Account (微信公众号) via API or Chrome CDP.
   - [@jimliu](https://omgskills.com/library/jimliu/index.md) · 27k stars
- [baoyu-article-illustrator](https://omgskills.com/skills/jimliu/baoyu-skills/baoyu-article-illustrator/index.md) — Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style ×...
   - [@jimliu](https://omgskills.com/library/jimliu/index.md) · 27k stars
- [baoyu-comic](https://omgskills.com/skills/jimliu/baoyu-skills/baoyu-comic/index.md) — Knowledge comic creator supporting multiple art styles and tones.
   - [@jimliu](https://omgskills.com/library/jimliu/index.md) · 27k stars