Wenn du die Architektur deiner Apps dokumentierst, schiebst du wahrscheinlich in Miro, Figma oder einem anderen Whiteboard-Tool Boxen und Pfeile hin und her. Ändert sich dann etwas am Code, musst du das Diagramm mühsam nachziehen.
In diesem Artikel zeige ich dir eine Alternative: den Skill Archify. Du erfährst, was er kann, wie du ihn installierst und welche Diagramme ich damit für eine echte SaaS-App erstellt habe.
Was ist Archify?
Archify ist ein kostenloses Open-Source-Projekt, das in der AI-Engineering-Szene gerade die Runde macht. Es ist ein Skill, also eine Arbeitsanleitung, die du einem Coding Agent mitgibst. Archify funktioniert mit Claude Code, Cursor, Codex und anderen Agents.
Du beschreibst, was visualisiert werden soll, und der Agent setzt es um. Das Besondere: Er kann das Diagramm direkt aus deiner aktuellen Codebase ableiten. Statt eines statischen Bildes bekommst du ein interaktives Diagramm, das dir Details zu einzelnen Knoten und Verbindungen anzeigt.
Archify unterstützt fünf Diagrammtypen:
| Diagrammtyp | Wofür |
|---|---|
| Architektur | Aus welchen Systemen besteht die App, wie hängen sie zusammen? |
| Workflow | Abläufe, Prozessschritte, Freigaben |
| Sequenz | Welche Aufrufe passieren in welcher Reihenfolge? |
| Datenfluss | Woher kommen Daten, wohin fließen sie? |
| Lifecycle | Zustände und Übergänge, etwa eines Abos oder einer Bestellung |
Das beschränkt sich nicht auf Technik. Du kannst damit auch Geschäftsprozesse darstellen.
Auf der Projektwebsite von Archify findest du eine Hilfe, die dir je nach Use Case den passenden Diagrammtyp empfiehlt, und eine Übersicht aller Typen und Darstellungsvarianten.
Archify installieren
Den Installationsbefehl findest du im GitHub-Repository. Er lautet:
npx skills add tt-a1i/archify
Du hast zwei Wege:
- In der Claude Desktop App: Gib Claude einfach den Link zum Repository und lass ihn den Skill selbst installieren.
- Im Terminal: Führ den Befehl oben aus.
Ich arbeite lieber in einer IDE, also einem Code-Editor wie VS Code, mit der Claude-Erweiterung. Dort habe ich Ordnerstruktur, Dateiinhalte und Claude nebeneinander. Gerade bei größeren Projekten ist das deutlich übersichtlicher als die Desktop App.
Beim Installieren fragt der Installer, für welche Coding Agents der Skill eingerichtet werden soll. Claude Code ist schon vorausgewählt. Die Option „Symlink“ kannst du ebenfalls wählen. Das ist praktisch, wenn du mit mehreren Coding Agents am selben Projekt arbeitest, weil alle auf dieselbe Kopie des Skills zugreifen.
Das erste Diagramm aus deiner Codebase
Mein Testprojekt ist eine SaaS-App, die bereits live ist. Sie sammelt Feedback zu Produkten, etwa aus Umfragen oder App-Store-Bewertungen, wertet es mit einer KI-Integration aus und macht daraus einen Report mit Handlungsempfehlungen.
Statt selbst zu überlegen, welche Diagramme sinnvoll sind, frage ich zuerst Claude:
/archify Bitte erstell mir ein paar Vorschläge für Diagramme, die du passend zu dieser Applikation erstellen kannst.
Claude hat vier Vorschläge gemacht: eine Gesamtübersicht der Architektur, einen Workflow der Feedback-Analyse als Kernfunktion, den Zahlungsprozess mit Stripe und verschiedene Datenflüsse. Ich habe mit der Architekturübersicht angefangen, dem klassischen Einsatzfall für Archify: Aus welchen Systemen besteht die Anwendung, wo gibt es Abhängigkeiten, welche Daten werden ausgetauscht?
Was Archify im Projekt anlegt
Die Diagramme landen bei mir im Ordner docs/diagrams. Zu jedem Diagramm gibt es zwei Dateien:
- eine HTML-Datei, die das Diagramm darstellt,
- eine JSON-Datei, aus der die Darstellung erzeugt wird.
Außerdem findest du dort Bilddateien. Die entstehen, weil Claude während der Erstellung selbst prüft, ob das Ergebnis passt: Er macht Screenshots der HTML-Datei, kontrolliert sie, bessert nach und wiederholt das, bis das Diagramm vollständig und funktional ist.
Ein Blick ins interaktive Diagramm
Die HTML-Datei öffnest du einfach im Browser. Oben findest du einige Einstellungen:
- Hell- und Dunkelmodus
- Verschiedene Stile, etwa Signal Flow, Blueprint oder Editorial
- Präsentationsmodus, der alle Details ausblendet
- Export als PNG, JPEG, SVG und weitere Formate
Im Architekturdiagramm meiner App sieht man: Der Nutzer arbeitet mit der Next.js-App. Der App-Container enthält mehrere Komponenten, und die Verbindungen zeigen, welche Daten jeweils übertragen werden. Im Backend hängt Supabase mit Authentifizierung und Datenbank, gehostet in Frankfurt. Von den Server Actions gehen Verbindungen zu den externen Diensten: Upstash für Rate Limiting, die Claude API, Stripe für Zahlungen, Brevo für transaktionale E-Mails und Better Stack für Error Tracking.
Jeden Knoten kannst du anklicken. Dann siehst du Details, darunter die Dateien, in denen die Anbindung konfiguriert ist, und die ein- und ausgehenden Datenströme. Das ist der eigentliche Mehrwert gegenüber einem Whiteboard: Das Diagramm verweist auf den echten Code.
Dazu gibt es weitere Ansichten:
- Pfad-Modus: Du klickst zwei Knoten an und siehst, wie sie verbunden sind.
- Übersichtskarte: hilft bei großen Diagrammen, den Überblick zu behalten.
- Vergleich: zeigt die Beziehung zwischen mehreren Knoten.
Weitere Diagramme aus der Praxis
Eine einzelne Funktion als Workflow
Als Nächstes habe ich die Kernfunktion visualisieren lassen: vom Einfügen des Feedbacks über die Analyse bis zum fertigen Report. Das Diagramm ist in Stufen gegliedert. Pro Stufe siehst du, welche Aktionen passieren, wie die Knoten zusammenhängen und welche Daten ausgetauscht werden.
Der Geschäftsprozess der App
Kein technisches Diagramm, sondern der Weg eines Kunden: Registrierung, Abschluss eines Pro-Abos, 100 Credits pro Feedback-Analyse, Feedback einfügen, KI-Analyse, Report mit abgeleiteten Maßnahmen. Am Ende entscheidet der Kunde, ob er weitermacht oder das Abo kündigt, weil die App ihren Zweck erfüllt hat.
Gerade für Product Manager und Founder ist das nützlich, weil du Geschäftslogik und technische Umsetzung mit demselben Werkzeug dokumentierst.
Mein eigener Entwicklungsworkflow
Zum Schluss habe ich meinen eigenen Entwicklungsprozess dokumentiert:
- Produktidee: für ein neues oder ein bestehendes Produkt.
- Projekt initialisieren: Bei Greenfield-Projekten, also Projekten auf der grünen Wiese, legt Claude alle relevanten Dokumente wie das PRD (Product Requirements Document) an. Bei bestehenden Projekten analysiert er das System und dokumentiert es rückwirkend.
- Features ableiten: Die Anforderungen werden in einzelne Features heruntergebrochen.
- Spezifikation: Für jedes Feature entsteht eine Spezifikation.
- Systemdesign: Welche Seiten braucht es, welche Komponenten pro Seite, wie hängt alles zusammen?
- Aufgabenplanung: Daraus entstehen Tasks mit klaren Vorgaben für den Coding Agent.
- Implementierung: Der Agent setzt den Plan um.
- Qualitätssicherung: Ein unabhängiger QA-Schritt prüft, ob umgesetzt wurde, was geplant war, und nur das. Er schreibt Tests und stellt sicher, dass alles bereit für den Produktivbetrieb ist.
- Deployment: Erst dann wird veröffentlicht.
Einordnung: Dokumentation, die mit dem Code mitwächst
Archify ist ein sehr hilfreiches Werkzeug und kostenlos. Der größte Vorteil ist nicht die Optik, sondern dass die Diagramme aus deinem tatsächlichen Code entstehen. Ändert sich die Architektur, lässt du das Diagramm einfach neu erzeugen, statt Boxen von Hand zu verschieben.
Gute Diagramme ersetzen aber keinen sauberen Prozess. Je größer dein Projekt wird, desto wichtiger ist ein fester Ablauf von der Spezifikation bis zur Qualitätssicherung, wie im letzten Diagramm oben. Warum das gerade mit Coding Agents so entscheidend ist, erkläre ich in Vibe Coding vs. Spec-Driven Development.
