# Systemdiagramm-Editor

URL: https://discuvr.org/system-diagram/?hl=de
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

Architektur- und Ablaufdiagramme durch Tippen von A -> B. Automatisches Layout, einklappbare Gruppen, nummerierte Schritte, PNG- und SVG-Export.

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

1. Zeilen wie User -> Web App -> Orders DB tippen oder mit einer Vorlage beginnen.
2. Gruppen mit Name { ... }, Beschriftungen nach einem Doppelpunkt und --> für asynchrone Aufrufe hinzufügen.
3. Zwischen Ü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.

**Was passiert mit den Pfeilen, wenn ich eine Gruppe einklappe?**

Pfeile zwischen Kästen innerhalb der eingeklappten Gruppe werden ausgeblendet, und Pfeile, die ihren Rand kreuzen, beginnen oder enden nun am Gruppenkasten. Mehrere Pfeile zwischen denselben zwei Kästen werden zu einem dickeren Pfeil zusammengeführt, der die erste Beschriftung behält und eine Anzahl anhängt. Beispiel: Liegen Payments API und Ledger in Payments { ... }, werden die Zeilen Checkout -> Payments API und Checkout -> Ledger in der Übersicht zu einem Pfeil Checkout -> Payments x2. Eine Gruppe in einer eingeklappten Gruppe wird mit eingeklappt, und mit eingeschalteten Schritten folgen die Nummern den noch sichtbaren Pfeilen in der geschriebenen Reihenfolge.

## Mehr in Entwickler-Tools

- [JSON-Formatierer](https://discuvr.org/json-formatter/?hl=de)
- [Python Formatter](https://discuvr.org/python-formatter/?hl=de)
- [HTML-Viewer](https://discuvr.org/html-viewer/?hl=de)
- [IP-Subnetz-Rechner](https://discuvr.org/ip-subnet-calculator/?hl=de)

## Oft zusammen genutzt mit

- [Textvergleich](https://discuvr.org/text-diff/?hl=de)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.