Mindmap

Mindmap: Dies ist vorerst ein experimentelles Diagramm. Die Syntax und Eigenschaften können sich in zukünftigen Versionen ändern. Die Syntax ist stabil, außer für die Icon-Integration, die der experimentelle Teil ist.

"Eine Mindmap ist ein Diagramm, das verwendet wird, um Informationen visuell in einer Hierarchie zu organisieren und Beziehungen zwischen Teilen des Ganzen zu zeigen. Sie wird oft um ein einzelnes Konzept erstellt, das als Bild in der Mitte einer leeren Seite gezeichnet wird, zu dem assoziierte Darstellungen von Ideen wie Bilder, Wörter und Wortteile hinzugefügt werden. Hauptideen sind direkt mit dem zentralen Konzept verbunden, und andere Ideen verzweigen sich von diesen Hauptideen." Wikipedia

Ein Beispiel für eine Mindmap.

Syntax

Die Syntax zur Erstellung von Mindmaps ist einfach und basiert auf Einrückungen zur Festlegung der Ebenen in der Hierarchie.

Im folgenden Beispiel sehen Sie, wie es drei verschiedene Ebenen gibt. Eine, die am Anfang des Textes steht, und eine andere Ebene mit zwei Zeilen, die in derselben Spalte beginnt und den Knoten A definiert. Am Ende gibt es eine weitere Ebene, bei der der Text weiter eingerückt ist als die vorherigen Zeilen, die die Knoten B und C definieren.

mindmap
    Root
        A
            B
            C

Zusammenfassend ist es eine einfache Textgliederung, bei der es einen Knoten auf der Hauptebene namens Root gibt, der ein Kind A hat. A hat seinerseits zwei Kinder B und C. Im folgenden Diagramm sehen wir dies als Mindmap dargestellt.

Auf diese Weise können wir eine Textgliederung verwenden, um eine hierarchische Mindmap zu generieren.

Verschiedene Formen

Mermaid-Mindmaps können Knoten in verschiedenen Formen anzeigen. Bei der Angabe einer Form für einen Knoten ist die Syntax ähnlich wie bei Flussdiagrammnodes, mit einer ID, gefolgt von der Formdefinition, und dem Text innerhalb der Formbegrenzungen. Wo möglich, versuchen/will versuchen wir, die gleichen Formen wie für Flussdiagramme beizubehalten, auch wenn nicht alle von Anfang an unterstützt werden.

Mindmaps können die folgenden Formen zeigen:

Quadrat

Code:

Abgerundetes Quadrat

Code:

Kreis

Code:

Bang

Code:

Wolke

Code:

Sechseck

Code:

Standard

Code:

Weitere Formen werden hinzugefügt, beginnend mit den Formen, die in Flussdiagrammen verfügbar sind.

Icons und Klassen

Icons

Wie bei Flussdiagrammen können Sie Icons zu Ihren Knoten hinzufügen, jedoch mit einer aktualisierten Syntax. Das Styling für die fontbasierten Icons wird während der Integration hinzugefügt, damit sie auf der Webseite verfügbar sind. Dies ist etwas, das ein Diagramm-Autor nicht tun kann und mit dem Site-Administrator oder Integrator durchgeführt werden muss. Sobald die Icon-Schriften vorhanden sind, fügen Sie sie zu den Mindmap-Knoten mit der Syntax ::icon() hinzu. Sie platzieren die Klassen für das Icon innerhalb der Klammern wie im folgenden Beispiel, wo Icons für Material Design und Font Awesome 5 angezeigt werden. Der Plan ist, dass dieser Ansatz für alle Diagramme verwendet werden sollte, die Icons unterstützen. Experimentelles Feature: Dieser breitere Umfang ist auch der Grund, warum Mindmaps experimentell sind, da sich diese Syntax und der Ansatz ändern könnten.

Code:

Klassen

Erneut ist die Syntax zum Hinzufügen von Klassen ähnlich wie bei Flussdiagrammen. Sie können Klassen mit einem dreifachen Doppelpunkt hinzufügen, gefolgt von einer Anzahl von CSS-Klassen, die durch Leerzeichen getrennt sind. Im folgenden Beispiel hat einer der Knoten zwei benutzerdefinierte Klassen, die „dringend“ sind und den Hintergrund rot und den Text weiß und groß machen, was die Schriftgröße erhöht:

Code:

Diese Klassen müssen vom Site-Administrator bereitgestellt werden.

Unklare Einrückung

Die tatsächliche Einrückung spielt keine Rolle, sondern nur im Vergleich zu den vorherigen Zeilen. Wenn wir das vorherige Beispiel nehmen und es ein wenig stören, können wir sehen, wie die Berechnungen durchgeführt werden. Lassen Sie uns mit dem Platzieren von C mit einer kleineren Einrückung als B aber größer als A beginnen.

mindmap
    Root
        A
            B
          C

Diese Gliederung ist unklar, da B eindeutig ein Kind von A ist, aber wenn wir zu C übergehen, geht die Klarheit verloren. C ist kein Kind von B mit einer höheren Einrückung noch hat es die gleiche Einrückung wie B. Das einzige, was klar ist, ist, dass der erste Knoten mit kleinerer Einrückung, der einen Elternteil anzeigt, A ist. Dann verlässt sich Mermaid auf diese bekannte Wahrheit und kompensiert die unklare Einrückung und wählt A als Elternteil von C, was zu demselben Diagramm mit B und C als Geschwister führt.

Markdown-Strings

Die Funktion "Markdown-Strings" verbessert Mindmaps, indem sie eine vielseitigere String-Art anbietet, die Textformatierungsoptionen wie Fett- und Kursivschrift unterstützt und automatisch Text innerhalb von Labels umschließt.

Code:

Formatierung:

• Für fetten Text verwenden Sie doppelte Sternchen ** vor und nach dem Text.
• Für kursive Schrift verwenden Sie einzelne Sternchen * vor und nach dem Text.
• Mit herkömmlichen Strings mussten Sie
  -Tags hinzufügen, damit der Text in Knoten umschlägt. Markdown-Strings schlagen jedoch automatisch um, wenn sie zu lang werden und ermöglichen es, eine neue Zeile zu beginnen, indem Sie einfach ein Zeilenumbruchzeichen anstelle eines
  -Tags verwenden.

Integration mit Ihrer Bibliothek/Ihrer Website.

Mindmap verwendet die experimentellen Lazy-Loading- und asynchronen Rendering-Funktionen, die sich in Zukunft ändern könnten. Ab Version 9.4.0 ist dieses Diagramm in mermaid enthalten, nutzt jedoch Lazy Loading, um die Größe von mermaid klein zu halten. Dies ist wichtig, um in Zukunft zusätzliche Diagramme hinzufügen zu können.

Sie können weiterhin die Methode vor 9.4.0 verwenden, um mermaid mit Mindmaps zu einer Webseite hinzuzufügen:

<script type="module">
  import mermaid from '<CDN_URL>/mermaid@9.3.0/dist/mermaid.esm.min.mjs';
  import mindmap from '<CDN_URL>/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
  await mermaid.registerExternalDiagrams([mindmap]);
</script>

Ab Version 9.4.0 können Sie diesen Code vereinfachen:

<script type="module">
  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
</script>

Sie können sich auch die Implementierung im Live-Editor hier ansehen, um zu sehen, wie das asynchrone Laden funktioniert.