Jak otworzyć plik .mmd

Plik .mmd to zwykły plik tekstowy zawierający diagram Mermaid. Nie jest obrazkiem ani formatem binarnym — możesz otworzyć go w dowolnym edytorze tekstu i przeczytać. Żeby zobaczyć go jako diagram, upuść go na ramkę poniżej. Rysuje się w twojej przeglądarce i nic nie trafia na żaden serwer.

Upuść tutaj plik .mmd

Przyjmuje też .mermaid, .md i .txt. Plik czytany jest w przeglądarce i nigdy nie jest wysyłany.

Czym jest plik .mmd

Mermaid to tekstowa składnia do diagramów. Opisujesz diagram słowami, a silnik go rysuje — tak samo jak Markdown opisuje formatowanie, a silnik produkuje stronę. Plik .mmd zawiera ten tekst i nic więcej: żadnego stylowania, żadnych danych obrazu, żadnych metadanych.

To cały powód istnienia tego formatu. Ponieważ jest tekstem, diagram może leżeć w repozytorium Gita obok kodu, który opisuje, a zmiana pojawia się jako czytelny diff, a nie jako podmieniony plik binarny. Oto kompletny, poprawny plik .mmd:

wdrozenie.mmd — cały plik, sześć wierszy
flowchart LR
    Commit[Push do main] --> Build[Uruchom testy]
    Build -->|sukces| Deploy[Wdróż na produkcję]
    Build -->|błąd| Alert[Powiadom autora]
    Deploy --> Dym[Test dymny]
    Dym --> Koniec[Wydanie zakończone]

Czym otworzyć plik .mmd

W skrócie: dwuklikiem prawie nic nie otworzy pliku .mmd, bo rozszerzenie nie jest przypisane do żadnej aplikacji. Naprawdę potrzebujesz czegoś, co potrafi rysować Mermaida. Poniżej to, co sprawdziłem, i miejsca, w których to nie działa.

Ta stronaOtwiera

Rysuje plik od razu

Upuść plik na ramkę powyżej, a dostaniesz diagram. Nie ma kroku wysyłania: plik czytany jest w przeglądarce przez File API i rysowany lokalnie, co działa również dla diagramów, których nie wolno ci przekazywać na zewnątrz.

Jeśli chcesz diagram zmienić, a nie tylko obejrzeć, użyj odnośnika pod podglądem, by otworzyć go w edytorze.

Dowolny edytor tekstuOtwiera

Pokazuje źródło, a nie diagram

Notatnik, Notepad++, vim — cokolwiek. Plik .mmd to tekst w UTF-8, więc źródło zobaczysz od razu. Diagramu nie zobaczysz i nic nie jest zepsute — po prostu w pliku nie ma żadnego obrazu do pokazania.

To najszybszy sposób na sprawdzenie, czy przysłany plik naprawdę jest Mermaidem: otwórz go i zobacz, czy pierwszy niepusty wiersz to słowo kluczowe diagramu, takie jak flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram albo gantt.

GitHubNie otwiera

Rysuje bloki ```mermaid w Markdownie, ale nie same pliki .mmd

GitHub rysuje Mermaida wewnątrz ogrodzonych bloków kodu. Dokumentacja wymienia dokładnie gdzie: zgłoszenia, Discussions, pull requesty, wiki i pliki Markdown. Samodzielnego pliku .mmd nie ma na tej liście, a otwarcie go w przeglądarce plików repozytorium pokazuje tekst źródłowy.

Jeśli więc chcesz, by diagram był widoczny na GitHubie, musi znaleźć się w bloku ```mermaid w pliku .md, a nie we własnym .mmd. Trzymanie .mmd jako źródła i powtórzenie tej samej treści w README to częste i rozsądne zdublowanie.

GitLabNie otwiera

Rysuje bloki ```mermaid, ale nie same pliki .mmd, i to na starszym Mermaidzie

Ten sam układ co na GitHubie: Mermaid rysuje się w ogrodzonych blokach w Markdownie, zgłoszeniach, merge requestach i wiki, ale nigdzie nie ma zapisu, że rysuje się samodzielny plik .mmd.

Jest jeszcze druga rzecz warta wiedzy, bo wywołuje realne zamieszanie. GitLab.com podaje, że obsługuje Mermaida w wersji 10. Ta strona działa na 11.12.2. Składnia dodana po wersji 10 rysuje się tutaj, a przewraca tam — i to zwykle wyjaśnia «w przeglądarce działa, a w naszym GitLabie nie». W GitLabie utrzymywanym samodzielnie jest jeszcze trzecia pułapka: gdy nagłówek Cross-Origin-Resource-Policy ustawiony jest na same-site albo same-origin, diagramy Mermaida przewracają się po cichu — bez błędu i bez diagramu.

.mmd, .mermaid i .md

.mmd i .mermaid to to samo. Oba zawierają wyłącznie źródło Mermaida i wszystkie znane mi narzędzia przyjmujące jedno przyjmują i drugie. .mmd jest krótsze i częstsze; oficjalne narzędzie wiersza poleceń używa go domyślnie. Wybierz jedno i trzymaj się go w obrębie projektu — wybór nie ma żadnych konsekwencji technicznych.

.md jest inne rodzajowo. Plik Markdown to dokument, który może zawierać diagram Mermaid, opakowany w blok zaczynający się od trzech grawisów i słowa mermaid. Diagram jest fragmentem wewnątrz większego tekstu.

Ta różnica jest zdecydowanie najczęstszą przyczyną tego, że plik się nie rysuje, i działa w obie strony. Wklej zawartość pliku .md do przeglądarki Mermaida, a się przewróci, bo wiersz ogrodzenia nie jest składnią Mermaida. Zapisz goły diagram Mermaid do pliku .md bez ogrodzenia, a GitHub pokaże go jako akapit tekstu. Reguła jest prosta: plik .mmd musi zaczynać się słowem kluczowym diagramu, a plik .md musi mieć diagram wewnątrz ogrodzonego bloku.

Ta przeglądarka przyjmuje .mmd, .mermaid, .md i .txt, ale wszystko, co przeczyta, traktuje jako surowego Mermaida. Jeśli upuszczasz Markdowna z tekstem wokół diagramu, usuń najpierw wszystko poza diagramem.

Nie rysuje się — co naprawdę jest nie tak

Komunikaty błędów Mermaida są precyzyjne, ale nieprzyjazne. Użyteczna sztuczka to czytanie samego końca komunikatu: po «got» Mermaid nazywa token, na którym się zaciął, a ten token wskazuje problem znacznie lepiej niż numer wiersza. Każdy przypadek poniżej odtworzyłem na mermaidzie 11.12.2: wersja błędna naprawdę się przewraca, a poprawiona naprawdę rysuje.

Co widzisz

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

Dlaczego

Skopiowałeś diagram z pliku Markdown albo z czatu i zabrałeś ze sobą ogrodzenie. Trzy grawisy to Markdown, a nie Mermaid, więc parser nigdy nie dociera do diagramu.

Rozwiązanie

Usuń wiersz otwierający ```mermaid i zamykający ```. Plik musi zaczynać się słowem kluczowym diagramu.

Błędnie
```mermaid
flowchart TD
    A[Start] --> B[Koniec]
```
Poprawnie
flowchart TD
    A[Start] --> B[Koniec]

Co widzisz

Parse error, komunikat kończy się na: got 'PS'

Błąd kończy się na: got 'PS'

Dlaczego

Otwierający nawias okrągły wewnątrz etykiety węzła. W Mermaidzie nawiasy okrągłe są składnią kształtu — A(tekst) to węzeł zaokrąglony — więc goły nawias w kwadratowych czytany jest jako początek kształtu.

Rozwiązanie

Weź etykietę w cudzysłów. Wszystko w cudzysłowach traktowane jest jako tekst, łącznie z nawiasami.

Błędnie
flowchart TD
    A[Wywołaj obciąż(zamówienie)] --> B[Koniec]
Poprawnie
flowchart TD
    A["Wywołaj obciąż(zamówienie)"] --> B[Koniec]

Co widzisz

Parse error w wierszu, w którym nazwałeś węzeł

Dlaczego

Identyfikator węzła zawiera spację. Po polsku to najłatwiejszy do popełnienia błąd, bo naturalne nazwy są wielowyrazowe: «usługa uwierzytelniania», «baza danych». Identyfikator to token przed strzałką, a spacja go ucina, zostawiając wyraz, którego nie ma gdzie umieścić.

Rozwiązanie

Nadaj węzłowi jednowyrazowy identyfikator, a czytelny tekst umieść w etykiecie. Polskie znaki w identyfikatorze działają; psuje wyłącznie spacja.

Błędnie
flowchart TD
    serwer uwierzytelniania --> baza danych
Poprawnie
flowchart TD
    auth[Serwer uwierzytelniania] --> db[Baza danych]

Co widzisz

Parse error, komunikat kończy się na: got 'STR'

Błąd kończy się na: got 'STR'

Dlaczego

Cudzysłów prosty wewnątrz etykiety węzła. Parser bierze go za początek napisu, a potem trafia na nawias kwadratowy etykiety tam, gdzie oczekiwał domykającego cudzysłowu.

Rozwiązanie

Opakuj całą etykietę w cudzysłowy proste, a wewnątrz użyj cudzysłowów polskich albo zapisz znak jako encję HTML #quot;.

Błędnie
flowchart TD
    A[Powiedział "cześć"] --> B[Koniec]
Poprawnie
flowchart TD
    A["Powiedział „cześć”"] --> B[Koniec]

Co widzisz

Parse error, komunikat kończy się na: got 'end'

Błąd kończy się na: got 'end'

Dlaczego

Użyłeś end jako identyfikatora węzła. Małymi literami end zamyka podgraf, więc parser widzi koniec bloku tam, gdzie oczekiwał węzła. Zdarza się często: idąc za angielskimi przykładami, ostatni węzeł nazywa się end, choć reszta jest po polsku.

Rozwiązanie

Napisz wielką literą albo daj węzłowi inny identyfikator, a słowo przenieś do etykiety. `Koniec` nie sprawia kłopotu.

Błędnie
flowchart TD
    A[Start] --> end
Poprawnie
flowchart TD
    A[Start] --> Koniec[Zakończone]

Co widzisz

Rysuje się, ale w diagramie stanów jeden stan rozpadł się na dwa

Dlaczego

Spacja w identyfikatorze stanu. Inaczej niż schemat blokowy, diagram stanów nie protestuje: tworzy osobne pudełko dla każdego wyrazu i rysuje to bez mrugnięcia. Zmierzone — `[*] --> Oczekuje na płatność` daje trzy stany, `Oczekuje`, `na` i `płatność`, z których tylko pierwszy wisi na strzałce. Po polsku prawie żadna nazwa stanu nie mieści się w jednym wyrazie, więc błąd zdarza się stale, a sygnału o nim nie ma żadnego.

Rozwiązanie

Zadeklaruj stan przez `state "Etykieta" as id` i odwołuj się do niego wyłącznie identyfikatorem.

Błędnie
stateDiagram-v2
    [*] --> Oczekuje na płatność
    Oczekuje na płatność --> Zamknięte
Poprawnie
stateDiagram-v2
    state "Oczekuje na płatność" as oczekuje
    [*] --> oczekuje
    oczekuje --> Zamknięte

Co widzisz

Rysuje się, ale diagram ER ma encje, których nie napisałeś

Dlaczego

Etykieta relacji zawiera spację i nie ma cudzysłowów. To pułapka, która po polsku przeszkadza najbardziej, bo nasze zwroty relacyjne są wielowyrazowe: «należy do», «występuje w». Mermaid nie zgłasza błędu: ucina etykietę na pierwszej spacji, a każdy pozostały wyraz zamienia w pustą encję.

Rozwiązanie

Bierz w cudzysłów każdą etykietę relacji zawierającą spację. Po polsku praktycznie każdą.

Błędnie
erDiagram
    KLIENT ||--o{ ZAMOWIENIE : należy do
Poprawnie
erDiagram
    KLIENT ||--o{ ZAMOWIENIE : "należy do"

Co widzisz

No diagram type detected matching given configuration for text: sequencediagram

Dlaczego

Słowo kluczowe diagramu jest źle zapisane albo ma złą wielkość liter. Słowa kluczowe Mermaida rozróżniają wielkość liter: sequenceDiagram działa, sequencediagram nie. To samo dotyczy stateDiagram-v2 i erDiagram.

Rozwiązanie

Popraw wielkość liter. Zauważ, że graph nadal jest przyjmowany jako dawny alias flowchart, więc ta stara składnia nie jest twoim problemem.

Błędnie
sequencediagram
    Klient->>API: Cześć
Poprawnie
sequenceDiagram
    Klient->>API: Cześć

Co widzisz

Parse error w etykiecie krawędzi między kreskami

Dlaczego

Nawiasy wewnątrz etykiety krawędzi. Etykieta |...| ma to samo ograniczenie co etykieta węzła: tam też nawiasy są składnią, a nie tekstem.

Rozwiązanie

Weź etykietę krawędzi w cudzysłów.

Błędnie
flowchart TD
    A -->|tak (zawsze)| B
Poprawnie
flowchart TD
    A -->|"tak (zawsze)"| B

Co widzisz

Parse error wskazujący ostatni wiersz diagramu

Dlaczego

Blok otwarty i nigdy niezamknięty: alt, opt, loop, par i subgraph wymagają swojego end. Mermaid zgłasza błąd tam, gdzie kończy mu się wejście, więc numer wiersza wskazuje koniec pliku, a nie niezamknięty blok.

Rozwiązanie

Policz otwarte bloki i napisane end. Gdy błąd wskazuje ostatni wiersz, to prawie zawsze to.

Błędnie
sequenceDiagram
    Klient->>API: Żądanie
    alt Wszystko dobrze
        API-->>Klient: OK
Poprawnie
sequenceDiagram
    Klient->>API: Żądanie
    alt Wszystko dobrze
        API-->>Klient: OK
    end

Co widzisz

Lexical error on line 1. Unrecognized text.

Dlaczego

Nieprawidłowy kierunek po słowie kluczowym diagramu. Schematy blokowe przyjmują TB, TD, BT, LR i RL, i nic więcej; literówka przewraca się na analizie leksykalnej, zanim przeczytany zostanie choćby jeden węzeł.

Rozwiązanie

Użyj jednego z pięciu poprawnych kierunków. TD i LR pokrywają prawie wszystkie przypadki.

Błędnie
flowchart XY
    A --> B
Poprawnie
flowchart TD
    A --> B

Co widzisz

Tutaj się rysuje, a w GitLabie, Confluence albo starym narzędziu nie

Dlaczego

Różnica wersji. Ta przeglądarka działa na Mermaidzie 11.12.2; GitLab.com dokumentuje wersję 10, a wiki utrzymywane samodzielnie bywają opóźnione o lata. Składnia wprowadzona po wersji drugiego narzędzia parsuje się tutaj, a przewraca tam.

Rozwiązanie

Zapytaj drugi silnik o wersję. Wpisanie w diagramie jednego słowa info sprawia, że Mermaid rysuje własny numer wersji, co jest szybsze niż czytanie listy zmian.

Poprawnie
info

Warto wspomnieć o kodowaniu znaków, bo w polskich plikach wciąż potrafi zaskoczyć. Ta strona i edytor czytają plik jako UTF-8 i usuwają znacznik BOM, jeśli jest, więc plik zapisany w Notatniku Windows jako «UTF-8 z BOM» otworzy się bez problemu. Ale plik zapisany w Windows-1250 albo ISO-8859-2, co nadal wychodzi z niektórych starszych narzędzi, przyjdzie z rozsypanymi ogonkami. Jeśli w miejscu polskich znaków widzisz dziwne symbole, zapisz plik ponownie w UTF-8 ze swojego edytora.

I jeszcze jedno, co nie daje żadnego błędu: w GitLabie utrzymywanym samodzielnie nagłówek Cross-Origin-Resource-Policy ustawiony na same-site albo same-origin sprawia, że diagramy Mermaida przewracają się po cichu. Żadnego komunikatu, żadnego diagramu, nic na stronie. Jeśli diagram rysuje się wszędzie poza jedną instalacją własną, to właśnie tam trzeba zajrzeć.

Konwersja do PNG, SVG albo PDF

Otwórz plik w edytorze i użyj przycisków eksportu. SVG zachowuje diagram jako tekst wektorowy, więc pozostaje ostry w każdym rozmiarze, a etykiety da się zaznaczać i wyszukiwać — to właściwy wybór do dokumentacji i do wszystkiego, co może być później eksportowane ponownie. PNG jest mapą bitową, eksportowaną tutaj w dwu- do trzykrotności rozmiaru wyświetlania, żeby wytrzymał na ekranie o dużej gęstości; używaj go tam, gdzie SVG nie jest przyjmowany, czyli w praktyce w większości komunikatorów i części wiki.

Przycisku PDF nie ma i wolę to napisać, niż udawać. Praktyczna droga to wyeksportować SVG i albo umieścić go w dokumencie, który i tak piszesz, albo wydrukować tę stronę do PDF z przeglądarki. Wektorowy SVG umieszczony w PDF pozostaje wektorem.

Do wszystkiego powtarzalnego — kroku budowania, partii plików, haka pre-commit — jest oficjalny silnik wiersza poleceń @mermaid-js/mermaid-cli: bierze ten sam plik .mmd i zapisuje obraz bezpośrednio, bez przeglądarki.

Częste pytania

Jak otworzyć plik .mmd online?
Upuść go na ramkę u góry tej strony. Rysuje się w twojej przeglądarce, bez wysyłania i bez konta. Możesz też otworzyć edytor i przeciągnąć plik na panel podglądu.
Jaki program otwiera plik .mmd?
Źródło pokaże ci dowolny edytor tekstu, bo plik jest zwykłym tekstem. Żeby zobaczyć diagram, potrzebujesz czegoś, co rysuje Mermaida: tej strony, edytora na tej stronie albo narzędzia wiersza poleceń mermaid-cli. Nie ma aplikacji desktopowej, do której należałoby rozszerzenie .mmd.
Czy plik .mmd to to samo co .mermaid?
Tak. Oba rozszerzenia zawierają identyczną treść i są wymienne. .mmd jest częstsze i to właśnie jego domyślnie używa oficjalne narzędzie wiersza poleceń.
Dlaczego mój plik .mmd nie rysuje się na GitHubie?
GitHub rysuje Mermaida wyłącznie wewnątrz ogrodzonych bloków ```mermaid w plikach Markdown, zgłoszeniach, Discussions, pull requestach i wiki. Samodzielny plik .mmd pokazywany jest jako tekst źródłowy. Żeby był widoczny na GitHubie, umieść ten sam diagram w ogrodzonym bloku w pliku .md.
Czy mogę otworzyć .mmd bez instalowania czegokolwiek?
Tak — po to jest ta strona. Rysowanie działa jako JavaScript w twojej przeglądarce, więc nie ma czego instalować, a plik nigdy nie opuszcza twojego komputera.
Polskie znaki wyświetlają się jako dziwne symbole
Plik nie jest w UTF-8. Ta strona czyta pliki jako UTF-8 i bez problemu radzi sobie ze znacznikiem BOM, ale plik zapisany w Windows-1250 albo ISO-8859-2 przyjdzie z uszkodzonymi ogonkami. Zapisz go ponownie w UTF-8 ze swojego edytora.
Tutaj działa, a na naszej wiki nie. Dlaczego?
Prawie zawsze chodzi o różnicę wersji. Ta przeglądarka działa na Mermaidzie 11.12.2, a wiele wiki na czymś starszym — GitLab.com dokumentuje wersję 10. Wpisz w diagramie na drugim systemie słowo info, żeby wypisał wersję, na której działa.

Typy diagramów, które możesz tu otworzyć

Autor: Dominik Malsch · Ostatnia aktualizacja:

Otwórz edytor →