Mermaid Design

Erste Schritte

mermaid.design ist ein kostenloser Online-Editor für Mermaid-Diagramme. Schreiben Sie die Mermaid-Syntax links und sehen Sie das Diagramm rechts live gerendert. Alles läuft vollständig in Ihrem Browser — Ihre Diagramme verlassen niemals Ihr Gerät.

Ihr erstes Diagramm

  1. Öffnen Sie mermaid.design — der Editor lädt mit einem Beispiel-Flussdiagramm.
  2. Bearbeiten Sie den Mermaid-Code im linken Bereich, zum Beispiel:
flowchart TD
    A[Start] --> B{Bereit?}
    B -- Ja --> C[Veröffentlichen]
    B -- Nein --> D[Weiter coden]
  1. Die Vorschau wird während der Eingabe automatisch neu gerendert (mit kurzem Debounce). Ist die Syntax ungültig, bleibt das letzte gültige Diagramm hinter einer Fehleranzeige sichtbar, und der Code-Editor markiert die fehlerhafte Zeile.

Die Werkbank

Der Editor ist eine Werkbank mit drei Bereichen:

  • Code-Editor (links) — ein Monaco-Editor (derselbe Kern wie VS Code) mit Mermaid-Syntaxhervorhebung, Inline-Fehlermarkierungen und einer Symbolleiste zum Formatieren/Kopieren/Löschen. Sie können ihn zu einer schmalen Symbolleiste einklappen oder den Teiler ziehen, um die Breite anzupassen.
  • Vorschau (Mitte) — das live gerenderte Diagramm. Ziehen zum Verschieben, Strg/⌘ + Scrollen zum Zoomen, Doppelklick zum Einpassen. Eine schwebende Symbolleiste bietet Zoom-Steuerungen und einen Umschalter für den Canvas-Hintergrund (Punkte / Weiß / Schachbrett).
  • Design-Panel (rechts) — Voreinstellungen per Klick, fein abgestimmte Theme-Variablen und Theme-Generierung aus einer Ausgangsfarbe. Siehe unten.

Auf schmalen Bildschirmen wird die Werkbank zu einem einzelnen Bereich mit einer unteren Tab-Leiste Code / Vorschau / Design.

Rendermodi

Verwenden Sie die Segmentsteuerung in der Navigationsleiste, um zu ändern, wie Ihr Diagramm gerendert wird:

  • Offiziell — die Standard-Mermaid-SVG-Ausgabe, genau so, wie die Mermaid-Engine sie rendert.
  • ASCII — Ihr Diagramm als Textgrafik, die Sie in Code-Kommentare, Dokumentationen oder Terminals einfügen können. Siehe ASCII-Rendering.

Der Modus ist Teil der URL, sodass Sie einen Link zu einem bestimmten Modus als Lesezeichen speichern oder teilen können.

Themes

Jedes Diagramm wird mit dem base-Theme plus über 70 bearbeitbaren Theme-Variablen gerendert:

  • Voreinstellungen — die 11 integrierten Mermaid-Themes (Default, Neutral, Forest, Dark, Base und mehr) plus Designer-Voreinstellungen, jeweils mit Mini-Vorschau.
  • Theme-Variablen — feinjustieren Sie einzelne Farben, Rahmen und Schriften nach Gruppe, mit Suche.
  • Generieren — leiten Sie ein komplettes Theme aus einer einzigen Ausgangsfarbe ab, hell oder dunkel.

Ihre Arbeit wird automatisch gespeichert

Der Editor speichert Code, Theme und Layout im lokalen Speicher Ihres Browsers. Schließen Sie den Tab und kommen Sie später zurück — Ihr Diagramm ist noch da. Nichts wird auf einen Server hochgeladen.

Nächste Schritte