Was ist archify?
Ein Skill, den Claude Code, Codex, OpenCode oder Cursor laden. Der Agent schreibt eine kleine JSON-Beschreibung, archify zeichnet daraus das Diagramm.
Geprüft statt geraten
Ein Validator meldet überlappende Beschriftungen, Linien quer durch Bausteine oder falsche Anschlussseiten – der Agent korrigiert, bis alles sauber ist.
Eine Datei, überall lesbar
Das Ergebnis ist eine einzelne HTML-Datei ohne externe Abhängigkeiten. Zum Ansehen braucht niemand archify – nur einen Browser.
Fünf Diagrammtypen
Der Agent wählt den Typ passend zur Frage. Mermaid-Code (flowchart, sequenceDiagram, stateDiagram) kann man einfach einfügen – archify übernimmt die Bedeutung und zeichnet neu.
architectureKomponenten, Dienste, Cloud- und Sicherheitsgrenzen
workflowAbläufe, Freigaben, CI/CD, Runbooks
sequenceAPI-Aufrufketten und Request-Lebenszyklen
dataflowETL/ELT, Pipelines, Datenherkunft
lifecycleStatusübergänge, Wiederholungen, Endzustände
Installation
Voraussetzung ist Node.js ≥ 18. Der Befehl lädt den Skill aus dem offiziellen Repository und kopiert ihn global in das Skill-Verzeichnis des jeweiligen Agenten.
🤖 Claude Code Skill
npx -y skills add tt-a1i/archify --skill archify --agent claude-code --global --copy --yes
⚡ Codex CLI Skill
npx -y skills add tt-a1i/archify --skill archify --agent codex --global --copy --yes
🛠️ OpenCode Skill
npx -y skills add tt-a1i/archify --skill archify --agent opencode --global --copy --yes
✨ Alle erkannten Agenten kurz
npx skills add tt-a1i/archify -g
Gut zu wissen: Codex und OpenCode teilen sich den Ordner
~/.agents/skills, Claude Code nutzt ~/.claude/skills. Nach der Installation den Agenten neu starten, damit er den Skill findet. Skills laufen mit den vollen Rechten des Agenten – vorher ansehen lohnt sich.So benutzt man es
Einfach in normaler Sprache mit dem Agenten reden. Danach lässt sich das Diagramm im Gespräch weiter verfeinern: „Authentifizierung ergänzen“, „Cache-Pfad hervorheben“, „helles Design“.
Aus einer Beschreibung
Zeichne mit archify eine Webanfrage: Der Browser ruft die API, die API fragt Redis, bei einem Cache-Miss liest sie PostgreSQL und füllt den Cache.
Aus echtem Code
Lies dieses Repository und zeichne mit archify die Architektur des Upload-Moduls – mit Dateiverweisen an den Bausteinen.
Aus der Praxis: Das Beispiel oben ist die anonymisierte Fassung eines Diagramms, das archify aus einem echten Projekt erzeugt hat – Frontend, API, zwei Hintergrund-Worker, OCR, KI-Modell und ERP-Abgleich. Der Agent hat den Code gelesen, mehrere Korrekturrunden mit dem Validator gedreht und das Ergebnis im Browser bei vier Bildschirmgrößen geprüft.
Was im Diagramm steckt
Hell & Dunkel Viewer
Umschalten jederzeit, dazu vier Stile: Classic, Signal Flow, Blueprint und Editorial.
Pfade & Fokus Viewer
Suchen, zoomen, einen Baustein fokussieren und alle Verbindungen von A nach B hervorheben.
Geführte Ansichten Story
Bis zu fünf Kapitel, die nacheinander einzelne Teile des Systems zeigen – ideal zum Präsentieren.
Export Teilen
PNG, JPEG, WebP, SVG oder als WebM-Video – oder einfach die HTML-Datei weitergeben.