Überblick
Mit einem Mermaid-Diagramm stellst du Abläufe und Zusammenhänge direkt in deinen Notizen grafisch dar. Schreibe Mermaid-Code selbst oder beschreibe Lara, welches Diagramm du brauchst, damit sie den Code erstellt.
Die Vorschau wird beim Bearbeiten automatisch aktualisiert. Du kannst den Code ausblenden, um nur das Diagramm zu zeigen, und das Ergebnis als SVG oder PNG exportieren.
Wann du ihn nutzt
Zeige einen Arbeitsablauf oder einen Prozess als Flussdiagramm.
Veranschauliche die Schritte und Nachrichten zwischen mehreren Beteiligten mit einem Sequenzdiagramm.
Ordne Ideen und Themen in einer Mindmap.
Dokumentiere ein System oder einen technischen Ablauf als Diagramm in deinen Notizen.
Funktionen und Einstellungen
Einstellung
Mermaid-Code ausblenden
Nutze „Hide code“, wenn in der Ansicht nur das Diagramm erscheinen soll. Mit „Show code“ blendest du den Quelltext wieder ein.
Eingebaut
Diagramme mit Lara erstellen
Beschreibe in „Diagram description“, welches Diagramm du brauchst, und wähle „Generate diagram“. Lara erstellt daraus Mermaid-Code.
Eingebaut
Code bearbeiten und Vorschau prüfen
Bearbeite den Mermaid-Code direkt im Block. Die Diagrammvorschau wird automatisch aktualisiert.
Eingebaut
Diagramme exportieren
Exportiere das fertige Diagramm über „Export SVG“ oder „Export PNG“.
So nutzt du ihn
Mermaid-Diagramm-Block hinzufügen
Füge den Mermaid-Diagramm-Block in eine Seite ein.
Code schreiben oder Diagramm beschreiben
Gib Mermaid-Syntax in den Codebereich ein oder öffne „Generate with AI“ und beschreibe dein gewünschtes Diagramm.
Diagramm mit Lara generieren
Wenn du die KI-Funktion nutzt, trage deine Beschreibung bei „Diagram description“ ein und wähle „Generate diagram“.
Vorschau kontrollieren
Prüfe das Ergebnis in der Diagrammvorschau. Beim Bearbeiten des Codes wird sie automatisch aktualisiert.
Code ausblenden oder exportieren
Blende den Quelltext mit „Hide code“ aus oder exportiere das Diagramm mit „Export SVG“ beziehungsweise „Export PNG“.
Wo er funktioniert
Auf jeder Seite
Im /-Menü
In Board-Karten
Andere Blöcke umwandeln
Eigenes Einstellungsfenster
Lara fügt ihn für dich ein
Beispiele
Bestellprozess mit Fehlerfällen
Zeige als Flussdiagramm, wie eine Bestellung vom Checkout bis zur Zahlung läuft und was bei einer fehlgeschlagenen Zahlung passiert.
Anmeldung mit Token
Stelle in einem Sequenzdiagramm dar, wie sich Nutzer, Anwendung und Authentifizierungsdienst beim Login austauschen.
Projektideen ordnen
Fasse Themen und Unterthemen eines Projekts in einer Mindmap zusammen.
Tipps · Grenzen
Tipps
Beschreibe bei der KI-Generierung, welche Schritte, Beteiligten oder Verzweigungen im Diagramm vorkommen sollen.
Prüfe die Vorschau nach Änderungen am Code, um Fehler beim Rendern früh zu erkennen.
Blende den Code aus, wenn du im Dokument den Fokus auf die Darstellung legen möchtest.
Wähle SVG oder PNG passend dazu, wie du das Diagramm weiterverwenden willst.
Grenzen
Der Block lässt sich nicht über das Slash-Menü einfügen.
Wenn der Mermaid-Code nicht gerendert werden kann, erscheint keine Diagrammvorschau.
Der Block verwendet Mermaid-Code als Diagrammquelle.
Häufige Fragen
Wie erstelle ich ein Mermaid-Diagramm in meinen Notizen?
Füge einen Mermaid-Diagramm-Block in eine Seite ein. Schreibe Mermaid-Code direkt hinein oder beschreibe dein Diagramm über „Generate with AI“.
Kann Lara ein Mermaid-Diagramm für mich erstellen?
Ja. Beschreibe das gewünschte Diagramm unter „Diagram description“ und wähle „Generate diagram“. Lara erstellt den Mermaid-Code.
Wie bearbeite ich den Mermaid-Code?
Ändere den Quelltext im Codebereich des Blocks. Die Vorschau aktualisiert sich automatisch.
Wie zeige ich nur das Diagramm und nicht den Code?
Wähle „Hide code“, um den Quelltext auszublenden. Mit „Show code“ kannst du ihn wieder anzeigen.
Kann ich ein Mermaid-Diagramm als Bild exportieren?
Ja. Mit „Export SVG“ exportierst du es als SVG und mit „Export PNG“ als PNG.
Baue deine nächste Seite mit Mermaid-Diagramme
Öffne Workspace, tippe / und füge ihn in Sekunden hinzu. Kostenlos starten, ohne Kreditkarte.