baoyu-diagram
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.
Before you install
- Last update
- Files in folder
- 6
- Scripts
- Contains scripts. Review them before running.
- SKILL.md size
- 12 KB (about 3,068 tokens of context each time it loads)
- License
- MIT
- Source on GitHub
- JimLiu/baoyu-skills
Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.
Install
npx skills add JimLiu/baoyu-skills@baoyu-diagramRuns in a terminal with Node.js 18 or newer. Add -y to skip the prompts and -g to install for every project instead of this one.
Install for your agent
npx skills add JimLiu/baoyu-skills@baoyu-diagram --agent claude-code -y- Project install writes to
.claude/skills/baoyu-diagram- Global install writes to
~/.claude/skills/baoyu-diagram
Start a new session afterwards so the agent picks the skill up. In Claude Code you can also call it directly with /baoyu-diagram.
What it does
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…
Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.
Categories
Related skills
- baoyu-post-to-wechat
JimLiu/baoyu-skills
Posts content to WeChat Official Account (微信公众号) via API or Chrome CDP. Supports article posting (文章) with HTML, markdown, or plain text input, and image-text posting (贴图, formerly 图文) with multiple images. Markdown article workflows default to converting ordinary external links into bottom citations for WeChat-friendly output. Use when user mentions "发布公众号", "post to wechat", "微信公众号", or "贴图/图文/文章".
- baoyu-image-gen
JimLiu/baoyu-skills
AI image generation with OpenAI GPT Image 2.5, Azure OpenAI, Google, OpenRouter, DashScope, Z.AI GLM-Image, MiniMax, Jimeng, Seedream, Replicate and Agnes APIs. Supports text-to-image, reference images, aspect ratios, and batch generation from saved prompt files. Sequential by default; use batch parallel generation when the user already has multiple prompts or wants stable multi-image throughput. Use when user asks to generate, create, or draw images.
- baoyu-infographic
JimLiu/baoyu-skills
Generate professional infographics with 21 layout types and 22 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", "可视化", or "高密度信息大图".
- baoyu-markdown-to-html
JimLiu/baoyu-skills
Converts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, Mermaid (rendered to PNG via headless Chrome), PlantUML, footnotes, alerts, infographics, and optional bottom citations for external links. Use when user asks for "markdown to html", "convert md to html", "md 转 html", "微信外链转底部引用", or needs styled HTML output from markdown.
- baoyu-cover-image
JimLiu/baoyu-skills
Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 11 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", or "make cover".
- baoyu-article-illustrator
JimLiu/baoyu-skills
Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style × Palette three-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".