Design & Motion · JimLiu/baoyu-skills

baoyu-diagram

Name: baoyu-diagram
Author: JimLiu/baoyu-skills

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.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandWrite FileDual-pass Audit

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Nine diagram types share a single unified "design system": semantic color palette (assigned by component category rather than tech stack), typography hierarchy, dark base + grid background, and three arrow markers—define the system before laying out content.

skills/baoyu-diagram/SKILL.md

| Primary | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan) | Frontend, user-facing, inputs |

The color palette is grouped semantically (Primary/Secondary/Tertiary/Accent/Alert/Connector/Neutral/Highlight), noting that flowcharts and sequence diagrams should be colored by role (actor/decision/process) rather than tech stack.

Layout utilizes a "fixed rendering order + opaque mask rectangles" to eliminate SVG semi-transparent overlap issues: draw arrows first, cover them with opaque fill rectangles in the same position, and finally overlay semi-transparent component boxes.

skills/baoyu-diagram/SKILL.md

The opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it:

The rendering order is explicitly divided into 8 layers: background → region boundaries → arrow lines → mask rectangles → component boxes → text → legends → title block; this is the core technique behind the clean aesthetic of the final output.

Directly applicable, hard numeric rules for spacing/boundaries replace subjective aesthetic judgment: component height 50–70px, vertical spacing ≥40px, horizontal spacing ≥30px, arrow labels 10px from edges, and 30px padding around viewBox.

skills/baoyu-diagram/SKILL.md

- **Minimum gap between components:** 40px vertical, 30px horizontal

These numbers eliminate the need for the model to "estimate" spacing by eye, turning overlap issues into a verifiable checklist (step 5 of the workflow mandates item-by-item verification).

Each diagram type has an algorithm reference for layout to consult beforehand: layering, column/row allocation, column spacing, L-shaped obstacle-avoidance routing, bus lanes, etc., all have defined approaches.

skills/baoyu-diagram/references/architecture.md

1. **Identify layers:** Group components by role (clients, gateways, services, data, infrastructure)

SKILL.md specifies "which file to read first + key points" for each diagram category (four dedicated files for architecture/flowchart/sequence/structural, with key guidance for the other five types).

Output is a single-file, self-contained SVG: no fixed width/height, defined solely via viewBox, with all styles and defs inlined for seamless scaling and embedding.

skills/baoyu-diagram/SKILL.md

2. Set `viewBox` to fit all content with 30px padding; do NOT set fixed `width`/`height` attributes (let the SVG scale responsively)

It also mandates root-level xmlns, placing <style>/<defs>/markers at the top, and using text-anchor middle to prevent text overflow.

Includes a built-in script to rasterize SVG into @2x PNG: calculates dimensions by parsing viewBox, then uses sharp to render with density=72*scale and resize into a PNG.

skills/baoyu-diagram/scripts/main.ts

await sharp(svg, { density: 72 * opts.scale })

The script supports -s/--scale (default 2), -o/--output, and --json; throws an immediate error if dimensions cannot be inferred from viewBox or width/height.

Dedicated handling for Chinese typography: accounting for wider Chinese characters by switching font families and widening boxes to avoid text overflow.

skills/baoyu-diagram/SKILL.md

**Chinese text support:** When labels contain Chinese characters, use `font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif'` and increase box widths — CJK characters are wider

Combined with "text-anchor=middle and ensuring text remains within bounds," this directly addresses common layout failures in CJK contexts.

Explicit file saving conventions: saves to {inputFileDir}/diagram/ if input is a file, otherwise to {projectDir}/diagram/{topic-slug}/, creating directories when non-existent.

skills/baoyu-diagram/SKILL.md

**Save location:** If the input is a file, save to `{inputFileDir}/diagram/`.

The workflow concludes by requiring the simultaneous delivery of both the SVG and @2x PNG files.

2Core Capabilities

01Coverage of 9 diagram types (architecture, flowchart, sequence, structural, mind map, timeline, conceptual, state machine, data flow)

02Unified dark-theme design system (8 semantic color classes + typography scale + grid background + 3 arrow markers)

03Ready-to-use component templates (standard box, decision diamond, database cylinder, region boundary, security group)

04Per-diagram layout algorithm references (layering, column spacing, obstacle-avoiding routing, bus bars)

05Spacing, legend, and viewBox self-check checklists to eliminate overlaps and clipping

06SVG to @2x PNG conversion script (sharp-based, customizable scale/output path/JSON output)

07CJK text adaptation (font family switching + expanded container boxes)

08Standardized disk-saving conventions ({inputFileDir}/diagram/ or {projectDir}/diagram/{topic-slug}/)

3External Dependencies

Kind	Dependency / Endpoint
package	sharp（scripts/main.ts 动态 import，用于 SVG→PNG 光栅化）
cli	bun / npx（${BUN_X} 运行时）
network	Google Fonts（写入产物 SVG 的 @import，由查看端加载；非脚本外发）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Graded/per-use authorization, sandbox recommended

For Administrators

Approval workflow, rollback support, full audit

Evidence & Triggers (File Paths & Excerpts)

scripts/: Executes local script or command: scripts/main.ts (run via bun; sharp rasterizes local SVG files to PNG)
本地工作目录: File I/O and artifact output: writes <input>@2x.png (or -o designated path), creates diagram/ directory when needed

Audit Notes: (a) Strictly local behavior: The agent writes SVG files directly, and scripts/main.ts uses sharp to rasterize local SVG into PNG and create the output directory—no network calls, credential reading, or env access. (b) The only external artifact reference is the Google Fonts @import (fonts.googleapis.com) required by SKILL.md. Per Batch 4 guidelines ("outbound links in artifacts are not factored into safety ratings"), this does not constitute runtime egress and only fetches fonts on the client side when viewed; local sharp/librsvg rendering does not fetch remote CSS. (c) Local impacts requiring awareness: The script writes <name>@2x.png alongside the input file and creates diagram/ directories; SVG enters the sharp parser as an external file, which represents standard image parsing attack surface. Precedent: local read/write tools like canvas-design / writing-fragments are classified as blue.

5Second-Pass Verification

[ok] 脚本仅本地行为 — main.ts 全文无 fetch/http/spawn/process.env；readFileSync(SVG) → sharp(density) → resize → png → toFile，另 mkdirSync 建目录。
[ok] Google Fonts 外链的性质 — 两处命中均为写入产物 SVG 的 @import 文本与 Output Rules 自述 'no external dependencies except the Google Fonts import'；脚本自身不请求该域名，按批4 口径不判级，已写入 risks。
[ok] 绘制顺序与遮罩矩形确为强制 — SKILL.md 明写 'The opaque masking rect trick is essential'，并给出 8 层绘制顺序与组件片段（遮罩 rect + 样式 rect 成对）。
[ok] 间距规则为可检查数字 — 组件高 50-70px、垂直 ≥40px/水平 ≥30px、箭头标签 10px、区域边界内缩 20px、图例距最低元素 ≥20px、viewBox 30px padding，最后一并在流程第 5 步自检。
[ok] 参考文件覆盖范围（是否夸大） — 4 份布局参考对应 architecture/flowchart/sequence/structural；思维导图/时间线/状态机/数据流/示意在图型表中给出要点但无专门文件，SKILL.md 用 'Read the reference file if one exists for that type' 表述，不构成夸大。
[ok] meta 元数据 — GitHub API：MIT、25926 stars、pushed_at 2026-09-10T15:13:43Z；本地 HEAD 与 pin 1567581c26ec… 一致。

6Verdict & Scenarios

Editable artifacts: Outputs clean vector SVG directly, allowing colors and text to be edited in engineering docs without having to regenerate from scratch like with image models.

Zero image generation quota consumption and fully offline-capable: Operates entirely via text generation by the model + local sharp conversion to PNG.

Consistency grounded in a design system rather than chance: Semantic palette + typography scale + pre-built component snippets ensure stylistic consistency across multiple diagrams.

Meticulous engineering details: Mask rectangles resolve semi-transparent blending, quantified spacing prevents overlapping, and strict viewBox rules eliminate clipping.

Chinese-language friendly: Features explicit guidance on CJK font families and widened container boxes.

Best for: Ideal for scenarios requiring editable, scalable, and stylistically consistent diagrams in technical documentation, architecture reviews, and blog posts. Also suitable for teams seeking to avoid burning image generation credits or needing assets that engineers can manually tweak.

Not for: Not suitable for photorealistic or hand-drawn illustration styles (use baoyu-article-illustrator/cover-image instead); not ideal for ultra-large topologies requiring automated layout engines (like Graphviz/Mermaid deterministic layout engines), as coordinates are calculated directly by the model.

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload baoyu-diagram.tar.gz

sha256: e4806bf926545ede…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 1567581c26.