archify: die klickbare Karte des Codes, den Claude dir geschrieben hat

Was es ist und warum es zählt

Claude hat dir ein ganzes Projekt geschrieben. Es läuft, aber drei Wochen später weißt du nicht mehr, was mit was zusammenhängt: welche Datei mit der Datenbank spricht, was du riskierst, wenn du diese Funktion änderst.

archify ist ein Skill, also ein Paket aus Anweisungen und Skripten, das Claude nutzt, wenn es gebraucht wird. Du bittest in einem Satz um die Karte: Claude liest die Projektdateien und archify zeichnet eine HTML-Datei, mit den Hauptteilen als Kästen und den Verbindungen als Pfeilen. Vor der Übergabe prüft es, ob Pfeile und Beschriftungen passen; scheitert eine Prüfung, korrigiert Claude.

Es ist kostenlos und Open Source (Apache-2.0-Lizenz), mit mehr als 90.000 Sternen auf GitHub Ende Oktober. Es ist für alle, die allein mit Claude Code bauen und ihr Projekt verstehen oder einem Kunden erklären wollen. Es läuft auch mit Codex, Cursor und OpenCode.

1. In Claude Code installieren

Du brauchst Claude Code mit Node.js auf deinem Rechner. Auf claude.ai im Browser hängt es davon ab, ob die Sandbox Zugriff auf Node.js hat: Gedacht ist es für Claude Code. Füge im Projektordner den offiziellen Satz ein:

Install Archify for me by reading https://raw.githubusercontent.com/tt-a1i/archify/main/llms.txt

Claude liest die Anleitung, sagt dir, was es ausführen wird, und fragt, ob du es in allen Projekten (global) oder nur in diesem willst. Dann installiert es und startet die doctor-Prüfung: archify ist erst bereit, wenn sie besteht.

Im Terminal ist es eine einzige Zeile. --copy kopiert die Dateien, statt sie zu verlinken, --yes überspringt die Fragen; ohne --global gilt es nur für den Ordner, in dem du es startest:

npx -y skills@latest add https://archify.si --skill archify --agent claude-code --global --copy --yes

Dann die Prüfung, mit dem Pfad, den der Installer am Ende ausgibt (bei Claude Code meist ~/.claude/skills/archify):

node ~/.claude/skills/archify/bin/archify.mjs doctor

2. Die Karte deines Projekts

Kopiere im Projektordner diese Anfrage. Es ist die offizielle, übersetzt:

Analysiere dieses Repository und erstelle dann mit archify ein Architekturdiagramm der Laufzeit auf hoher Ebene. Zeige 8 bis 12 Kernkomponenten, einen Hauptpfad, die externen Abhängigkeiten und die Vertrauensgrenzen. Pack die Details in Karten, statt weitere Pfeile hinzuzufügen.

Externe Abhängigkeiten sind die Dienste, die nicht dir gehören: Datenbank in der Cloud, Zahlungen, E-Mail. Vertrauensgrenzen sind die Stellen, an denen Daten an einen Teil gehen, den du nicht kontrollierst, etwa vom Browser zu deinem Server. Und 8 bis 12 Teile sind der Kern: 40 Kästen liest niemand.

Claude folgt, wer wen aufruft, vom Einstiegspunkt des Projekts bis dorthin, wo Daten hereinkommen, hinausgehen oder gespeichert werden. Am Ende gibt es dir den Link zur Datei, die auch im Ordner .archify des Projekts liegt.

Wenn das Projekt öffentlich auf GitHub liegt, füge „verknüpfe jede Komponente mit den Dateien und Zeilen, die sie belegen“ hinzu: Die Kästen bekommen ein SRC-Zeichen und öffnen den Code, aus dem sie stammen. Committe vorher: archify zitiert den letzten Commit, nicht deine offenen Änderungen.

3. Ohne Code: von einer Idee ausgehen

Ein Repository brauchst du nicht: Eine Idee, ein Plan, ein Ablauf reichen. Claude braucht nur irgendeinen Ordner, um die Datei zu schreiben.

Mach mit archify aus dieser Beschreibung ein Architekturdiagramm auf hoher Ebene: [wer das Produkt nutzt, die Hauptteile, der Hauptpfad, die externen Dienste]. Es gibt kein Repository. Frag mich nur nach Fakten, die das Diagramm wirklich verändern, markiere Unbekanntes als unbekannt und halte einen klaren Hauptpfad.

Zum Ausprobieren in zehn Sekunden: „Zeichne mit archify: Browser -> API -> Redis-Cache -> PostgreSQL, wenn der Cache die Daten nicht hat“. Dann machst du weiter, eine Änderung pro Nachricht:

• „Füge die Authentifizierung hinzu.“
• „Hebe den Pfad hervor, wenn der Cache die Daten nicht hat.“
• „Schieb die Authentifizierung nach links.“
• „Wechsle zum hellen Design.“

4. Eine einzige Seite für Leute, die nicht programmieren

Manchmal lautet die Frage „Wie funktioniert das?“. archify macht auch eine einzige Seite: zuerst die Antwort, dann ein Panel pro Frage. Die Schritte stehen neben dem Diagramm und lassen beim Lesen die Teile aufleuchten, um die es geht.

Beantworte mit archify auf einer einzigen Seite, die ich einem Kunden schicke, der nicht programmiert: Wie funktioniert [die Zahlung] in meiner App, vom Klick des Nutzers bis zur [Quittung]? Zuerst das Fazit, dann die Schritte neben dem Diagramm des Pfads. Einfache Worte, kein Fachjargon.

Auch das ist eine HTML-Datei: Sie lässt sich als langes Bild exportieren oder als PDF drucken.

5. Die Tasten, um die Karte zu erkunden

Öffne die Datei im Browser deines Computers. Ab hier brauchst du archify nicht mehr: Alles steckt in der Datei.

• Klick auf einen Teil: Die verbundenen Teile leuchten auf und seine Karte öffnet sich, mit dem, was hineingeht und was herauskommt. Esc schließt sie.
• Upstream und Downstream, in der Karte: alles, was zu diesem Teil führt, oder alles, was von dort ausgeht, Schritt für Schritt.
• R: der Weg. Klick auf Start und Ziel, archify zeigt den kürzesten Weg entlang der Pfeile, und du kannst ihn ablaufen lassen.
• /: einen Teil nach Namen suchen. ?: die Anleitung der Karte, mit den Aktionen, die diese Datei erlaubt.
• E: exportieren. T: helles oder dunkles Design. S: Stil wechseln. F: Präsentation, die Karte füllt das ganze Fenster, praktisch in einem Call.
• + und - zum Zoomen, 0 für die Ausgangsansicht. Live animiert die Pfeile, Still hält sie an.

Die Pfeile sind die, die Claude in die Karte geschrieben hat: Upstream und Downstream folgen diesen, nicht dem laufenden Programm. Sie zeigen dir, wo du hinschauen sollst, nicht die Auswirkung einer Änderung: Den Code liest du selbst.

6. Schick sie einem Kunden

Die Karte ist eine einzige Datei. Du schickst sie per E-Mail oder im Chat, wer sie bekommt, öffnet sie im Browser und hat alles, ohne etwas zu installieren. Nur externe Links, etwa zum Code auf GitHub, brauchen eine Verbindung.

Für ein Bild auf einer Folie drück E:

• Die ganze Karte als PNG in die Zwischenablage oder zum Herunterladen als PNG, JPEG, WebP, SVG und als animiertes WebM-Video.
• Route Share Card: nachdem du mit R einen Weg gezogen hast, ein Bild in 1200×630 mit diesem Weg hervorgehoben und dem Rest der Karte drumherum.
• Reach Share Card: dasselbe, nach Upstream oder Downstream.

Bilder kann man nicht anklicken: Wenn der Kunde erkunden soll, schick ihm das HTML. Und lies vorher Beschriftungen und Karten: Sie können Details deines Codes enthalten, die du nicht zeigen willst.

Häufige Fehler

• „Zeichne das ganze Projekt“ verlangen: Heraus kommt eine Karte, die keiner lesen kann. Verlange 8 bis 12 Teile und einen Pfad oder eine Funktion nach der anderen.
• Die Pfeile für die Wahrheit halten: Die Prüfungen von archify sagen, dass die Zeichnung sauber ist, nicht dass sich das Programm so verhält.
• Die Karte auf dem Handy öffnen: Sie ist nicht für kleine Bildschirme gedacht. Nimm den Computer.
• Einen Link suchen, um sie online zu teilen: archify hostet keine Karten. Du schickst die Datei oder ein Bild.

Checkliste

• Ich habe archify installiert und die doctor-Prüfung hat bestanden
• Ich habe die Karte meines Projekts mit 8 bis 12 Teilen und einem Pfad angefordert
• Ich habe einen Teil angeklickt und Upstream und Downstream ausprobiert
• Ich habe mit R einen Weg gezogen und seine Share Card exportiert
• Ich habe die HTML-Datei jemandem geschickt und er hat sie ohne Installation geöffnet

Häufige Fragen