Transcript
00:00:00Wir bitten unsere Coding-Agenten, ein Repo zu mappen, und plötzlich haben wir Kafka, Redis oder ein API-Gateway, das es gar nicht gibt.
00:00:07Die Diagramme sehen oft ordentlich aus, aber sie lassen vieles aus.
00:00:10Hier kommt Archify ins Spiel – ein Tool, bei dem der Agent nichts zeichnet.
00:00:14Er gibt einen typisierten Graphen aus, Archify validiert ihn und rendert dann das Diagramm.
00:00:19Das ist womöglich eine der besten Methoden, um unsere Architektur zu visualisieren.
00:00:23Das werden wir jetzt herausfinden.
00:00:30Nun, unser Modell sollte das Diagramm eigentlich überhaupt nicht zeichnen.
00:00:33Archify funktioniert so, dass es das System als strukturiertes, typisiertes JSON beschreibt.
00:00:37Das wird validiert, und erst danach wandelt ein lokaler Compiler es in das finale HTML um.
00:00:42Wenn der Graph ungültig ist, schlägt es fehl.
00:00:45Das ist Archify. Es hat in wenigen Monaten 44.000 Sterne erhalten, weil es direkt in Cloud Code, Cursor und Codex integriert wird.
00:00:53Ich möchte das also auf die Probe stellen.
00:00:54Ich werde Archify installieren, auf ein Repo verweisen und es eine Frage zur Architektur beantworten lassen.
00:01:00Danach sehen wir, ob wir dieses Ergebnis überhaupt in einem PR verwenden können.
00:01:03Es gibt ein paar Anwendungsfälle, in denen ich das absolut nicht nutzen würde, aber darauf gehen wir gleich ein.
00:01:08Wenn du Coding-Tools magst, die deinen Workflow beschleunigen, abonniere am besten den Kanal.
00:01:11Bei uns erscheinen laufend neue Videos.
00:01:13Okay, die Installation erfolgt über diesen einen Befehl hier.
00:01:17Und das ist keine App, die ich erst einrichten muss.
00:01:19Es ist আসলে eine Agenten-Fähigkeit (Skill).
00:01:22Nach der Installation kann ich dieselbe Fähigkeit aus Cloud Code oder einem der anderen zuvor genannten Tools nutzen,
00:01:28ohne den Editor oder auch nur meinen Workflow wechseln zu müssen.
00:01:32Jetzt kann ich ihm einen echten Auftrag erteilen.
00:01:34Ich werde ihn nicht bitten, die Architektur dieses Repos zu zeichnen.
00:01:37Das klingt zwar okay,
00:01:39aber im Endeffekt liefert uns das nur eine Menge Müll zurück.
00:01:42Daher stelle ich eine konkrete Frage.
00:01:45Verwende Archify, Architekturdiagramm, maximal 8 bis 12 Knoten.
00:01:49Was passiert bei einem Cache-Miss in diesem Service?
00:01:52Füge nur Boxen hinzu, die in diesem Repo existieren.
00:01:54Wenn du eine Komponente nicht belegen kannst, lass sie weg.
00:01:58Liefere ein in sich geschlossenes HTML.
00:02:00Das ist quasi ein Plan, eine Frage.
00:02:02Ungefähr 8 bis 12 Knoten.
00:02:04Denn wenn wir einen Agenten bitten, unsere gesamte Codebasis zu mappen, haben wir dann überhaupt etwas vereinfacht
00:02:08oder es nur schwerer verständlich gemacht?
00:02:10Jetzt habe ich meinen Repo-Baum einfach in ein Flussdiagramm verwandelt.
00:02:14Der Agent schreibt die Architektur als JSON.
00:02:16Dann validiert Archify sie.
00:02:18Ich kann diese Validierung auch direkt ausführen, wie ich es hier gleich tun werde.
00:02:23Das ist wirklich ein verdammt cooles Feature, das ich hier entdeckt habe.
00:02:27Knoten können auch Repo-Belege enthalten, die an einen Commit und einen bestimmten Zeilenbereich gebunden sind.
00:02:32Wenn dieser Nachweis fehlt, erhält der Knoten kein Quellcode-Badge, nur weil er in der Antwort
00:02:37überzeugend klingt.
00:02:39Na gut.
00:02:39Aber wie hilft uns das überhaupt weiter?
00:02:41Das sieht doch aus wie ein Architekturdiagramm.
00:02:43Ja, klar, aber man muss es nicht wie ein herkömmliches nutzen.
00:02:46Ich kann darin nach einem tatsächlichen Service suchen.
00:02:50Ich kann darauf klicken und sofort sehen, was upstream und downstream liegt.
00:02:55Dann kann ich diesen Pfad durchgehen und dem Cache-Miss-Pfad durch das System folgen.
00:02:59Anstatt also auf 10 Pfeile zu starren und sie mental zurückzuverfolgen, kann ich sie jetzt ablaufen.
00:03:05Und nicht nur das,
00:03:06ich kann das Ganze auch exportieren.
00:03:08Ich kann ein PNG kopieren oder eine Share-Card im Format 1200 mal 36 generieren.
00:03:13Der echte Unterschied zu Mermaid ist doch folgender, oder?
00:03:17Mermaid-Diagramme lese ich normalerweise nur.
00:03:20Hier kann ich Fragen an und gegen das Diagramm stellen.
00:03:23Und die Bewegung dient nicht dazu, schlechte Strukturen zu verbergen – exportierst du das Diagramm als statisches Bild,
00:03:28bleibt die Bedeutung trotzdem erhalten.
00:03:31Und es gibt einen zweiten Anwendungsfall, der vielleicht noch nützlicher ist, oder?
00:03:35Was meinst du?
00:03:36Nun, ich denke an Code-Reviews.
00:03:38Nehmen wir an, das ist das System vor einer Änderung.
00:03:41Dann füge ich einen bestehenden Retry-Worker hinzu.
00:03:44Ich kann dem Agenten sagen, er soll die Architektur aktualisieren, ohne sich etwas aus den Fingern zu saugen.
00:03:49Archify kann dann die beiden validierten Snapshots vergleichen: hinzugefügt, entfernt, verschoben, umgeleitet.
00:03:54Anstatt also zwei generierte Diagramme zu erhalten, sehe ich, was sich tatsächlich geändert hat.
00:03:59Und der Editor bleibt nach wie vor ein reiner Chat.
00:04:02Aber wenn ich möchte, dass diese Architektur die nächste Agenten-Session überdauert, committe ich das JSON.
00:04:07Zu diesem Zeitpunkt lässt sich Archify am einfachsten so zusammenfassen:
00:04:11Es ist eine HTML-VM für Systemkmaps, bei der der Coding-Agent das Front-End bildet.
00:04:15Das JSON ist die Zwischendarstellung.
00:04:19Das HTML ist das kompilierte Ergebnis.
00:04:21Und diese mittlere Schicht leistet einen Großteil der Arbeit.
00:04:24Das JSON folgt strengen Schemas.
00:04:26Unbekannte Felder führen zu Validierungsfehlern.
00:04:28Und es gibt fünf Diagramm-Modi:
00:04:30Architektur, Workflow, Sequenz, Datenfluss und Lebenszyklus.
00:04:34Eine der interessantesten Entscheidungen ist jedoch, was das Modell nicht kontrolliert:
00:04:38Das Layout.
00:04:39Das Modell beschreibt das System.
00:04:41Es entscheidet nicht genau, wo jede einzelne Box platziert wird.
00:04:44Sie haben tatsächlich themed Mermaid mit automatischem Degree-Layout ausprobiert.
00:04:48Das war nicht besser als normales Mermaid.
00:04:51Außerdem schlägt die Validierung nach dem Fail-Closed-Prinzip fehl.
00:04:54Schlechtes JSON wird keineswegs auf magische Weise zu einem hübschen Diagramm.
00:04:58Du erhältst Diagnosemeldungen, Regelcodes und unterstützte Korrekturen.
00:05:02Nun, wenn ich all das betrachte, würde ich Archify hier eher nicht einsetzen.
00:05:06Wenn du ein Diagramm direkt in deiner Readme-Datei brauchst, vielleicht lieber nicht.
00:05:10Das könnte etwas dauern.
00:05:11GitHub rendert es.
00:05:12Das Archify-HTML tut das nicht.
00:05:15Archify löst hier eine ganz andere Art von Problem.
00:05:18Es ist bereits ein Agent im Prozess.
00:05:20Dieser Agent generiert ein Architektur-Artefakt.
00:05:23Vielleicht fließt es in einen PR ein.
00:05:25Vielleicht geht es in ein Design-Review.
00:05:27Genau da fängt geprüfter Output an, wichtig zu werden.
00:05:30Es gibt vieles daran, was mir gut gefallen hat.
00:05:32Es läuft in Tools, die wir ohnehin jeden Tag verwenden.
00:05:35Ich kann den Output exportieren.
00:05:38Repo-Nachweise geben mir etwas Handfestes zum Überprüfen.
00:05:41Und da die Architektur strukturiert ist, kann ich sie weiterbearbeiten, ohne dass sich Dinge im Laufe der Zeit einfach verändern.
00:05:46Es sieht außerdem gut genug aus, dass ich vermutlich nicht das Bedürfnis hätte, das in Figma oder einem ähnlichen Tool neu zu zeichnen.
00:05:53Aber das heißt gleichzeitig auch: Archify kennt deine Architektur nicht.
00:05:58Ein Graph kann völlig valide sein und trotzdem das falsche System beschreiben.
00:06:02Du musst es immer noch lesen.
00:06:03Ein schlechtes Modell liefert, wie wir wissen, oft nur JSON, das zwar funktioniert, aber dennoch schlecht aussieht.
00:06:08Und wenn der finale Ablageort für dein Diagramm eine Readme ist, ist Mermaid hier vielleicht nach wie vor besser.
00:06:13Mit Archify committest du wahrscheinlich das JSON und HTML oder exportierst ein Bild.
00:06:18Und es gibt einen Fehler, den du hier unbedingt vermeiden solltest:
00:06:21Setze es nicht auf ein riesiges Repo an und sage: Mappe alles.
00:06:25Du kannst dir sicher denken, wie das ausgeht, weil du vermutlich einfach eine Ladung Müll zurückbekommst.
00:06:29Das ist allerdings kein Versagen von Archify.
00:06:32Es ist eher eine schlechte Fragestellung.
00:06:34Wenn du bereits mit Coding-Agenten arbeitest und regelmäßig Diagramme erstellst, die du oder andere dir später ansehen, macht das Sinn.
00:06:42PR-Reviews, Designdokumente – dafür würde ich das wahrscheinlich nutzen.
00:06:47Ich würde es mir nicht installieren, nur weil ich eine schöner gestaltete Version von etwas will, das wir bereits haben, wie zum Beispiel Mermaid.
00:06:52Und ich würde definitiv nicht erwarten, dass es für mich irgendetwas rückentwickelt.
00:06:55Die Einstiegshürde ist wirklich minimal.
00:06:58Ein npx-Befehl, Node auf dem Rechner.
00:07:00Hier gibt es keine Modellgewichte.
00:07:02Mein M4 Pro spielt dabei im Grunde keine Rolle.
00:07:05Aber es gibt eine Regel, die ich einhalten würde:
00:07:07Eine Frage pro Datei.
00:07:08Wenn du nicht klar benennen kannst, welche Frage das Diagramm beantwortet, generiere es gar nicht erst.
00:07:14Ich bin Josh von BetterStack.
00:07:15Wenn dir solche Coding-Tipps und -Tricks gefallen, abonniere unbedingt den Kanal.
00:07:19Wir sehen uns im nächsten Video.
00:07:20Wir sehen uns im nächsten Video.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video