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.

referencesstructural.md

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

Structural Diagram Layout

Covers: class diagrams, ER diagrams, component diagrams, package diagrams, org charts.

Class Diagram

Class Box (3-compartment)

<g transform="translate(X, Y)">
  <!-- Mask -->
  <rect width="180" height="120" rx="6" fill="#0f172a"/>
  <!-- Box -->
  <rect width="180" height="120" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
  <!-- Class name compartment -->
  <text x="90" y="24" fill="white" font-size="11" font-weight="700" text-anchor="middle">ClassName</text>
  <!-- Divider 1 -->
  <line x1="0" y1="35" x2="180" y2="35" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.5"/>
  <!-- Attributes -->
  <text x="10" y="52" fill="#94a3b8" font-size="8">- id: int</text>
  <text x="10" y="64" fill="#94a3b8" font-size="8">- name: string</text>
  <!-- Divider 2 -->
  <line x1="0" y1="75" x2="180" y2="75" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.5"/>
  <!-- Methods -->
  <text x="10" y="92" fill="#94a3b8" font-size="8">+ getName(): string</text>
  <text x="10" y="104" fill="#94a3b8" font-size="8">+ setName(s: string)</text>
</g>

For abstract classes, italicize the class name. For interfaces, add «interface» above the name in smaller font.

Relationship Lines

Relationship Line Style Arrow/End
Inheritance Solid Empty triangle (▷) pointing to parent
Implementation Dashed Empty triangle pointing to interface
Composition Solid Filled diamond (◆) at owner end
Aggregation Solid Empty diamond (◇) at owner end
Dependency Dashed Open arrowhead at dependency target
Association Solid Open arrowhead or none

Markers:

<!-- Inheritance triangle -->
<marker id="inherit" markerWidth="12" markerHeight="10" refX="12" refY="5" orient="auto">
  <polygon points="0 0, 12 5, 0 10" fill="#0f172a" stroke="#94a3b8" stroke-width="1.5"/>
</marker>

<!-- Composition diamond -->
<marker id="composition" markerWidth="12" markerHeight="8" refX="0" refY="4" orient="auto">
  <polygon points="0 4, 6 0, 12 4, 6 8" fill="#94a3b8"/>
</marker>

<!-- Aggregation diamond -->
<marker id="aggregation" markerWidth="12" markerHeight="8" refX="0" refY="4" orient="auto">
  <polygon points="0 4, 6 0, 12 4, 6 8" fill="#0f172a" stroke="#94a3b8" stroke-width="1.5"/>
</marker>

Cardinality Labels

Place at each end of the relationship line, offset 5-8px from the box edge:

<text x="X" y="Y" fill="#94a3b8" font-size="8">1..*</text>

ER Diagram

Similar to class diagrams but:

  • Use 2-compartment boxes (entity name + attributes)
  • Mark primary keys with PK prefix and bold
  • Mark foreign keys with FK prefix
  • Relationship lines use crow's foot notation:
<!-- One end (single line) -->
<line x1="X1" y1="Y" x2="X1+15" y2="Y" stroke="#94a3b8" stroke-width="1.5"/>
<!-- Many end (crow's foot) -->
<line x1="X2-15" y1="Y-6" x2="X2" y2="Y" stroke="#94a3b8" stroke-width="1.5"/>
<line x1="X2-15" y1="Y+6" x2="X2" y2="Y" stroke="#94a3b8" stroke-width="1.5"/>
<line x1="X2-15" y1="Y" x2="X2" y2="Y" stroke="#94a3b8" stroke-width="1.5"/>

Org Chart

  • Top-down tree layout
  • Root at top center
  • Each level evenly spaced (100-120px vertical gap)
  • Siblings evenly distributed horizontally
  • Connection lines: vertical from parent bottom center to horizontal bar, then vertical down to each child top center
  • Use color to indicate departments or hierarchy levels

Layout Tips

  • Start by counting the widest level to determine total diagram width
  • Center the tree horizontally in the viewBox
  • For deep trees (5+ levels), consider horizontal layout instead

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.