Tippen Sie Pfeile wie User -> API -> Database und erhalten Sie ein fertig angeordnetes Architektur- oder Ablaufdiagramm. Gruppen für den Überblick einklappen, Schritte für Details nummerieren.
100%
Tippen Sie links eine Zeile wie User -> App -> Database oder doppelklicken Sie hier für einen Kasten.
Kästen ziehen, um sie zu verschieben. Doppelklick zum Umbenennen oder Hinzufügen. Den Punkt an einem Kasten ziehen, um ihn zu verbinden. Ctrl+Z macht rückgängig.
Nichts wird hochgeladen: Das Diagramm bleibt in Ihrem Browser und in den Links, die Sie teilen.
Über Systemdiagramm-Editor
Auf einem Whiteboard zeichnen Sie jeden Kasten und jeden Pfeil und richten alles von Hand aus. Hier tippen Sie, wer mit wem spricht, eine Zeile pro Pfeil, und das Layout entsteht von selbst. Fassen Sie zusammengehörige Dienste in einer Gruppe zusammen und klappen Sie sie für den Überblick zu einem Kasten ein.
Was es tut
Automatisches Layout, von links nach rechts oder von oben nach unten, das sich beim Tippen aktualisiert.
Formen nach dem Namen: DB wird zur Datenbank, Kafka zur Warteschlange, User zur Person, ein Name mit ? zur Entscheidung.
Gruppen, die sich zu einem Kasten einklappen lassen, damit ein Diagramm Überblick und Detail zugleich zeigt.
Kästen auch auf der Fläche ziehen, verbinden, umbenennen und hinzufügen; jede Änderung landet im Text.
Nummerierte Schritte, Handzeichnungs-Stil, PNG- und SVG-Export und Teilen per Link. Nichts wird hochgeladen.
So funktioniert's
1Zeilen wie User -> Web App -> Orders DB tippen oder mit einer Vorlage beginnen.
2Gruppen mit Name { ... }, Beschriftungen nach einem Doppelpunkt und --> für asynchrone Aufrufe hinzufügen.
3Zwischen Übersicht und Details wechseln, Kästen per Ziehen ordnen, dann exportieren oder einen Link kopieren.
Fragen
Was ist anders als bei Excalidraw?
Excalidraw ist ein freies Whiteboard: Sie setzen jede Form und jeden Pfeil selbst. Hier ist der Text das Diagramm und das Layout automatisch, ein neuer Dienst ist also eine Zeile statt Kästen zeichnen und neu ausrichten. Für eine lockere Skizze passt Excalidraw weiterhin besser.
Wie zeige ich Überblick und Detail?
Legen Sie zusammengehörige Kästen mit Name { ... } in eine Gruppe. Übersicht klappt jede Gruppe zu einem Kasten ein und fasst ihre Pfeile zusammen; Details öffnet sie wieder. Einzelne Gruppen lassen sich auch über ihre Kopfzeile einklappen.
Wird mein Diagramm irgendwo gespeichert?
Nein. Es wird in Ihrem Browser gezeichnet und in dessen lokalem Speicher gehalten. Ein geteilter Link trägt das Diagramm im Link selbst, hinter dem Zeichen #, das Browser nie an den Server senden.
Kann ich ein Mermaid-Flussdiagramm einfügen?
Nicht direkt, einen Mermaid-Import gibt es nicht. Einfache Zeilen wie A -> B funktionieren, aber drei Dinge unterscheiden sich. Löschen Sie die Kopfzeile graph TD, sonst wird sie zu einem Kasten, und schreiben Sie stattdessen direction: down. Entfernen Sie Mermaid-Beschriftungen in eckigen Klammern, denn Text in [ ] wird hier als Form- und Farb-Tag gelesen. Und --> zeichnet hier einen gestrichelten Pfeil für einen asynchronen Aufruf, in Mermaid ist es ein normaler Pfeil; für einen durchgezogenen schreiben Sie ->.
Was kann ich außer A -> B schreiben?
A -> B: Text beschriftet den Pfeil, A --> B zeichnet einen gestrichelten Pfeil, A <-> B einen Doppelpfeil und A <- B zeigt rückwärts. Name [db, blue] legt Form und Farbe fest; die Formen heißen service, db, cache, queue, actor, client, storage, external, decision, terminal und note. title: benennt das Diagramm, direction: down ordnet es von oben nach unten an, und eine Zeile, die mit # oder // beginnt, ist ein Kommentar. Ein Diagramm fasst bis zu 300 Kästen, 600 Pfeile und 20.000 Zeichen Text.