Tools· Design & Kreativ

fireworks-tech-graph

Open-Source-Werkzeug zur bilingualen Generierung produktionsreifer technischer SVG- und PNG-Diagramme aus natürlichsprachigen Beschreibungen, mit UML- und KI-Architektur-Mustern.

generierendgestaltendausführbarOpen Source

Zum Anbieter

Beschreibung

Das Open-Source-Projekt wurde ursprünglich als Skill für Claude Code konzipiert und unterstützt mehrere visuelle Stile, darunter Flat-Icon, Dark-Terminal, Blueprint, Notion-Clean und Glassmorphism, dazu alle 14 UML-Diagrammtypen. Ergänzt wird das um vorgefertigtes Wissen zu gängigen KI- und Agenten-Architekturmustern wie Retrieval Augmented Generation, Agentic Search, Mem0 und Multi-Agent-Flows, sodass sich entsprechende Diagramme direkt aus einer Beschreibung ableiten lassen.

Das Projekt ist primär in Python geschrieben, Dokumentation und Community sind zweisprachig Englisch und Chinesisch gepflegt, was bei Rückfragen oder Beiträgen relevant sein kann. Als Community-Projekt eines einzelnen Autors beziehungsweise einer kleinen Gruppe unterscheidet es sich von etablierten Diagramm-Werkzeugen mit größerem Ökosystem und breiterer Unterstützung.

Für Voyage Digital ist das Werkzeug eher ein Nischen-Helfer für technische Dokumentation und Architektur-Visualisierung als ein breit etabliertes Standardwerkzeug, Reife und Update-Takt sind vor einem Produktiveinsatz zu prüfen.

Stärken

12 visuelle Stile

Elf generatorbasierte Profile plus ein KI-verfasster Stil (Dark Luxury) stehen zur Auswahl.

Vollständige UML-Abdeckung

14 Diagrammtypen decken unter anderem Klassen-, Komponenten-, Deployment-, Sequenz- und Zustandsdiagramme ab.

Geometrie-sicheres Routing

Deterministische orthogonale Linienführung mit festen Wegpunkten, automatischer Legendenplatzierung und geprüften Kreuzungsbrücken.

Strukturierte SVG-Validierung

XML- und Markerintegrität werden ebenso geprüft wie Knoten, Beschriftungen sowie Kanten-Überlappungen und -Kreuzungen.

Einheitliches CLI mit interaktivem Export

Rendern, Validieren und Inspizieren aus einem Befehl, Export auch als eine offline nutzbare HTML-Datei mit Pan, Zoom und Themes.

Über 40 Produkt-Icons

Markenfarbige Icons für Anbieter wie OpenAI, Anthropic, Pinecone, Weaviate, Kafka und PostgreSQL sind hinterlegt.

Einschätzung

KI-Funktionen

Natürlichsprachige Diagrammerzeugung Eine Systembeschreibung in Englisch oder Chinesisch wird automatisch in Diagrammtyp und passenden Stil übersetzt.
Agentengesteuerte Validierungsschleife Der erste Renderentwurf gilt als Kandidat, ein begrenzter Feedback-Loop aus deterministischer und visueller Prüfung führt zum verifizierten Ergebnis, standardmäßig mit höchstens zwei gezielten Korrekturdurchläufen.
Visuelle Rückschau Exportierte PNGs werden auf Beschneidung, Überlappung, Beschriftungsplatzierung und Routing-Fehler geprüft, bevor ein Ergebnis als abgeschlossen gilt.
Vorgefertigte KI-Architekturmuster Muster für RAG, Agentic Search, Mem0 und Multi-Agent-Flows sind als Domänenwissen hinterlegt und lassen sich direkt referenzieren.
Semantisches Formen- und Pfeilvokabular Komponenten wie LLM, Agent oder Vector Store erhalten feste Symbole, Pfeilfarbe und -muster codieren Schreib-, Lese-, Async- und Loop-Beziehungen.

Wofür geeignet

Entwickler und technische Autoren, die Architektur- oder UML-Diagramme aus Textbeschreibungen statt manuell in einem Diagramm-Editor erzeugen wollen
Teams, die Diagramme zu KI- und Agenten-Architekturen wie RAG, Multi-Agent- oder Tool-Call-Flows mit vorgefertigten Mustern brauchen
Nutzer von Claude Code oder ähnlichen KI-Coding-Umgebungen, die Diagramm-Erzeugung direkt als Skill einbinden möchten
Weniger geeignet für Weniger geeignet für Teams, die einen etablierten, breit unterstützten Diagramm-Standard mit großem Ökosystem benötigen

Einschränkungen und Hinweise

Community-Projekt Wird von einem einzelnen Autor beziehungsweise einer kleinen Gruppe gepflegt, Reife und Update-Takt sind vor einem Produktiveinsatz zu prüfen.
Visuelle Prüfung nicht garantiert Kann die Laufzeitumgebung keine Bilder lesen, wird die visuelle Prüfung übersprungen und im Status ausdrücklich als übersprungen ausgewiesen, statt eine ungeprüfte Freigabe zu behaupten.
Begrenzte Selbstkorrektur Die Validierungsschleife erlaubt standardmäßig höchstens zwei gezielte Korrekturdurchläufe, das begrenzt auch die automatische Fehlerbehebung.
Ausgelegt auf Skill-Einbindung Die empfohlene Installation bindet das Werkzeug als Skill in Claude Code oder Codex ein, für andere Umgebungen ist eigener Integrationsaufwand nötig.

Quick Start

Skill über die `skills`-CLI installieren, für beide Runtimes gemeinsam: `npx -y [email protected] add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy`. Das legt vollständige Kopien unter `~/.agents/skills/fireworks-tech-graph` (Codex) und `~/.claude/skills/fireworks-tech-graph` (Claude Code) an.
Alternativ ein editierbares Git-Checkout anlegen, zum Beispiel für Claude Code mit `git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph`.
Das gewünschte Diagramm als natürlichsprachige Beschreibung formulieren, etwa „Generate a Mem0 memory architecture diagram, dark style", das System wählt daraus Diagrammtyp und Stil.
Ergebnis als SVG und 1920px-PNG entgegennehmen und bei Bedarf über das CLI validieren oder in eine interaktive HTML-Datei exportieren.
Updates mit `git -C ~/.claude/skills/fireworks-tech-graph pull` oder erneutem Ausführen des `skills`-CLI-Befehls einspielen.

Tipps

Für eine gemeinsame Nutzung durch Codex und Claude Code ein einzelnes editierbares Checkout anlegen und über symbolische Links in beide Discovery-Pfade einbinden, statt zwei getrennte Kopien zu pflegen.
Im Prompt das Szenario und den gewünschten Stil explizit benennen und die Komposition-Vorgaben wie maximale Kreuzungen, Abstände und Randbreiten mit angeben, für konsistentere Ergebnisse.
Vor dem produktiven Einsatz den Status von Validierung und visueller Prüfung im Ergebnis kontrollieren, statt sich allein auf den ersten Renderentwurf zu verlassen.
Reifegrad und Aktivität des Repositorys vor jedem Einsatz auf GitHub prüfen, da es sich um ein Community-Projekt ohne festen Update-Takt handelt.

Zugang

fireworks-tech-graph ist Open Source und über GitHub kostenlos nutzbar, die Installation erfolgt etwa durch Klonen des Repositorys in die eigene Skill- oder Projektumgebung. Ein aktueller Blick auf github.com/yizhiyanhua-ai/fireworks-tech-graph lohnt sich, um Reifegrad und Aktivität des Projekts vor dem Einsatz einzuschätzen.

Alternativen

lucidchart.com — kommerziell

Lucidchart

Etabliertes kommerzielles Diagramm-Tool für UML- und Architekturdiagramme mit Team-Kollaboration.

eraser.io — freemium

Eraser.io

KI-gestützter Diagram-as-Code-Dienst für technische Architektur- und Sequenzdiagramme aus Text.

miro.com — freemium

Miro

Weit verbreitetes Whiteboard mit kommerziellen Vorlagen für technische und UML-Diagramme.

whimsical.com — freemium

Whimsical

Kommerzielles Tool für schnelle Flowcharts und technische Diagramme mit KI-Unterstützung.

Stand: 27. Juli 2026 · Angaben zu Preisen, Tarifen und Funktionen sind eine Momentaufnahme. Vor einer Entscheidung lohnt der Blick auf die Anbieterseite.

Im Workshop wird daraus Ihre Methode.

Wer diesen Prozess einmal laufen sieht, will als Nächstes den Agenten dahinter. Das bauen wir im Workshop Vom Prozess zum Agenten.

Workshops ansehen

Passend dazu

Alle Ressourcen ansehen

Skills

Das Bildwerk

Erstellt als ausführbarer Claude-Skill mit echter Code-Ausführung ein originales visuelles Werk als PDF oder PNG: zunächst eine eigene Design-Philosophie, danach deren museal anmutende Umsetzung mit minimalem, integriertem Text.

fireworks-tech-graph

Beschreibung

Stärken

Einschätzung

Quick Start

Tipps

Zugang

Alternativen

Lucidchart

Eraser.io

Miro

Whimsical

Im Workshop wird daraus Ihre Methode.

Passend dazu

Das Bildwerk

Adobe Firefly

Canva

Claude Design

ComfyUI

Freepik

Krea

liquid-glass-js

Liquid Logo

Magnific

Midjourney

Napkin AI

Playground AI

React Three Fiber

ShaderGradient

Stitch

transitions.dev-Skill

Das Foliengerüst

21st.dev

Aceternity UI

Gespräch statt Pitch