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:
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.
```mermaid
flowchart TD
A[Start] --> B[Koniec]
```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.
flowchart TD
A[Wywołaj obciąż(zamówienie)] --> B[Koniec]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.
flowchart TD
serwer uwierzytelniania --> baza danychflowchart 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;.
flowchart TD
A[Powiedział "cześć"] --> B[Koniec]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.
flowchart TD
A[Start] --> endflowchart 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.
stateDiagram-v2
[*] --> Oczekuje na płatność
Oczekuje na płatność --> ZamkniętestateDiagram-v2
state "Oczekuje na płatność" as oczekuje
[*] --> oczekuje
oczekuje --> ZamknięteCo 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ą.
erDiagram
KLIENT ||--o{ ZAMOWIENIE : należy doerDiagram
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.
sequencediagram
Klient->>API: Cześć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.
flowchart TD
A -->|tak (zawsze)| Bflowchart TD
A -->|"tak (zawsze)"| BCo 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.
sequenceDiagram
Klient->>API: Żądanie
alt Wszystko dobrze
API-->>Klient: OKsequenceDiagram
Klient->>API: Żądanie
alt Wszystko dobrze
API-->>Klient: OK
endCo 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.
flowchart XY
A --> Bflowchart TD
A --> BCo 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.
infoWarto 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?
Jaki program otwiera plik .mmd?
Czy plik .mmd to to samo co .mermaid?
Dlaczego mój plik .mmd nie rysuje się na GitHubie?
Czy mogę otworzyć .mmd bez instalowania czegokolwiek?
Polskie znaki wyświetlają się jako dziwne symbole
Tutaj działa, a na naszej wiki nie. Dlaczego?
Typy diagramów, które możesz tu otworzyć
Autor: Dominik Malsch · Ostatnia aktualizacja: