102.3K+Download
Zur Nutzungsanleitung springen
Baoyu Diagramvon Jim Liu (Baoyu)

Baoyu Diagram Skill.

Beziehungen, Beschriftungen und Verbindungspfade bleiben in einer prüfbaren Vektordatei explizit.

  • Diagramme
  • SVG
  • Informationsdesign
OpenDesign herunterladenNutzungsanleitung ansehen
Quellenprüfung · Baoyu DiagramSKILL.md
Aufgabe Diagramme Ergebnis • Ein skalierbares SVG-Diagramm mit explizitem Text und expliziter Geometrie • Ein aus dem SVG erzeugter PNG-Export • Ein Layout, dessen Gruppen, Abläufe und Legende dem übergebenen System entsprechen Vor dem Start Eine Text-/Code-Umgebung für SVG; Bun oder npx-basiertes Bun für das mitgelieferte PNG-Konvertierungsskript.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Strukturierte technische Diagramme als SVG zeichnen

Ein Workflow zum Erstellen dunkler SVG-Diagramme mit semantischen Layouts, Ebenenreihenfolge für Verbindungen und PNG-Konvertierung.

Workflow auf QuellenbasisKein Ausführungs-Benchmark

Die Arbeitsweise

Baoyu Diagram schreibt eigenständige SVG-Diagramme für Architekturen, Flussdiagramme, Sequenzen, Zeitleisten und andere strukturelle Erklärungen, statt ein Bildmodell die Beschriftungen malen zu lassen. Die Quelle liefert ein dunkles visuelles System mit semantischen Farben, Monospace-Typografie und diagrammspezifischen Layoutvorgaben.

Ein besonderes Implementierungsdetail ist die Ebenenreihenfolge: Verbindungen werden hinter opaken Masken und halbtransparenten Komponentenboxen gezeichnet, damit Linien nicht durch Beschriftungen scheinen. Abstände, Legendenplatzierung und viewBox-Rand gelten als Teil des Diagrammvertrags. Ein mitgeliefertes Skript kann anschließend ein höher aufgelöstes PNG für Tools erzeugen, die kein SVG akzeptieren.

Erwartete Ergebnisse

  • Ein skalierbares SVG-Diagramm mit explizitem Text und expliziter Geometrie
  • Ein aus dem SVG erzeugter PNG-Export
  • Ein Layout, dessen Gruppen, Abläufe und Legende dem übergebenen System entsprechen
Beispielbriefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Beziehungsmodell wählen

    Entscheide, ob die Informationen eine Sequenz, einen Entscheidungsablauf, eine Hierarchie, eine Architektur oder eine andere unterstützte Struktur darstellen.

  2. 02
    Knoten und Verbindungen planen

    Liste Entitäten, Gruppierungsgrenzen und Flussrichtung auf, bevor du Positionen vergibst und Pfeile führst.

  3. 03
    Graph rendern und prüfen

    Schreibe das SVG, prüfe Überlappungen und Abstände zu Beschriftungen, exportiere dann ein PNG und kontrolliere, ob beide Formate lesbar bleiben.

02 Einsatzbereiche

Wann sich der Einsatz lohnt

Eine Text-/Code-Umgebung für SVG; Bun oder npx-basiertes Bun für das mitgelieferte PNG-Konvertierungsskript.

Gut geeignet

  • ArchitekturdokumentationNützlich, um Dienstgrenzen, Datenspeicher und gerichtete Beziehungen mit bearbeitbaren Vektorbeschriftungen darzustellen.
  • ProzesserklärungenPasst zu Abläufen und Sequenzen, bei denen Pfeilrichtung und Nachrichtenreihenfolge wichtiger sind als der Illustrationsstil.

Zu prüfende Grenzen

  • Festgelegtes dunkles ThemeDie geprüfte Quelle ist auf eine dunkle Palette ausgelegt. Für eine andere Markengestaltung ist eine ausdrückliche Anpassung nötig.
  • Schriften können extern seinObwohl die Ausgabe eine einzelne SVG-Datei ist, erlaubt das Beispiel einen Google-Fonts-Import. Das Erscheinungsbild offline sollte mit der vorgesehenen Fallback- oder eingebetteten Schrift geprüft werden.

Diese Eingaben mitbringen

  • Entitäten und BeziehungenGib die tatsächlichen Knoten, Verbindungsrichtungen und Beschriftungen an; verlasse dich nicht darauf, dass der Agent undokumentiertes Systemverhalten ableitet.
  • DiagrammzweckBenenne die Frage, die das Diagramm beantworten soll, und das technische Niveau des Publikums.
  • AusgabeumgebungLege fest, wo SVG oder PNG verwendet wird, einschließlich Größe und Offline-Anforderungen.

03 Wichtige Entscheidungen

Entscheidende Punkte

  1. Lesbare Ebenenführung der Verbindungen

    Die Quelle verhindert ausdrücklich, dass Pfeile durch halbtransparente Boxen scheinen.

  2. Typspezifische Semantik

    Sequenznachrichten, Entscheidungen in Flussdiagrammen und strukturelle Beziehungen folgen unterschiedlichen Konventionen statt generischer verbundener Karten.

04 Beispielbriefing

Fokussiertes Briefing ausprobieren

Das folgende Beispielbriefing wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du es verwendest.

Einrichtung prüfen

Behalte die Referenzen zu den Diagrammtypen und das Konvertierungsskript bei. Prüfe Rendering und Schriftverfügbarkeit am vorgesehenen Zielort.

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

Eine Text-/Code-Umgebung für SVG; Bun oder npx-basiertes Bun für das mitgelieferte PNG-Konvertierungsskript.

Mit einem Ergebnis beginnen

Passe Umfang, Quellenmaterial und Vorgaben in diesem Briefing an, bevor du den Skill ausführst.

Beispielbriefing
Nutze baoyu-diagram, um ein SVG zu erstellen, das unsere Upload-Pipeline zeigt: Browser, API, Queue, Worker und Objektspeicher. Verwende nur die von mir angegebenen Beziehungen, gruppiere die serverseitigen Komponenten, beschrifte das Retry-Verhalten separat und halte die Legende außerhalb des Graphen. Prüfe Pfeilrichtungen und Textabstände und liefere dann SVG- und PNG-Versionen, ohne erfundene Dienste hinzuzufügen.

Ergebnis prüfen

Prüfe die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Jeder Pfeil und jede Gruppe entspricht der übergebenen Systembeschreibung.
  • Beschriftungen, Verbindungen und Legenden überlappen nicht und werden nicht abgeschnitten.
  • Das SVG skaliert korrekt und das exportierte PNG bleibt lesbar.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Softwareabhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
Jim Liu (Baoyu)
Repository
JimLiu/baoyu-skills
Skill-Datei
skills/baoyu-diagram/SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-10-07 · 1567581c26ec
Redaktionelle Quellenzusammenfassung
Ein Workflow zum Erstellen dunkler SVG-Diagramme mit semantischen Layouts, Ebenenreihenfolge für Verbindungen und PNG-Konvertierung.

Eigene Zusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Nutzt dies eine Bildgenerierungs-API?

Der dokumentierte Workflow schreibt SVG direkt und konvertiert es in PNG, anders als Illustrations-Skills mit Rastergenerierung.

Kann ich die Beschriftungen später bearbeiten?

Die Beschriftungen bleiben SVG-Text in der Quelldatei und lassen sich mit einem geeigneten Editor oder per Code-Workflow ändern.

Ist das SVG standardmäßig vollständig offlinefähig?

Prüfe die Schriftbehandlung. Die Quelle erlaubt einen externen Google-Fonts-Import, obwohl die übrigen Diagrammelemente in einer Datei enthalten sind.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Briefing, Quellenmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfe die Einrichtung des Skills, bevor du ihn in deinen Workflow aufnimmst.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md