MMD-Datei öffnen

Eine .mmd-Datei ist eine reine Textdatei mit einem Mermaid-Diagramm darin. Kein Bild, kein Binärformat — du kannst sie in jedem Texteditor öffnen und lesen. Um sie als Diagramm zu sehen, zieh sie auf das Feld unten. Sie wird in deinem Browser gerendert, nichts wird auf einen Server hochgeladen.

.mmd-Datei hier ablegen

Auch .mermaid, .md und .txt. Die Datei wird im Browser gelesen und nicht hochgeladen.

Was ist eine .mmd-Datei?

Mermaid ist eine Textsyntax für Diagramme. Du beschreibst das Diagramm in Worten, der Renderer zeichnet es — so wie Markdown Formatierung beschreibt und der Renderer die Seite erzeugt. Eine .mmd-Datei enthält genau diesen Text und sonst nichts: keine Formatierung, keine Bilddaten, keine Metadaten.

Genau dafür gibt es das Format. Weil es Text ist, kann ein Diagramm im Git-Repository direkt neben dem Code liegen, den es beschreibt, und eine Änderung erscheint als lesbares Diff statt als ausgetauschte Binärdatei. Hier eine vollständige, gültige .mmd-Datei:

bestellung.mmd — eine vollständige Datei, sechs Zeilen
flowchart LR
    Eingang[Bestellung eingegangen] --> Pruefung[Bestand prüfen]
    Pruefung -->|verfügbar| Zahlung[Zahlung einziehen]
    Pruefung -->|nicht verfügbar| Info[Kunde benachrichtigen]
    Zahlung --> Versand[Ware versenden]
    Versand --> Fertig[Bestellung abgeschlossen]

Womit sich eine .mmd-Datei öffnen lässt

Kurz gesagt: per Doppelklick öffnet eine .mmd-Datei praktisch nirgends, weil die Endung mit keinem Programm verknüpft ist. Was du brauchst, ist etwas, das Mermaid rendert. Hier steht, was ich überprüft habe — und wo es nicht funktioniert.

Diese SeiteFunktioniert

Rendert die Datei direkt

Zieh die Datei auf das Feld oben, und du bekommst das Diagramm. Es gibt keinen Upload-Schritt: die Datei wird über die File-API im Browser gelesen und lokal gerendert. Das funktioniert deshalb auch für Diagramme, die du nicht an Dritte weitergeben darfst.

Wenn du das Diagramm nicht nur ansehen, sondern ändern willst, nutze den Link unter der Vorschau, um es im Editor zu öffnen.

Jeder TexteditorFunktioniert

Zeigt den Quelltext, nicht das Diagramm

Notepad, TextEdit, vim — egal was. Eine .mmd-Datei ist UTF-8-Text, du siehst also sofort den Quelltext. Ein Diagramm siehst du nicht, und es ist auch nichts kaputt: in der Datei steckt schlicht kein Bild.

Das ist der schnellste Weg zu prüfen, ob eine zugeschickte Datei überhaupt Mermaid ist: öffnen und schauen, ob die erste nicht-leere Zeile ein Diagrammtyp ist — flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram oder gantt.

GitHubFunktioniert nicht

Rendert ```mermaid-Blöcke in Markdown — keine reinen .mmd-Dateien

GitHub rendert Mermaid innerhalb von Code-Blöcken. Die Dokumentation nennt genau die Stellen: GitHub Issues, GitHub Discussions, Pull Requests, Wikis und Markdown-Dateien. Eine eigenständige .mmd-Datei steht nicht auf dieser Liste — im Datei-Browser des Repositories siehst du den Quelltext.

Wenn ein Diagramm auf GitHub sichtbar sein soll, muss es also in einem ```mermaid-Block in einer .md-Datei stehen, nicht in einer eigenen .mmd-Datei. Die .mmd-Datei als Quelle zu behalten und denselben Inhalt zusätzlich in der README einzubetten, ist eine verbreitete und vernünftige Doppelung.

GitLabFunktioniert nicht

Rendert ```mermaid-Blöcke — keine reinen .mmd-Dateien, und auf einer älteren Mermaid-Version

Im Prinzip wie bei GitHub: Mermaid wird in Code-Blöcken in Markdown, Issues, Merge Requests und Wikis gerendert, eine eigenständige .mmd-Datei ist nicht dokumentiert.

Wichtiger ist ein zweiter Punkt, weil er in der Praxis für echte Verwirrung sorgt: GitLab.com unterstützt laut eigener Dokumentation Mermaid Version 10. Diese Seite läuft mit 11.12.2. Syntax, die nach Version 10 dazugekommen ist, rendert hier und scheitert dort — das ist die übliche Erklärung für „im Viewer geht es, in unserem GitLab nicht". Bei selbst gehostetem GitLab kommt eine dritte Falle dazu: ist ein Cross-Origin-Resource-Policy-Header auf same-site oder same-origin gesetzt, scheitern Mermaid-Diagramme stillschweigend — keine Fehlermeldung, einfach kein Diagramm.

.mmd, .mermaid und .md im Vergleich

.mmd und .mermaid sind dasselbe. Beide enthalten ausschließlich Mermaid-Quelltext, und jedes Werkzeug, das eines der beiden akzeptiert, akzeptiert auch das andere. .mmd ist die kürzere und häufigere Variante und die Vorgabe des offiziellen Kommandozeilenwerkzeugs. Entscheide dich innerhalb eines Projekts für eines von beiden — technisch macht die Wahl keinen Unterschied.

.md ist etwas grundsätzlich anderes. Eine Markdown-Datei ist ein Dokument, das ein Mermaid-Diagramm enthalten kann, eingefasst in einen Block aus drei Backticks gefolgt vom Wort mermaid. Das Diagramm ist eine Passage in einem größeren Text.

Dieser Unterschied ist der mit Abstand häufigste Grund, warum eine Datei nicht rendert, und zwar in beide Richtungen. Fügst du den Inhalt einer .md-Datei in einen Mermaid-Renderer ein, scheitert es, weil die Backtick-Zeile keine Mermaid-Syntax ist. Speicherst du ein nacktes Mermaid-Diagramm ohne Block in einer .md-Datei, zeigt GitHub es als Absatz Text. Die Regel ist einfach: eine .mmd-Datei muss mit einem Diagrammtyp beginnen, und in einer .md-Datei muss das Diagramm im Block stehen.

Dieser Viewer akzeptiert .mmd, .mermaid, .md und .txt, behandelt den Inhalt aber immer als reines Mermaid. Wenn du eine Markdown-Datei mit Fließtext drumherum ablegst, entferne vorher alles außer dem Diagramm.

Es rendert nicht — woran es wirklich liegt

Mermaids Fehlermeldungen sind präzise, aber nicht freundlich. Der nützliche Trick: lies das Ende der Meldung. Nach „got" nennt Mermaid das Token, an dem es gescheitert ist, und dieses Token führt viel schneller zur Ursache als die Zeilennummer. Ich habe jeden Fall hier gegen Mermaid 11.12.2 nachgestellt — die fehlerhafte Fassung scheitert tatsächlich, die korrigierte rendert.

Was du siehst

No diagram type detected matching given configuration for text: ```mermaid

Warum

Du hast das Diagramm aus einer Markdown-Datei oder einer Chat-Nachricht kopiert und die Backticks mitgenommen. Die drei Backticks sind Markdown, nicht Mermaid — der Parser erreicht das Diagramm nie.

Lösung

Lösch die Zeile ```mermaid am Anfang und die ``` am Ende. Die Datei muss mit dem Diagrammtyp beginnen.

Fehlerhaft
```mermaid
flowchart TD
    A[Start] --> B[Ende]
```
Korrigiert
flowchart TD
    A[Start] --> B[Ende]

Was du siehst

Parse error, endet mit: got 'STR'

Fehler endet mit: got 'STR'

Warum

Ein doppeltes Anführungszeichen innerhalb einer Beschriftung. Der Parser hält es für den Anfang einer Zeichenkette und findet dann die schließende Klammer, wo er das zweite Anführungszeichen erwartet hat.

Lösung

Setz die gesamte Beschriftung in doppelte Anführungszeichen und verwende innen einfache — oder schreib das Zeichen als Entity #quot;.

Fehlerhaft
flowchart TD
    A[Status ist "offen"] --> B[Fertig]
Korrigiert
flowchart TD
    A["Status ist 'offen'"] --> B[Fertig]

Was du siehst

Parse error, endet mit: got 'PS'

Fehler endet mit: got 'PS'

Warum

Eine öffnende runde Klammer in einer Beschriftung. Runde Klammern sind in Mermaid Form-Syntax — A(Text) ist ein abgerundeter Knoten —, deshalb liest der Parser eine Klammer in eckigen Klammern als Beginn einer Form.

Lösung

Setz die Beschriftung in Anführungszeichen. Alles zwischen Anführungszeichen gilt als Text, auch Klammern.

Fehlerhaft
flowchart TD
    A[Preis (netto)] --> B[Fertig]
Korrigiert
flowchart TD
    A["Preis (netto)"] --> B[Fertig]

Was du siehst

Parse error, endet mit: got 'end'

Fehler endet mit: got 'end'

Warum

Du hast end als Knoten-ID benutzt. Kleingeschriebenes end schließt einen Subgraph, der Parser sieht also einen Block-Abschluss, wo ein Knoten stehen sollte. Das passiert oft, weil „end" der naheliegende Name für den letzten Knoten ist.

Lösung

Schreib es groß oder gib dem Knoten eine ID und pack das Wort in die Beschriftung.

Fehlerhaft
flowchart TD
    A[Start] --> end
Korrigiert
flowchart TD
    A[Start] --> Ende[Abgeschlossen]

Was du siehst

No diagram type detected matching given configuration for text: sequencediagram

Warum

Der Diagrammtyp ist falsch geschrieben oder falsch groß-/kleingeschrieben. Mermaids Schlüsselwörter unterscheiden Groß- und Kleinschreibung: sequenceDiagram funktioniert, sequencediagram nicht. Dasselbe gilt für stateDiagram-v2 und erDiagram.

Lösung

Korrigier die Groß-/Kleinschreibung. graph wird übrigens weiterhin als alter Alias für flowchart akzeptiert — daran liegt es also nicht.

Fehlerhaft
sequencediagram
    Kunde->>Shop: Bestellung
Korrigiert
sequenceDiagram
    Kunde->>Shop: Bestellung

Was du siehst

Parse error in der Zeile, in der du einen Knoten benannt hast

Warum

Ein Leerzeichen in der Knoten-ID. Die ID ist das Token vor dem Pfeil, ein Leerzeichen beendet dieses Token — der Parser findet danach ein zweites Wort, das er nicht einordnen kann.

Lösung

Gib dem Knoten eine ID aus einem Wort und schreib den lesbaren Text in die Beschriftung.

Fehlerhaft
flowchart TD
    offene posten --> mahnlauf
Korrigiert
flowchart TD
    posten[Offene Posten] --> mahnung[Mahnlauf]

Was du siehst

Parse error an einer Kantenbeschriftung zwischen senkrechten Strichen

Warum

Runde Klammern in einer Kantenbeschriftung. Für |…| gilt dieselbe Einschränkung wie für Knotenbeschriftungen: Klammern sind Syntax, nicht Text.

Lösung

Setz auch die Kantenbeschriftung in Anführungszeichen.

Fehlerhaft
flowchart TD
    A -->|ja (immer)| B
Korrigiert
flowchart TD
    A -->|"ja (immer)"| B

Was du siehst

Parse error in einem ER-Diagramm, endet mit: got 'NEWLINE'

Fehler endet mit: got 'NEWLINE'

Warum

Eine Beziehung ohne Beschriftung. Anders als bei einer Flowchart-Kante sind Doppelpunkt und Beschriftung im ER-Diagramm Pflicht — ohne sie endet die Zeile zu früh.

Lösung

Ergänze Doppelpunkt und ein Verb.

Fehlerhaft
erDiagram
    KUNDE ||--o{ BESTELLUNG
Korrigiert
erDiagram
    KUNDE ||--o{ BESTELLUNG : erteilt

Was du siehst

Parse error in der letzten Zeile des Diagramms

Warum

Ein Block wurde geöffnet und nie geschlossen — alt, opt, loop, par und subgraph brauchen alle ein passendes end. Mermaid merkt es erst, wenn die Eingabe ausgeht, und meldet den Fehler deshalb am Dateiende statt beim offenen Block.

Lösung

Zähl die öffnenden Blöcke gegen die ends. Steht der Fehler in der letzten Zeile, ist fast immer das die Ursache.

Fehlerhaft
sequenceDiagram
    Kunde->>Shop: Anfrage
    alt verfügbar
        Shop-->>Kunde: Zusage
Korrigiert
sequenceDiagram
    Kunde->>Shop: Anfrage
    alt verfügbar
        Shop-->>Kunde: Zusage
    end

Was du siehst

Lexical error on line 1. Unrecognized text.

Warum

Eine ungültige Richtungsangabe. Flowcharts akzeptieren TB, TD, BT, LR und RL — sonst nichts. Ein Tippfehler hier scheitert schon im Lexer, bevor irgendein Knoten gelesen wird.

Lösung

Nimm eine der fünf. TD (von oben nach unten) und LR (von links nach rechts) decken fast alles ab.

Fehlerhaft
flowchart XY
    A --> B
Korrigiert
flowchart TD
    A --> B

Was du siehst

Es rendert hier, aber nicht in GitLab, Confluence oder einem älteren Werkzeug

Warum

Ein Versionsunterschied. Dieser Viewer läuft mit Mermaid 11.12.2, GitLab.com dokumentiert Version 10, und selbst gehostete Wikis hinken oft Jahre hinterher. Syntax, die nach der Version des anderen Werkzeugs dazukam, wird hier verstanden und dort nicht.

Lösung

Frag den anderen Renderer nach seiner Version: schreibst du in ein Diagramm nur das Wort info, gibt Mermaid seine eigene Versionsnummer aus. Das geht schneller, als Release Notes zu lesen.

Korrigiert
info

Noch ein Fall, der gar keine Fehlermeldung erzeugt: bei selbst gehostetem GitLab sorgt ein Cross-Origin-Resource-Policy-Header mit same-site oder same-origin dafür, dass Mermaid-Diagramme stillschweigend nicht gezeichnet werden. Keine Meldung, kein Diagramm, nichts in der Seite. Wenn ein Diagramm überall rendert außer auf einer selbst gehosteten Instanz, lohnt sich dort ein Blick.

In PNG, SVG oder PDF umwandeln

Öffne die Datei im Editor und nutze die Export-Schaltflächen. SVG behält das Diagramm als Vektor mit echtem Text: es bleibt in jeder Größe scharf, und die Beschriftungen bleiben markier- und durchsuchbar — die richtige Wahl für Dokumentation und für alles, was später noch einmal exportiert wird. PNG ist eine Rastergrafik und wird hier mit der zwei- bis dreifachen Anzeigegröße exportiert, damit sie auf hochauflösenden Bildschirmen standhält. Nimm PNG dort, wo SVG nicht akzeptiert wird — in der Praxis sind das die meisten Chat-Programme und manche Wikis.

Eine PDF-Schaltfläche gibt es nicht, und das sage ich lieber, als es zu verschweigen. Der praktikable Weg ist, SVG zu exportieren und es entweder in das Dokument einzufügen, an dem du ohnehin schreibst, oder die Seite aus dem Browser als PDF zu drucken. Ein Vektor-SVG bleibt im PDF ein Vektor.

Für alles Wiederkehrende — ein Build-Schritt, ein Stapel Dateien, ein Pre-Commit-Hook — nimmt das offizielle Kommandozeilenwerkzeug @mermaid-js/mermaid-cli dieselbe .mmd-Datei und schreibt das Bild direkt, ganz ohne Browser.

Häufige Fragen

Wie öffne ich eine MMD-Datei online?
Zieh sie auf das Feld oben auf dieser Seite. Sie wird ohne Upload und ohne Konto im Browser gerendert. Alternativ kannst du den Editor öffnen und die Datei auf die Vorschau ziehen.
Welches Programm öffnet eine .mmd-Datei?
Jeder Texteditor zeigt dir den Quelltext, denn die Datei ist reiner Text. Um das Diagramm zu sehen, brauchst du etwas, das Mermaid rendert: diese Seite, den Editor auf dieser Website oder das Kommandozeilenwerkzeug mermaid-cli. Ein Desktop-Programm, das die Endung .mmd für sich beansprucht, gibt es nicht.
Ist eine .mmd-Datei dasselbe wie eine .mermaid-Datei?
Ja. Beide Endungen enthalten identischen Inhalt und sind austauschbar. .mmd ist die gebräuchlichere und die Vorgabe des offiziellen Kommandozeilenwerkzeugs.
Werden Umlaute und ß in Diagrammen korrekt dargestellt?
Ja. Umlaute und ß funktionieren in Beschriftungen ohne Weiteres — „Bestellung geprüft" oder „Abschluß" rendern hier unverändert, ich habe es gegen Mermaid 11.12.2 getestet. Vorsicht ist nur bei IDs geboten: benutze für die Knoten-ID lieber ein Wort ohne Sonderzeichen und schreib den Text mit Umlauten in die Beschriftung. Das erspart dir Ärger, wenn die Datei später durch andere Werkzeuge läuft.
Warum rendert meine .mmd-Datei auf GitHub nicht?
GitHub rendert Mermaid ausschließlich in ```mermaid-Blöcken innerhalb von Markdown-Dateien, Issues, Discussions, Pull Requests und Wikis. Eine eigenständige .mmd-Datei wird als Quelltext angezeigt. Damit sie auf GitHub sichtbar wird, muss dasselbe Diagramm in einem Block in einer .md-Datei stehen.
Bei uns läuft Confluence — geht das da auch?
Nicht ohne Zusatz. Confluence rendert Mermaid nicht von Haus aus, dafür braucht es eine App aus dem Atlassian Marketplace, und welche das ist, hängt davon ab, ob ihr Cloud oder Data Center einsetzt. Praktisch heißt das: das Diagramm hier als SVG oder PNG exportieren und einfügen, oder eure Administration nach der installierten App fragen. Rechne dabei damit, dass eine solche App eine ältere Mermaid-Version mitbringt als diese Seite.
Mein Diagramm funktioniert hier, aber nicht in unserem Wiki. Warum?
Fast immer ein Versionsunterschied. Dieser Viewer läuft mit Mermaid 11.12.2, viele Wikis mit etwas Älterem — GitLab.com dokumentiert Version 10. Schreib auf dem anderen System das Wort info in ein Diagramm, dann gibt Mermaid dort seine Version aus.

Diagrammtypen, die du hier öffnen kannst

Geschrieben von Dominik Malsch · Zuletzt aktualisiert:

Editor öffnen →