Meerjungfrauendiagramme

Das Meerjungfrauendiagramm bringt die Erstellung nativer Diagramme direkt in den Editor. Angetrieben von Mermaid.js ermöglicht es dir, textbasierte Diagrammsyntax zu schreiben und ein gerendertes, visuelles Diagramm in Echtzeit zu sehen – und das alles, ohne deinen Dokumentationsbereich zu verlassen. Diagramme werden als editierbarer Quellcode neben einem gerenderten Bild gespeichert. Das bedeutet, dass deine Diagramme immer neu bearbeitet werden können und nie zu veralteten statischen Screenshots werden.

Was ist Mermaid.js?

Mermaid.js ist eine Open-Source-Diagrammbibliothek, die die Syntax von Klartext in visuelle Diagramme umwandelt. Anstatt Formen manuell in einem separaten Tool zu zeichnen, beschreibt man das Diagramm in Text und Meerjungfrau rendert es. Document360 bettet Mermaid.js direkt im Editor ein, sodass der gesamte Workflow ohne Verlassen deines Artikels stattfindet.

Beispiel: Die folgenden vier Textzeilen ergeben ein vollständiges Flussdiagramm:

graph TD
  A[User submits ticket] --> B{Priority?}
  B -- High --> C[Notify on-call team]
  B -- Low  --> D[Add to backlog]

Wann man Meerjungfrauendiagramme verwenden sollte

Verwenden Sie Meerjungfrauendiagramme, wenn Ihr Inhalt einen Prozess, eine Beziehung oder eine Struktur beinhaltet, die schwerer allein in Worten zu erklären ist. Einige gängige Szenarien:

• Ein technischer Autor , der einen Genehmigungsfluss oder eine Onboarding-Reise dokumentiert
• Ein Entwickler oder Architekt , der eine API-Interaktion, Systemarchitektur oder ein Datenbankschema illustriert
• Ein Produktmanager , der eine User Journey kartiert oder einen Projektzeitplan visualisiert
• Ein Support-Team , das ein Fehlerbehebungs-Flussdiagramm oder einen Eskalationspfad erstellt

Wenn du eine Abfolge von Schritten oder Verbindungen zwischen Komponenten über mehrere Absätze hinweg beschreibst, kommuniziert ein Diagramm das fast immer schneller.

Wichtige Vorteile

Einfügen eines Meerjungfrauendiagramms

Um ein Meerjungfrauendiagramm in Ihren Artikel einzufügen:

1. Klicken Sie in den Artikeltext, wo das Diagramm erscheinen soll.
2. Gib (vorwärts Schrägstrich) ein / , um das Befehlsmenü für Schrägstrich auszulösen.
3. Gib Mermaid ein, um die Vorschläge zu filtern.
4. Wählen Sie das Meerjungfrauendiagramm aus dem Dropdown-Menü.

Auswahl einer Vorlage

Sobald du das Einfügen des Meerjungfrauendiagramms auslöst, erscheint die Vorlagenauswahlmodalität. Hier wählst du den Ausgangspunkt für dein Diagramm.

• Aus einer Vorlage – Durchsuchen oder durchsuchen Sie die 23 verfügbaren Vorlagen und klicken Sie dann auf eine. Der Editor beginnt mit der vorgeladenen Syntax dieser Vorlage.
• Von leer – Klicken Sie auf Leer, um den Editor mit einem leeren Syntaxpanel zu öffnen. Nutze das nur, wenn du die Syntax der Meerjungfrauen bereits kennst.

Auswahl einer Vorlage

1. Durchstöbern Sie die 23 Vorlagenkarten oder geben Sie ein Schlüsselwort (z. B. flow, sequence, gantt) in die Suchleiste ein.
2. Klicken Sie auf die Vorlagenkarte, die zu dem passt, was Sie erstellen möchten.
3. Der Editor beginnt mit der vorgeladenen Syntax dieser Vorlage. Bearbeite es weiter, um es zu deinem Inhalt zu passen.

Verwendung einer leeren Leinwand

1. Klicken Sie auf die Option "Leer" im Vorlagenraster.
2. Der Editor öffnet mit einem leeren Syntaxpanel.
3. Gib deine Meerjungfrau-Syntax von Grund auf ein.

Schreiben und Vorschauen Ihres Diagramms

Der Meerjungfrauen-Diagrammeditor ist ein Arbeitsbereich mit zwei Panels. Im linken Panel schreibst du deine Meerjungfrauensyntax. Das rechte Panel zeigt dir eine Live-Vorschau des Diagramms, während du tippst.

1. Beginnen Sie mit einer Diagrammtypangabe in der ersten Zeile. Das sagt Mermaid, welche Art von Diagramm man darstellen soll.

   Diagrammtyp	Erste Linie
   Flussdiagramm (von oben nach unten)	graph TD
   Flussdiagramm (von links nach rechts)	graph LR
   Sequenzdiagramm	sequenceDiagram
   Klassendiagramm	classDiagram
   Gantt-Diagramm	gantt
   Zustandsdiagramm	stateDiagram-v2
   Entitäts-Beziehungsdiagramm	erDiagram
   Tortendiagramm	pie
   Mindmap	mindmap

2. Füge Knoten, Verbindungen und Beschriftungen auf die folgenden Zeilen hinzu. Jede Zeile, die du tippst, aktualisiert sofort die Vorschau rechts.

3. Wenn du mit einer Vorlage arbeitest, ersetze einfach den Platzhaltertext durch deine eigenen Labels und Verbindungen.

Wenn deine Syntax sehr lange Zeilen hat (z. B. lange Knotenbeschriftungen oder detaillierte Kantenbeschreibungen), klicke auf den Umlaufcode-Schalter unter dem Syntaxpanel, um lange Zeilen innerhalb der sichtbaren Editorbreite zu umwickeln. Dies beeinflusst nicht die Ausgabe des Diagramms – es ändert nur, wie der Code im Editor angezeigt wird.

Vorschausteuerung

Das rechte Panel aktualisiert sich sofort, während du tippst. Nutze die Vorschausteuerung, um dein Diagramm vor dem Einfügen zu inspizieren.

Heranzoomen / Rauszoomen – Klicken Sie auf die Zoom- (+) - oder Rauszoom-(−)- Tasten, um die Vergrößerung der Vorschau zu erhöhen oder zu verringern. Verwenden Sie diese, um bestimmte Teile eines komplexen Diagramms zu inspizieren, ohne die tatsächliche Diagrammgröße im Artikel zu beeinflussen.

Anpassen zum Bildschirm – Klicken Sie auf das Symbol "Anpassen zum Bildschirm" ( ), um den Zoomlevel zurückzusetzen, sodass das gesamte Diagramm im Vorschaubereich sichtbar ist, ohne zu scrollen. Verwenden Sie dies für eine abschließende Überprüfung vor dem Einfügen.

Erweitern / Einblenden — Klicken Sie auf das Expandieren ( ) Symbol in der Werkzeugleiste des Vorschaufelds, um den Syntaxeditor auszublenden, und erweitern Sie die Vorschau, um die gesamte modale Breite auszufüllen. Klicken Sie auf das Klappen- ( ) -Symbol, um zur Split-Panel-Ansicht zurückzukehren und mit der Bearbeitung fortzufahren.

Umgang mit Syntaxfehlern

Wenn deine Syntax ungültig ist, zeigt die Vorschau einen Fehler an und der Einfügen-Button ist deaktiviert.

1. Lies die Fehlermeldung. Es enthält die Zeilennummer, die das Problem verursacht.
2. Korrigiere diese Zeile im Syntaxpanel.
3. Die Vorschau aktualisiert sich automatisch. Sobald sie gültig ist, wird der Einfügen-Button aktiv.

Häufige Fehler und Korrekturen

:::(Vorsicht) (

Das Diagramm in den Artikel einfügen

Sobald die Vorschau korrekt und fehlerfrei ist, klicken Sie auf Einfügen. Document360 wandelt das Diagramm in ein SVG-Bild um und platziert es an deiner Cursorposition.

Für jedes Diagramm werden zwei Dinge gespeichert:

• Das gerenderte SVG-Bild – sichtbar im Artikel und auf der KB-Website.
• Die Meerjungfrau-Syntax – privat gespeichert, verwendet beim späteren Bearbeiten des Diagramms.

Verwaltung eines eingefügten Diagramms

Klicken Sie auf ein beliebiges eingefügtes Diagramm, um das Blasenmenü zu öffnen.

Bearbeitung eines bestehenden Diagramms

Jedes Meerjungfrauendiagramm, das Sie einfügen, kann jederzeit bearbeitet werden, selbst nachdem der Artikel veröffentlicht wurde. Die ursprüngliche Syntax wird immer gespeichert.

1. Klicken Sie auf das Diagramm und dann im Blasenmenü auf Diagramm bearbeiten .
2. Der Editor öffnet mit der gespeicherten Syntax und einer Live-Vorschau.
3. Mach deine Änderungen.
4. Klicken Sie auf Aktualisieren. Das Diagramm im Artikel wird ersetzt; Position und Ausrichtung bleiben erhalten.

Wenn du nach Änderungen auf Abbrechen oder (X) klickst, erscheint ein Bestätigungsdialog. Klicke auf Ja, verwerfe zum Beenden ohne Speichern, oder Nein, gehe zurück zum Weiterbearbeiten.

Wie Leser Ihre Diagramme sehen

Auf der Wissensdatenbank-Seite erscheinen Diagramme als statische SVG-Bilder, die im Artikel eingebettet sind. Leser können auf jedes Diagramm klicken, um eine Vollbild-Überlagerung zu öffnen, was für große oder komplexe Diagramme nützlich ist. Bearbeitungssteuerungen und Quellsyntax werden den Lesern nie zugänglich gemacht.

Best Practices

• Ein Diagramm, eine Idee. Wenn ein Flussdiagramm 15–20 Knoten übersteigt, wird es in ein Übersichtsdiagramm und ein Detaildiagramm aufgeteilt.
• Füge immer eine Bildunterschrift hinzu. Verwenden Sie die Beschriftungsoption im Blasenmenü, um jedes Diagramm zu beschriften. Es hilft den Lesern, den Kontext auf einen Blick zu verstehen.
• Verwende SVG für den externen Gebrauch. SVG ist unendlich skalierbar ohne Qualitätsverlust. Verwende PNG nur, wenn das Ziel-Tool kein SVG unterstützt.
• Kopieren auf Duplikat, nicht auf Neubau. Verwenden Sie die Aktion Blasen-Kopieren , um ein Diagramm zu duplizieren. Jede Kopie hat eine eigenständige Syntax – das Bearbeiten eines beeinflusst das andere nicht. Das Einfügen eines Meerjungfrauendiagramms außerhalb von Document360 (z. B. in ein anderes Werkzeug) fügt nur das Bild ein, nicht die Quellsyntax.

Verfügbare Vorlagen

Die folgenden Vorlagen sind im Bildschirm zur Vorlagenauswahl verfügbar. Suche nach Namen oder Schlüsselwort, um schnell das richtige zu finden.

FAQ