102.3K+Download
Skip to the usage guide
Baoyu Diagramby Jim Liu (Baoyu)

Baoyu Diagram Skill.

Keep relationships, labels and connector paths explicit in an inspectable vector file.

  • Diagrams
  • SVG
  • Information Design
Download OpenDesignView Usage Guide
Source Review · Baoyu DiagramSKILL.md
Task Diagrams Produces • A scalable SVG diagram with explicit text and geometry • A PNG export produced from the SVG • A layout whose groups, flows and legend correspond to the supplied system Before You Start A text/code environment for SVG; Bun or npx-based Bun for the supplied PNG conversion script.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Draw Structured Technical Diagrams as SVG

A dark-themed SVG diagram authoring workflow with semantic layouts, connector layering and PNG conversion.

Source-based workflowNot an execution benchmark

The Working Approach

Baoyu Diagram writes standalone SVG diagrams for architecture, flowcharts, sequences, timelines and other structural explanations, rather than asking an image model to paint the labels. The source supplies a dark visual system with semantic colors, monospace typography and diagram-specific layout guidance.

A distinctive implementation detail is its layering order: connectors are drawn behind opaque masks and translucent component boxes so lines do not show through labels. Spacing, legend placement and viewBox padding are treated as part of the diagram contract. A bundled script can then produce a higher-resolution PNG for tools that do not accept SVG.

Expected Deliverables

  • A scalable SVG diagram with explicit text and geometry
  • A PNG export produced from the SVG
  • A layout whose groups, flows and legend correspond to the supplied system
See the Example Brief

From Brief to Review

  1. 01
    Choose the Relationship Model

    Decide whether the information is a sequence, decision flow, hierarchy, architecture or another supported structure.

  2. 02
    Plan Nodes and Connections

    List the entities, grouping boundaries and flow direction before assigning positions and routing arrows.

  3. 03
    Render and Check the Graph

    Write the SVG, inspect overlaps and label clearance, then export a PNG and verify that both formats remain readable.

02 When to Use It

When to Use It

A text/code environment for SVG; Bun or npx-based Bun for the supplied PNG conversion script.

A Good Fit

  • Architecture DocumentationUseful for showing service boundaries, data stores and directional relationships with editable vector labels.
  • Process ExplanationsFits flows and sequences where arrow direction and message order carry more meaning than illustration style.

Limits to Check

  • Opinionated Dark ThemeThe reviewed source is designed around a dark palette. A different brand treatment needs an explicit adaptation.
  • Fonts May Be ExternalAlthough the output is one SVG file, the example permits a Google Fonts import. Offline appearance should be checked with the intended fallback or embedded font strategy.

Bring These Inputs

  • Entities and RelationshipsProvide the actual nodes, connection directions and labels; do not rely on the agent to infer undocumented system behavior.
  • Diagram PurposeIdentify the question the diagram should answer and the audience's technical level.
  • Output EnvironmentSpecify where SVG or PNG will be used, including size and offline requirements.

03 Decisions That Matter

Decisions That Matter

  1. Readable Connector Layering

    The source explicitly prevents arrows from bleeding through semi-transparent boxes.

  2. Type-Specific Semantics

    Sequence messages, flowchart decisions and structural relationships use different conventions rather than generic connected cards.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Retain diagram-type references and the conversion script. Check rendering and font availability in the intended destination.

Upstream Source File
https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md

A text/code environment for SVG; Bun or npx-based Bun for the supplied PNG conversion script.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use baoyu-diagram to create an SVG showing our upload pipeline: browser, API, queue, worker and object storage. Use only the relationships I specify, group the server-side components, label retry behavior separately and keep the legend outside the graph. Verify arrow directions and text clearance, then provide SVG and PNG versions without adding invented services.

Inspect the Result

Check the actual output against these observable criteria.

  • Every arrow and group matches the supplied system description.
  • Labels, connectors and legends do not overlap or clip.
  • The SVG scales correctly and the exported PNG preserves legibility.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
Jim Liu (Baoyu)
Repository
JimLiu/baoyu-skills
Skill File
skills/baoyu-diagram/SKILL.md
License
MIT
Reviewed Snapshot
2026-10-07 · 1567581c26ec
Editorial Source Summary
A dark-themed SVG diagram authoring workflow with semantic layouts, connector layering and PNG conversion.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does this use an image-generation API?

The documented workflow writes SVG directly and converts it to PNG, unlike the raster-generation illustration Skills.

Can I edit the labels later?

The labels remain SVG text in the source file, so they can be changed through a suitable editor or code workflow.

Is the SVG completely offline by default?

Check the font handling. The source allows an external Google Fonts import even though other diagram elements are contained in one file.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md