Technische Dokumentation scheitert oft nicht am Wissen, sondern am Werkzeug. Du weißt, wie dein System aufgebaut ist. Aber ein sauberes Architekturdiagramm kostet dich eine halbe Stunde Figma oder Draw.io, bevor du auch nur einen Pfeil gezogen hast. fireworks-tech-graph ist ein Claude Code Skill, der diesen Umweg abschneidet.
Der Skill erzeugt produktionsreife technische Diagramme als SVG oder PNG, direkt aus Claude Code. Du beschreibst dein System auf natürliche Weise, der Skill übernimmt die Übersetzung in ein strukturiertes, exportierbares Diagramm.
Was ist fireworks-tech-graph?
fireworks-tech-graph ist ein öffentlich verfügbarer Claude Code Skill für technische Visualisierungen. Er deckt acht Diagrammtypen ab: Systemarchitekturen, Sequenzdiagramme, Datenfluss-Diagramme, Entity-Relationship-Modelle und weitere gängige Formate aus der Software-Dokumentation. Dazu wählst du aus fünf visuellen Stilen, von minimalistisch bis detailreich.
Ein zentraler Unterschied zu Mermaid oder PlantUML: Beide verlangen eine eigene Syntax, die du erst lernen musst. Bei fireworks-tech-graph beschreibst du das Diagramm auf Deutsch oder Englisch in natürlicher Sprache. Claude übernimmt die Übersetzung und gibt dir valides SVG zurück.
Besonders durchdacht ist das Domänenwissen für KI- und Agent-Systeme. Der Skill kennt Konzepte wie Multi-Agent-Pipelines, RAG-Architekturen und LLM-Toolchains. Er ordnet sie korrekt in ein Diagramm ein, ohne dass du jede Komponente einzeln erklären musst. Das macht ihn gerade für Teams nützlich, die KI-Systeme bauen und deren Architektur für Stakeholder oder externe Entwickler aufbereiten.
Die Ausgabe ist kein Entwurf, den du nachbearbeiten musst. Pfeilrichtungen, Boxenbeschriftungen und Legenden sind direkt verwendbar. SVG lässt sich verlustfrei skalieren und in Markdown-Dokumente, README-Dateien oder Confluence-Seiten einbetten. PNG-Export eignet sich für Präsentationen, Slack-Posts oder E-Mails.
Installation und erste Nutzung
Den Skill installierst du einmalig im Terminal deines Projekts:
npx skills add yizhiyanhua-ai/fireworks-tech-graph
Danach steht er in jeder Claude Code Sitzung zur Verfügung. Du rufst ihn per Slash-Befehl auf und gibst Typ sowie Stil an:
/tech-diagram type:architecture style:minimal title:"Backend-Überblick"
Zeige drei Komponenten: Auth-Service, API-Gateway und PostgreSQL-Datenbank.
Auth-Service und API-Gateway kommunizieren per REST.
API-Gateway liest und schreibt in die Datenbank.
Externe Nutzer greifen über HTTPS auf den API-Gateway zu.
Claude Code verarbeitet die Beschreibung und gibt eine SVG-Datei aus. Du kannst sie direkt in deine Dokumentation einfügen, ohne die Datei zu öffnen oder nachzubearbeiten.
Weitere Diagrammtypen rufst du mit denselben Parametern ab: type:sequence für Sequenzdiagramme, type:dataflow für Datenflüsse, type:er für Entity-Relationship-Modelle. Die vollständige Liste der Typen und Stile findest du im README des Repositories.
Praxisbeispiel: Architekturdoku für ein neues Projekt
Stell dir vor, du startest ein neues SaaS-Produkt und brauchst eine Systemübersicht für dein Team. Früher: Figma öffnen, Boxen zeichnen, Pfeile setzen, exportieren, einfügen. Mit fireworks-tech-graph beschreibst du die Architektur einmal in Klartext, der Rest passiert automatisch.
Ein realistisches Beispiel aus dem Arbeitsalltag: Du willst zeigen, wie ein Webhook-Event von Stripe durch dein System läuft. Du beschreibst den Fluss in zwei, drei Sätzen, wählst type:sequence und style:detailed, und erhältst ein Sequenzdiagramm mit allen Akteuren, Pfeilen und Beschriftungen.
Der eigentliche Vorteil zeigt sich über Zeit. Ändert sich deine Architektur, generierst du das Diagramm neu. Keine Figma-Datei suchen, keine Pfeile manuell verschieben. Das hält Dokumentation aktuell, ohne dass dafür jemand extra Zeit einplanen muss.
Für Teams, die KI-Systeme entwickeln, kommt das eingebaute Agent-Domänenwissen dazu. Eine RAG-Pipeline oder ein Multi-Agent-Workflow lässt sich genauso schnell dokumentieren wie eine klassische REST-Architektur. Der Skill kennt die Terminologie und setzt sie korrekt um.
Für wen lohnt sich fireworks-tech-graph?
Der Skill eignet sich gut für drei Gruppen. Erstens: Engineering-Teams, die ihre Systemdokumentation nah am Code halten wollen und keine Zeit für manuelle Zeichenwerkzeuge haben. Zweitens: Tech-Writer, die regelmäßig Architekturgrafiken erstellen, aber kein Designwerkzeug beherrschen. Drittens: Entwickler im KI- und Agent-Bereich, die Systemüberblicke für Stakeholder aufbereiten.
Weniger geeignet ist der Skill für sehr komplexe Diagramme mit dutzenden Komponenten oder für Grafiken, die streng nach Corporate-Design gestaltet sein müssen. Für solche Fälle bleibt ein dediziertes Zeichenwerkzeug die bessere Wahl.
Wer sich für ähnliche Visualisierungstools für Claude Code interessiert, findet im Artikel über graphify für Codebase-Visualisierung einen verwandten Ansatz. graphify bildet ganze Code-Repositories als Knowledge-Graph ab und hilft Claude, auch in großen Projekten präzise zu navigieren.
FAQ
Kann fireworks-tech-graph interaktive Diagramme erstellen?
Nein. Der Skill erzeugt statische SVG- und PNG-Dateien. Für interaktive Visualisierungen mit Zoom oder klickbaren Elementen brauchst du ein anderes Tool.
Brauche ich Mermaid- oder PlantUML-Kenntnisse?
Nein. Du beschreibst das Diagramm auf Deutsch oder Englisch in natürlicher Sprache. Der Skill übersetzt das intern und gibt valides SVG aus.
Funktioniert der Skill auch für einfache Prozessflüsse?
Ja. Datenflüsse und einfache Prozessdarstellungen funktionieren gut. Der Skill ist auf technische Diagramme spezialisiert, nicht auf Organigramme oder Marketing-Funnels.
Marcel Porcher, newways.ai
Du willst Claude Code, Automatisierung und Agent-Coding mit anderen Entwicklern vertiefen? Komm in die kostenlose Claude Business Community. Dort lernst du, die KI für dein Business einzusetzen: Zeit sparen, Kosten senken, Business skalieren. Zur kostenlosen Community