diagramvon Garry Tan

Diagram Skill.

Ein Claude Code- und Codex-Skill für Diagramme und Grafiken: wandelt eine Beschreibung oder Mermaid-Quelle in eine bearbeitbare Excalidraw-Datei plus gerenderte SVG- und PNG-Dateien um.

Diagrams & Data Visualization
Diagram

OpenDesign herunterladen Anleitung ansehen

garrytan/gstack · diagram/SKILL.mdSKILL.md

--- name: diagram description: Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and rendered SVG + PNG. (gstack) --- ## When to invoke this skill ## Step 1 — Author the diagram ## Step 2 — Stage the render bundle (once per session) ## Step 3 — Render the triplet ## Step 4 — Show and deliver ## Rules

Vorspann und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 16.276 Zeichen insgesamt

01 Was es tut

Was das diagram-Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Wandelt eine englische Beschreibung oder Mermaid-Quelle in ein Diagramm-Triplet um: die Mermaid-Quelle (.mmd), eine bearbeitbare Excalidraw-Datei (.excalidraw), die sich auf excalidraw.com öffnen lässt, sowie gerenderte SVG- und PNG-Ausgaben. Das Rendering läuft vollständig offline über einen lokalen Loopback-Server — verwendet den Aside-Browser, wenn dieser läuft, andernfalls den eigenen Headless-Browser von gstack.

Flussdiagramme (graph LR/TD) und Sequenzdiagramme erzeugen vollständig bearbeitbare Excalidraw-Szenen mit echten Boxen, Pfeilen und Text. Andere Mermaid-Diagrammtypen (State, Class, Gantt) werden zu SVG/PNG gerendert und als einzelnes Bildelement in die Excalidraw-Datei exportiert — verschiebbar und annotierbar, aber nicht elementweise bearbeitbar. Die Mermaid-Quelle bleibt die einzige verbindliche Quelle für weitere Iterationen.

Was er erzeugt

Eine Mermaid-Quelldatei (.mmd), die als LLM-freundliches Austauschformat und einzige verbindliche Quelle dient.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Mermaid-Quelle verfassen
Schreiben Sie Mermaid entsprechend der Anfrage des Nutzers. Bevorzugen Sie graph LR für Pipelines/Abläufe und graph TD für Hierarchien.
02
Das Render-Bundle einmal pro Sitzung bereitstellen
Stellen Sie diagram-render.html im Render-Staging-Verzeichnis von gstack unter ${TMPDIR:-/tmp}/gstack-render bereit, inhaltsadressiert nach Bundle-SHA.
03
Das Triplet mit einem Befehl rendern
Schreiben Sie die .mmd-Datei und führen Sie anschließend gstack-render mit dem bereitgestellten Bundle aus.
04
Anzeigen und liefern
Lesen Sie das PNG inline ein, damit der Nutzer das Diagramm sieht. Listen Sie die Triplet-Pfade auf und weisen Sie darauf hin, dass sich die .excalidraw-Datei zur Bearbeitung unter excalidraw.com öffnet.

02 Finden Sie Ihren Favoriten

Wann das diagram-Skill verwendet wird

Verwenden Sie den diagram Skill in Claude Code oder Codex, wenn die Aufgabe Diagramme und Charts dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Der Nutzer bittet darum, ein Diagramm zu erstellen, die Architektur zu zeichnen, ein Flussdiagramm anzulegen, dies zu diagrammieren oder einen Ablauf zu visualisieren.
Erstellung scharfer Vektordiagramme für die Dokumentation sowie Rasterausgaben für Chat, Issues oder READMEs.
Erzeugen einer bearbeitbaren Excalidraw-Datei, die der Nutzer unter excalidraw.com öffnen, Boxen verschieben und weiter bearbeiten kann.

Grenzen kennen

Diagramme mit mehr als 15 Knoten in einer einzigen Szene — zur besseren Lesbarkeit in mehrere Diagramme aufteilen.
State-, Klassen-, Gantt- und andere Mermaid-Typen außerhalb von Flowchart/Sequenzdiagramm erzeugen eine Excalidraw-Datei, die verschiebbar, aber nicht elementweise bearbeitbar ist.

Was Sie bereitstellen sollten

Englische Beschreibung oder Mermaid-QuelleDer Nutzer liefert eine Beschreibung des zu erstellenden Diagramms oder stellt vorhandenen Mermaid-Quellcode zum Rendern bereit.

03 Innerhalb des Skills

Regeln, die die Diagramm-Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Niemals ohne Rendering ausliefern
Eine .mmd-Datei allein ist kein Diagramm. Wenn Rendern nicht möglich ist (Bundle fehlt oder kein Browser verfügbar), machen Sie das Hindernis kenntlich und stoppen Sie.
Flussdiagramme und Sequenzdiagramme sind vollständig bearbeitbar
Flussdiagramme (graph LR/TD) und Sequenzdiagramme werden in vollständig bearbeitbare Excalidraw-Szenen mit echten Boxen, Pfeilen und Text umgewandelt. Andere Mermaid-Typen werden als ein einzelnes Bildelement exportiert.
Quelle für den Browser-Transport Base64-kodieren
Liefern Sie die Mermaid-Quelle über Base64 an die Render-Seite, um das Interpretieren von Backticks, ${ } und Backslashes in der Quelle zu vermeiden. Fügen Sie Dateiinhalte niemals direkt in ein JS-Template-Literal ein.
Ausgabeverzeichnis richtet sich nach dem Git-Kontext
Schreiben Sie nach ./diagrams/, wenn das cwd ein Git-Repository ist (Artefakte, die der Nutzer committen kann), sonst nach /tmp/gstack-diagrams/. Leiten Sie den Slug aus dem Thema in Kebab-Case ab, max. 40 Zeichen.
PNG-Breite ist fest auf 1950px
Das rasterisierte PNG ist immer 1950 Pixel breit, entsprechend 300dpi bei einer Platzierung von 6,5 Zoll.
Rendering läuft vollständig offline
Das diagram-render-Bundle ist eigenständig und wird über Loopback ausgeliefert. Kein CDN, kein Netzwerk.
Bearbeitetes Excalidraw neu rendern, ohne Mermaid anzufassen
Wenn der Nutzer eine .excalidraw-Datei bearbeitet und neu rendern möchte, laden Sie die Szenendatei und exportieren Sie direkt SVG/PNG — generieren Sie nicht erneut aus der Mermaid-Quelle.
Für PDF-Ziele bevorzugt .mmd einbetten
Bei Diagrammen, die in ein PDF eingehen, weisen Sie den Nutzer darauf hin, dass make-pdf Mermaid-Fences nativ rendert — die .mmd in Markdown einzubetten ist besser als das PNG einzubetten.

04 In Betrieb nehmen

diagram in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

diagram zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/garrytan/gstack --skill diagram

Generisches skills-CLI-Format für diagram/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Diagramm- und Chart-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Create a flowchart showing the build pipeline for [my TypeScript project]. Include lint, test, build, and deploy stages with their dependencies. Use graph LR layout and output to ./diagrams/.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Lesen Sie die PNG-Ausgabe inline, um zu prüfen, ob das Diagramm korrekt gerendert wurde und der Anfrage des Nutzers entspricht.
Prüfen Sie die gstack-render-Ausgabe auf ERROR:-Zeilen, die auf Mermaid-Parsefehler hinweisen — beheben Sie die .mmd-Datei und versuchen Sie es erneut, falls vorhanden.
Prüfen Sie die PAGE_ERRORS-Ausgabe auf 'Error processing Mermaid diagram', um festzustellen, ob der Excalidraw-Konverter auf ein einzelnes Bildelement zurückgefallen ist.
Überprüfen Sie, ob alle drei OK <path>-Zeilen in der gstack-render-Ausgabe erscheinen, was bestätigt, dass SVG-, PNG- und Excalidraw-Dateien geschrieben wurden.
Bei bearbeiteten Excalidraw-Re-Renders können Sie den harmlosen WorkerInTheMainChunkError in PAGE_ERRORS ignorieren — die SVG/PNG-Dateien sind korrekt.

In OpenDesign importieren Sie diagram über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branch main
Skill-Datei: diagram/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit 71f6048
License: MIT Aus LICENSE.
Repository-Sterne: 132.921 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository garrytan/gstack, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungsanzahl für diagram.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann diese Skill aufrufenVerwenden Sie sie für Anfragen zu Diagrammen, Architektur, Flowcharts oder Visualisierungen; SVG/PNG nutzen den Mermaid-Stil, Excalidraw hat eine handgezeichnete Ästhetik.
Schritt 1 — Diagramm erstellenSchreiben Sie Mermaid-Quellcode; Flowcharts und Sequenzdiagramme werden zu vollständig editierbarem Excalidraw, andere Typen werden als einzelnes Bild exportiert.
Schritt 2 — Render-Bundle bereitstellen (einmal pro Sitzung)Kopieren Sie diagram-render.html in das Render-Staging-Verzeichnis von gstack, inhaltsadressiert per SHA, ohne gleichzeitige Sitzungen zu überschreiben.
Schritt 3 — Das Triplett rendernSchreiben Sie .mmd, führen Sie gstack-render mit base64-codiertem Quellcode aus, Ausgabe als SVG/PNG/Excalidraw; prüfen Sie auf Parsefehler und PAGE_ERRORS.
Schritt 4 — Anzeigen und liefernLesen Sie PNG inline, listen Sie die Pfade des Tripletts auf, weisen Sie auf die Excalidraw-Editierbarkeit hin; für Änderungen bearbeiten Sie die .mmd-Datei und rendern erneut.
RegelnLiefern Sie niemals ohne Rendering aus; für PDF-Ziele weisen Sie den Nutzer darauf hin, dass make-pdf Mermaid-Fences nativ rendert.
AbschlussstatusDONE, wenn das Triplett geliefert wurde; BLOCKED, wenn das Bundle fehlt oder kein Browser verfügbar ist.

Die eigene Beschreibung des Skills

„Verwandeln Sie eine englische Beschreibung (oder Mermaid-Quelle) in ein Diagramm-Triplett: die Quelle, eine bearbeitbare .excalidraw-Datei, die Sie auf excalidraw.com öffnen können, und gerenderte SVG + PNG. (gstack)"

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 16.276 Zeichen. Die vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zur Skill diagram

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Was passiert, wenn das Render-Bundle fehlt oder kein Browser verfügbar ist?

Die Skill stoppt und fordert Sie auf, das Bundle durch Ausführen von bun run build:diagram-render im gstack-Repository zu erstellen oder Aside (macOS 15+) zu öffnen, falls der Browser von gstack nicht gebaut ist. Die Skill installiert Aside niemals selbst und ersetzt es nicht durch ein CDN oder einen anderen Renderer.

Diagram

Führen Sie diagram auf einer echten Diagramm- und Chart-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie diagram über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/garrytan/gstack --skill diagram

Was das diagram-Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann das diagram-Skill verwendet wird

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die die Diagramm-Skill Claude Code und Codex vorgibt

Niemals ohne Rendering ausliefern

Flussdiagramme und Sequenzdiagramme sind vollständig bearbeitbar

Quelle für den Browser-Transport Base64-kodieren

Ausgabeverzeichnis richtet sich nach dem Git-Kontext

PNG-Breite ist fest auf 1950px

Rendering läuft vollständig offline

Bearbeitetes Excalidraw neu rendern, ohne Mermaid anzufassen

Für PDF-Ziele bevorzugt .mmd einbetten