🧠 Mermaid

Mindmap

Ordnen Sie Ideen um ein zentrales Thema

Was ist ein Mindmap?

Eine Mindmap lässt Ideenzweige von einem zentralen Konzept ausstrahlen. Sie ist der schnellste Weg, Brainstormings zu strukturieren, Themen zu gliedern, Inhalte zu planen oder Kompetenzen abzubilden — und mit Mermaid ist sie reiner Text.

Mindmaps sind eher ein Denkwerkzeug als ein Dokumentationsformat: Workshops, Inhaltsgliederungen, das Abstecken eines Features, bevor sich jemand festlegt. In Mermaid dient die Einrückung zugleich als Dokumentgliederung, sodass Map und späteres Inhaltsverzeichnis ein einziges Artefakt bleiben. Zu akzeptieren ist die Einschränkung, dass es ein Baum ist — eine Wurzel, ein Elternknoten pro Knoten, keine Beschriftungen an Zweigen. Alles, was zusammenlaufen muss, gehört in ein Flowchart.

Live-Beispiel

Mermaid-Code
mindmap
  root((Product v2))
    Features
      AI generation
      Live preview
      Export
    Quality
      E2E tests
      Monitoring
    Growth
      SEO pages
      Public sharing
Live-Beispiel

Product v2

Features

AI generation

Live preview

Export

Quality

E2E tests

Monitoring

Growth

SEO pages

Public sharing

Wann einsetzen

Brainstormings und Workshop-Ergebnisse strukturieren
Ein Produkt, Projekt oder Lernthema gliedern
Inhalte, Dokumentation oder Teamkompetenzen planen

Häufige Fehler

Zwei Wurzeln auf oberster Ebene

Eine Mindmap hat genau eine Wurzel. Ein zweiter Knoten auf derselben Einrückungsebene scheitert mit „There can be only one root“. Haben Sie wirklich zwei Zentren, sind das zwei Mindmaps — oder ein Flowchart.

Runde Klammern im Knotentext

Growth (EU) wird als „EU“ gerendert, weil die Klammern als Formzeichen gelesen werden und der Text davor verworfen wird. Geben Sie dem Knoten eine ID und setzen Sie die Beschriftung in Anführungszeichen: g1["Growth (EU)"].

Tabs mit Leerzeichen gemischt

Die Hierarchie entsteht ausschließlich aus der Einrückung, und ein Tab entspricht nicht einer Folge von Leerzeichen. Werden beide gemischt, erscheint derselbe Fehler „There can be only one root“ — er zeigt auf die Wurzel, nicht auf die kaputte Zeile.

Grundlegende Syntax

.mmd
mindmap
  root((Main idea))
    Branch A
      Leaf 1
    Branch B
  • mindmap root((Product v2))

    Es gibt genau eine Wurzel, doppelte runde Klammern zeichnen sie als Kreis. Alles darunter wird allein durch die Einrückung positioniert, ohne dass Sie Pfeile deklarieren.

  • Features[Squared] Live preview(Rounded)

    Klammern um den Text bestimmen die Knotenform: [] eckig, () abgerundet, (()) Kreis, ))(( Bang, {{}} Sechseck. Setzen Sie sie sparsam ein, um eine Kategorie zu markieren, nicht zur Dekoration.

  • Growth ::icon(fa fa-rocket)

    Eine ::icon()-Zeile unter einem Knoten fügt ein Icon aus einer Icon-Schrift hinzu, die die Seite geladen haben muss, meist Font Awesome. Fehlt diese Schrift, wird nichts gezeichnet.

  • Retention:::urgent

    Ein dreifacher Doppelpunkt hängt einem Knoten eine CSS-Klasse an. So heben Sie einen Zweig hervor — Risiken, Blocker, Entscheidungen —, ohne den Rest der Map anzufassen.

Fragen zu diesem Diagramm

Wie funktioniert die Einrückung in Mermaid-Mindmaps?

Die Hierarchie wird allein durch Einrückung definiert: Jede tiefere Ebene wird zu einem Kindzweig. Formen wie root((Text)) passen das Erscheinungsbild der Knoten an.

Mindmap oder Flowchart fürs Brainstorming?

Mindmaps zum Divergieren (Ideen sammeln und gruppieren), Flowcharts zum Konvergieren (Ideen in einen geordneten Prozess verwandeln).

Wie teile ich eine Mindmap mit Menschen, die Mermaid nicht nutzen?

Exportieren Sie PNG oder SVG oder veröffentlichen Sie das Diagramm als öffentliche Seite und teilen Sie den Link. GitHub rendert Mindmaps auch in Markdown; selbst gehostete Tools mit älterem Mermaid kennen die Syntax allerdings möglicherweise noch nicht.

Kann ich bestimmen, auf welcher Seite ein Zweig erscheint?

Nein. Die Platzierung wird aus dem Baum berechnet, es gibt keine Einstellung für links, rechts oder Winkel. Eine andere Reihenfolge im Quelltext verändert das Ergebnis, aber nicht vorhersehbar — nehmen Sie das Layout hin oder wechseln Sie zum Flowchart.

Wie füge ich Mindmap-Knoten Icons hinzu?

Setzen Sie eine Zeile ::icon(fa fa-book) eingerückt unter den Knoten. Die Icon-Schrift muss von der Seite geladen werden, die das Diagramm rendert; fehlt sie, erscheint der Knoten schlicht ohne Icon, und nichts geht kaputt — das Diagramm rendert trotzdem.

Kann ich aus einer Mindmap eine Dokumentgliederung machen?

Unmittelbar — die Einrückung ist bereits die Gliederung. Jede Ebene der Map wird zu einer Überschriftenebene oder einer verschachtelten Liste. Genau deshalb eignen sich Mindmaps gut, um Dokumentation zu planen, bevor eine Zeile davon geschrieben ist.

Mindmap oder ein anderer Diagrammtyp?

Mindmap oder Zeitleiste?

Sehen Sie sich Ihre erste Ebene an. Heißen die obersten Zweige Q1, Q2, Q3 — oder 2024, 2025 —, zeichnen Sie eine Zeitleiste mit zusätzlicher Einrückung, und der Baum bringt nichts. Bleiben Sie bei der Mindmap, wenn die oberste Ebene aus Themen besteht und erst die Verschachtelung die Bedeutung trägt.

Mindmap oder Klassendiagramm?

Eine Mindmap drückt genau eine Beziehung aus: Dies gehört unter jenes. Sie kann nicht sagen, dass ein Modul von einem anderen abhängt, drei davon besitzt oder eine Schnittstelle implementiert. Sobald die Kästen Felder, Kardinalitäten oder eine Abhängigkeitsrichtung brauchen, nehmen Sie ein Klassendiagramm.

Erstellen Sie jetzt Ihr Mindmap

Beschreiben Sie es in natürlicher Sprache — die KI schreibt den Mermaid-Code für Sie.

Mermaid Studio öffnen