Diagramme als Code sind eine der besseren Ideen, die das Engineering im letzten Jahrzehnt aufgegriffen hat. Ein Diagramm, das in einer Textdatei lebt, kannst du reviewen, diffen und zurückrollen. Es reist mit dem Code, den es beschreibt, und geht nie im Download-Ordner von irgendwem verloren.
Es gibt einen Haken, und alle, die schon einmal ein Diagramm als Code gepflegt haben, wissen genau, welchen. Text ist eine wunderbare Art, ein Diagramm zu speichern, und eine miserable Art, eines anzuordnen. Sobald du einen einzigen Kasten zwei Zentimeter nach links schieben willst, steckst du wieder in der Syntax, rätst Ränge, Richtungen und unsichtbare Layoutregeln und renderst neu, bis die Engine das Ding endlich dort platziert, wo dein Auge es von Anfang an haben wollte.
Das Whiteboard ist die fehlende Hälfte
Leute greifen zum Whiteboard, weil es eine andere Frage beantwortet. Code beantwortet "was ist die Quelle der Wahrheit". Ein Whiteboard beantwortet "sieht das richtig aus". Du zeigst auf einen Kasten und ziehst ihn. Du kreist den riskanten Pfad rot ein. Du denkst nicht darüber nach, wie das Layout kodiert ist, denn es gibt keine Kodierung; es gibt nur das Bild und deine Hand.
LetDraw meint: Du solltest nicht wählen müssen. Füge deinen Diagramm-Code ein, und er wird zu echten, editierbaren Formen auf einer Leinwand. Kein flaches Bild, das du nur ansehen kannst, sondern echte Kästen und Pfeile, die du greifen kannst. So eine Quelle haben die meisten Teams ohnehin schon im Repo:
graph TD A[Client] --> B[API Gateway] B --> C[Auth Service] B --> D[Orders Service] D --> E[(Database)]
Importiere dieses Mermaid, und LetDraw gibt dir kein Bild davon. Es gibt dir den Graphen als Formen, die du verschieben kannst:
Jetzt ist der mühsame Teil vorbei. Du hast keine einzige Layout-Direktive feinjustiert. Du hast einen ersten Entwurf geschenkt bekommen, und alles auf der Leinwand kannst du nach Belieben anpassen.
Einen Kasten verschieben, die Notiz korrigieren, den Pfad hervorheben
Weil der Import echte Formen erzeugt, funktioniert die Whiteboard-Hälfte einfach. Du erledigst die Dinge, die in Text mühsam und von Hand trivial sind:
- Einen Kasten verschieben, wohin dein Auge ihn haben will, ohne zur Kontrolle neu zu rendern
- Neu gestalten, damit der Knoten, auf den es ankommt, sich vom Rest abhebt
- Eine Notiz hinzufügen neben dem Teil, nach dem Reviewer immer fragen
- Einen Pfad hervorheben, um den Request-Fluss zu zeigen, der dich heute interessiert
Die Pfeile helfen, statt dich zu bekämpfen. Native Pfeilspitzen an Anfang und Ende sind eingebaut, dazu hohle UML-Spitzen für Vererbung und ER-Krähenfuß-Kardinalität für Schema-Arbeit. Du zeichnest nie eine Markierung von Hand oder fälschst eine Notation mit einem gedrehten Dreieck. Und wenn du einen Kasten über einen anderen ziehst, führen intelligente Verbinder den Pfeil automatisch um deine Formen herum, sodass die Linie sauber bleibt, statt quer durch einen Knoten zu schneiden.
In Text sollte ein Diagramm leben. Auf einer Leinwand sollte es angeordnet werden. Du solltest nicht eins von beiden wählen müssen.
Auf den Hin- und Rückweg kommt es an
Dieser Teil hält das Ganze ehrlich. Wenn du mit dem Zurechtrücken fertig bist, exportierst du die Zeichnung zurück nach Mermaid oder D2. Das Diagramm kehrt als Code in dein Repo zurück, im Pull Request reviewbar wie alles andere. Der Kreislauf sieht so aus:
- Code in deinem Repo ist die Quelle der Wahrheit, gedifft und reviewt
- Leinwand ist, wo ein Mensch das Diagramm anordnet und lesbar macht
- Wieder Code auf dem Rückweg, damit das verbesserte Layout als Text ausgeliefert wird
Dieser letzte Schritt trennt "ich habe einmal ein Diagramm importiert" von "Diagramme als Code, die ein Mensch tatsächlich gern pflegt". Die Syntax ist keine Mauer mehr. Du behältst die Reviewbarkeit von Code und die Ergonomie eines Whiteboards, und keins von beiden muss verlieren.
Mermaid und D2 ausprobieren: so geht es
Öffne eine Leinwand, wähle "Aus Code generieren" und füge ein Mermaid- oder D2-Snippet ein, das du schon hast. Zieh die Kästen, bis es sich so liest, wie du es an eine Wand zeichnen würdest. Dann exportiere es zurück in Code und leg es in dein Repo. Der ganze Weg, von Code über Leinwand zurück zu Code, dauert etwa so lange wie das Lesen dieses Textes.