Communitygithub.com

hraness/graphics

Graphics ist ein kopfloses CLI und eine Agenten-Fähigkeit für kleine, klare Diagramme.

Was ist graphics?

Graphics ist eine spezialisierte Fähigkeit für KI-Agenten (wie Claude Code, Cursor oder Codex), die es ermöglicht, kleine, klare Diagramme direkt über die Kommandozeile zu erstellen und zu verwalten. Sie arbeitet deterministisch auf Basis einer `.diagram.json`-Quelldatei und exportiert konsistent helle und dunkle SVGs, PNGs sowie eine `.tldr`-Datei für die Bearbeitung in tldraw. Die Fähigkeit ist besonders nützlich für Entwickler, die technische Dokumentation, Architekturdiagramme oder Konzeptvisualisierungen erstellen möchten, ohne einen grafischen Editor öffnen zu müssen. Sie folgt streng vorgegebenen Regeln zur visuellen Kommunikation (z.B. gleiche Rollen = gleiche Größen, minimaler Abstand zwischen verbundenen Formen, Zurückhaltung bei Farben), erwartet aber, dass die Benutzereingabe präzise und wörtlich befolgt wird – ohne Ausschmückungen oder Titelerfindungen. Graphics unterstützt die Verwaltung von Diagrammen in Wissensdatenbanken (`kb/diagrams/`) und bietet eine Build- und Prüfpipeline mit `graphics check` und `graphics render`. Bei Bedarf kann auch die tldraw-Desktop-App über die CLI installiert werden, um eine direkte Canvas-Bearbeitung zu ermöglichen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add hraness/graphics

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Klare Diagramme erstellen

Verwenden Sie die installierte graphics-CLI als deterministischen Adapter. Behalten Sie die erstellte .diagram.json-Quelle; behandeln Sie .light.svg, .dark.svg, .light.png, .dark.png und .tldr als ersetzbare Exporte.

Befolgen Sie die Eingabe wörtlich

Behandeln Sie die Eingabe des Benutzers als vollständige Inhaltsvorgabe.

  • Behalten Sie die gelieferten Beschriftungen, Werte, Beziehungen, relativen Größen und Auslassungen bei.
  • Fügen Sie nur die neutralen Mechanismen hinzu, die zum Zeichnen dieser Fakten nötig sind.
  • Erfinden Sie keinen Titel, Untertitel, Legende, Anmerkung, Beispiel, Implikation, Kategorie, Metrik, Teilstrich, Verbinder oder dekorative Behauptung.
  • Erweitern Sie eine kurze Beschriftung nicht zu einem Satz. Bevorzugen Sie die eigenen ein- bis drei Wörter umfassenden Beschriftungen des Benutzers.
  • Entfernen Sie beim Aktualisieren abgelehnten Inhalt, ohne ihn durch eine neue Ausarbeitung zu ersetzen.

Finden Sie die Quelle

  1. Lesen Sie die Anweisungen des lokalen Repositorys und suchen Sie nach graphics.config.*.
  2. Suchen Sie nach einer vorhandenen .diagram.json-Datei zum selben Thema, bevor Sie eine erstellen.
  3. Aktualisieren Sie diese Quelle, anstatt generierte Bilder zu bearbeiten oder ein Duplikat zu erstellen.
  4. Verwenden Sie in einer Wissensdatenbank mit kb/ den Pfad kb/diagrams/<slug>.diagram.json und kombinieren Sie ihn mit kb/notes/<slug>.md. Betten Sie das gerenderte helle/dunkle Bild gemäß der Konvention des Hosts ein oder verlinken Sie es, und verknüpfen Sie Wissen über die Notiz, nicht über eine binäre Leinwand.
  5. Verwenden Sie außerhalb einer Wissensdatenbank standardmäßig diagrams/<slug>.diagram.json.

Gestalten Sie die Visualisierung

Lesen Sie visual-communication.md, bevor Sie ein Diagramm erstellen oder wesentlich überarbeiten.

Wenden Sie diese Vorgaben grundsätzlich an:

  • Verwenden Sie abgerundete Rechtecke für gewöhnliche Konzepte. Gleiche Rollen erhalten gleiche Größen, Radien, Strichstärken, Symbolgrößen und Beschriftungsbehandlung.
  • Lassen Sie mindestens 96px – und vorzugsweise 120–200px – zwischen verbundenen Formen, damit Pfeile als Beziehungen und nicht als Nähte gelesen werden.
  • Platzieren Sie Symbole direkt innerhalb ihrer semantischen Form. Setzen Sie kein umrandetes Symbolkästchen in eine andere umrandete Karte.
  • Verwenden Sie drei bis sieben primäre Elemente, wenn die Abstraktion durch die Eingabe erlaubt ist.
  • Legen Sie eine klare Lesereihenfolge fest und richten Sie gleichrangige Elemente an einem gemeinsamen Raster aus.
  • Nutzen Sie Leerraum vor Rändern, Farben oder Text, um Gruppen zu trennen.
  • Verwenden Sie Farbe für höchstens eine semantische Unterscheidung. Nehmen Sie niemals willkürliche Größen- oder Stiländerungen vor, die eine Unterscheidung implizieren, die die Eingabe nicht geliefert hat.
  • Halten Sie Symbole unterstützend: Eine Beschriftung muss dennoch die Bedeutung tragen.
  • Bevorzugen Sie eine sichtbare Grenze pro Objekt und einen sichtbaren Strich pro Achse oder Verbinder.

Verbessern Sie keine wörtlichen Daten, um diese Präferenzen zu erfüllen. Die Eingabe hat Vorrang.

Autor und rendern

Verwenden Sie die öffentliche Schema-URL oder führen Sie graphics init für eine Vorlage aus:

graphics check diagrams/<slug>.diagram.json --strict
graphics render diagrams/<slug>.diagram.json

Der Render-Befehl überschreibt die konsistenten, gleichstämmigen Exporte. Überprüfen Sie sowohl die helle als auch die dunkle Ausgabe, wenn Layout oder Kontrast unsicher sind. Beheben Sie alle relevanten Lint-Funde; ändern Sie die Quelle und rendern Sie dann erneut.

Wenn das Repository eigene Schriftarten oder Symbolpakete verwendet, lesen Sie customization.md. Fügen Sie dem Repository keine MonoLisa oder andere lizenzierte Schriftart hinzu. Das Standard-Rendering verwendet den systemweiten serifenlosen Stapel.

tldraw bewusst einsetzen

Die generierte .tldr-Datei ist bearbeitbares Austauschformat und erfordert kein tldraw-SDK oder Desktop-App zur Erstellung. Öffnen Sie sie in tldraw Offline, wenn eine Person direkt auf der Leinwand bearbeiten möchte:

graphics open diagrams/<slug>.tldr

Wenn die optionale App fehlt, lädt graphics desktop install die aktuelle offizielle Version herunter, überprüft ihren veröffentlichten SHA-256-Hash und startet den Plattforminstaller. Die App importiert .tldr als ungespeichertes Dokument; speichern Sie es dort, um das neuere native .tldraw-Paket zu erstellen. Überschreiben Sie niemals direkt ein natives .tldraw-ZIP/SQLite-Paket.

Überprüfen

  1. Führen Sie graphics check <source> --strict aus.
  2. Führen Sie graphics render <source> aus.
  3. Bestätigen Sie, dass alle fünf Artefakte neben der Quelle oder im angeforderten Ausgabeverzeichnis vorhanden sind.
  4. Überprüfen Sie die helle und dunkle Ausgabe in Originalgröße.
  5. Bestätigen Sie, dass gleichrangige Formen keine falschen Unterschiede implizieren.
  6. Bestätigen Sie, dass Verbinder lang sind, in .tldr an die beabsichtigten Formen gebunden sind und keine Beschriftungen kreuzen.
  7. Wenn eine Begleitnotiz erforderlich ist, bestätigen Sie deren Pfad und visuelle Referenz.

Verwandte Skills