skilld
All skills
jimliu avatar

/baoyu-diagram

@6699b80 official
by Jim Liu 宝玉jimliu/baoyu-skills26k stars
2,896

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/jimliu/baoyu-skills/baoyu-diagram

This session only. Nothing lands on disk.

referencesflowchart.md

≈576 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Flowchart Layout

Shape Vocabulary

Shape Meaning SVG Element
Rounded rect (large radius) Start / End <rect rx="25">
Rectangle Process / Action <rect rx="6">
Diamond Decision <polygon> rotated 45°
Parallelogram Input / Output <polygon> with skew
Cylinder Data store Ellipse + rect combo

Flow Direction

Primary flow: top to bottom. Branch flows go left/right from decisions.

Layout Algorithm

  1. Identify the main path (happy path / most common flow) — this runs straight down the center
  2. Branch from decisions: "Yes" continues down center, "No" branches right (or left if space is tight)
  3. Merge paths: Route branches back to the main path using L-shaped connectors
  4. Loop-backs: Route upward on the far left/right side of the diagram with curved paths

Spacing

  • Step-to-step vertical gap: 60-80px (enough for arrow + optional label)
  • Decision diamond height: 70px (point to point)
  • Decision diamond width: 100px (point to point)
  • Branch horizontal offset: 200px from center
  • Merge connector clearance: 20px from any box

Decision Labels

Place "Yes" / "No" (or "True" / "False", "是" / "否") labels directly on the exit arrows, 10px from the diamond edge:

<!-- Decision diamond at center (400, 200) -->
<!-- Yes: downward -->
<line x1="400" y1="235" x2="400" y2="300" stroke="#64748b" marker-end="url(#arrow)"/>
<text x="412" y="260" fill="#34d399" font-size="8">Yes</text>

<!-- No: rightward -->
<line x1="450" y1="200" x2="550" y2="200" stroke="#64748b" marker-end="url(#arrow)"/>
<text x="480" y="193" fill="#fb7185" font-size="8">No</text>

Coloring Strategy

  • Start/End nodes: Highlight color (blue)
  • Process steps: Primary (cyan) or Secondary (emerald)
  • Decision diamonds: Accent (amber) — they draw the eye naturally
  • Error/exception paths: Alert (rose) dashed arrows
  • Happy path arrows: Slightly brighter than branch arrows (stroke-opacity difference)

Complex Flowcharts

For flowcharts with 10+ steps:

  • Group related steps into swim lanes (vertical columns with header bars)
  • Add a "phase" row header at the top of each swim lane
  • Use the region boundary pattern from Architecture for swim lanes

Source: SKILL.md on GitHub

Third-party checks

No alerts16d4 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill generates various types of technical and conceptual SVG diagrams and converts them to PNG images. It uses a local conversion script and references fonts from a trusted service. No security issues were identified.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 6699b80. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Activeupdated 4 months ago

Capability

version
1.117.3

Topics

  • diagram
  • svg
  • architecture
  • flowchart
  • sequence
  • visualization
  • dark-theme
  • state-machine
  • mind-map

README badge

README badge for jimliu/baoyu-skills/baoyu-diagram

What it does

Generates professional dark-themed SVG diagrams including architecture diagrams, flowcharts, sequence diagrams, state machines, mind maps, timelines, and data flow visualizations. Outputs a single self-contained SVG file with embedded styles, semantic color coding by component role, and support for Chinese labels.

Generated from the current SKILL.md.

Frequently asked

What diagram types does this skill support?
Architecture diagrams, flowcharts, sequence diagrams, structural diagrams (class/ER/org charts), mind maps, timelines, state machines, data flow diagrams, and illustrative/conceptual diagrams.
Does this skill support Chinese text?
Yes. The skill includes font fallbacks for CJK characters (Noto Sans SC, PingFang SC) and automatically increases box widths to accommodate wider characters.
What is the output format?
A single self-contained SVG file with embedded styles and fonts. The skill can also convert the SVG to @2x PNG using the bundled script.
Can I customize colors and styling?
Yes. The skill includes a defined color palette (Primary, Secondary, Tertiary, Accent, Alert, etc.) that you can apply to components by role. All styling is embedded in the SVG.
Does this skill require external dependencies?
No external dependencies for SVG generation. PNG conversion uses an optional bundled script that requires bun or npx.

Generated from the current SKILL.md. These answers refresh after source changes.