Beginnen Sie nicht mit einem leeren Editor. mermaid.design enthält eine integrierte Galerie fertiger Diagrammvorlagen — öffnen Sie eine, passen Sie den Code an und machen Sie sie zu Ihrer eigenen.
Die Galerie öffnen
Klicken Sie in der Navigationsleiste auf Vorlagen, um die Galerie für den aktuellen Rendermodus zu öffnen:
/templates— Vorlagen, gerendert mit der offiziellen (SVG-)Engine und Ihrem aktiven Theme/ascii/templates— dieselben Vorlagen als ASCII-Grafik gerendert
Jede Galeriekarte wird live mit Ihrem aktuellen Theme gerendert — was Sie sehen, ist genau das, was Sie im Editor zurückerhalten.
Eine Vorlage finden
Die Galerie umfasst Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, ER-Diagramme, Gantt-Diagramme, Kreisdiagramme, Git-Graphen, Mindmaps, User Journeys und mehr.
Verwenden Sie die Filter-Chips oben, um die Liste nach Diagrammtyp einzugrenzen. Wenn eine Vorlage vom aktuellen Rendermodus nicht unterstützt wird (z. B. können manche Diagrammtypen noch nicht als ASCII gerendert werden), wird sie automatisch ausgeblendet, und ein Hinweis zeigt, wie viele Vorlagen herausgefiltert wurden.
Eine Vorlage anwenden
- Klicken Sie auf eine Vorlagenkarte.
- Bestätigen Sie den Überschreiben-Dialog — das Anwenden einer Vorlage ersetzt den aktuell im Editor befindlichen Code. Dies kann nicht rückgängig gemacht werden.
- Sie kehren mit dem geladenen und gerenderten Vorlagencode zum Editor zurück.
Klicken Sie in der Galerie auf Zum Editor in der Navigationsleiste, um zum Editor zurückzukehren, ohne etwas anzuwenden.
Tipps
- Wenden Sie zuerst eine Vorlage an und wechseln Sie dann das Theme — die Vorlage übernimmt Ihre Theme-Variablen sofort.
- Vorlagen sind ein großartiger Weg, die Mermaid-Syntax zu lernen: Öffnen Sie eine, bearbeiten Sie den Code und beobachten Sie, wie sich die Vorschau ändert.