Eksport diagramu mermaid do PNG, SVG lub Markdown
Diagram jest użyteczny tylko tam, gdzie można go zobaczyć. Mermaid daje cztery drogi wyjścia — obraz, wektor, źródło albo blok Markdown, który renderuje się sam — a właściwa zależy wyłącznie od tego, dokąd diagram trafia. To skrócona wersja, plus to, co psuje się przy każdej z nich.
Najpierw wybierz format
| Miejsce docelowe | Zastosowanie | Dlaczego |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Blok Markdown | Renderuje się natywnie i zostaje diffowalny — nie ma pliku do synchronizowania. |
| Slajdy, specyfikacja, wiadomość na czacie | PNG | Wkleja się wszędzie, nie wymaga renderera, wygląda tak samo wszędzie. |
| Strona internetowa, dokument do druku | SVG | Wektor — ostry w każdym rozmiarze, a tekst pozostaje zaznaczalny. |
| Inny edytor, repozytorium | Źródło .mmd | Edytowalne później. Obraz to ślepy zaułek. |
Jeśli miejsce docelowe renderuje mermaid, w ogóle nie eksportuj. Diagram zapisany jako tekst można przejrzeć linia po linii; ten sam diagram zapisany jako PNG można tylko zastąpić.
Eksport z tego edytora
Otwórz zakładkę kodu — przyciski eksportu znajdują się na pasku narzędzi, a każdy działa na tym, co jest aktualnie wyrenderowane.
- Kopiuj SVG — umieszcza znaczniki
<svg>w schowku, gotowe do wklejenia bezpośrednio do pliku HTML lub narzędzia projektowego. - Pobierz SVG — zapisuje
diagram.svg. - Pobierz PNG — zapisuje
diagram.png, wyrenderowany w skali 2x z białym tłem, dzięki czemu pozostaje ostry na ekranie o wysokiej gęstości pikseli i nigdy nie ląduje jako przezroczysta smuga na białym slajdzie. - Pobierz .mmd — zapisuje źródło mermaid jako zwykły plik tekstowy.
- Pobierz .md (Notion) — zapisuje źródło owinięte w blok ```mermaid, który Notion, GitHub i Obsidian renderują po wklejeniu.
Do prezentacji weź PNG. Do wszystkiego, co będzie zmieniać rozmiar — nagłówka dokumentu, plakatu, druku — weź SVG; PNG powiększony ponad rozmiar eksportu od razu robi się rozmyty.
Zamiast tego zostaw to jako tekst
Blok w znacznikach to jedyny eksport, który pozostaje edytowalny w miejscu. Trzy odwrócone apostrofy, słowo mermaid, twój diagram, trzy odwrócone apostrofy:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — renderuje się w plikach README, issues, pull requestach i komentarzach.
- GitLab — renderuje się w wiki, issues i merge requestach.
- Notion — wklej do bloku kodu i ustaw język na Mermaid.
- Obsidian — renderuje się w podglądzie i w opublikowanych notatkach.
- Docusaurus / MkDocs Material / VitePress — bloki mermaid renderują się w zbudowanej dokumentacji.
Co może pójść nie tak
PNG jest rozmyty
PNG ma stałą rozdzielczość: jest eksportowany w ustalonym rozmiarze pikseli, a skalowanie ponad ten rozmiar interpoluje obraz. Ten edytor eksportuje w skali 2x właśnie z tego powodu. Jeśli to wciąż za mało, wyeksportuj SVG i przekonwertuj go do potrzebnego rozmiaru — albo po prostu użyj SVG.
SVG nie ma tła
Eksporty SVG są celowo przezroczyste, więc ciemny tekst węzła znika na ciemnym slajdzie. Umieść SVG na jasnej karcie albo weź PNG, który jest eksportowany na białym tle.
Czcionki wyglądają inaczej gdzie indziej
SVG odwołuje się do rodzin czcionek zamiast je osadzać, więc maszyna bez danej czcionki podstawia inną i pola etykiet przestają się zgadzać. Użyj PNG, gdy nie masz kontroli nad czcionkami u odbiorcy.
Diagram jest ucięty
Eksport odczytuje to, co jest aktualnie wyrenderowane, więc przed eksportem dużego diagramu wyśrodkuj widok. Jeśli etykieta węzła jest ogromna, złam ją za pomocą <br> — mermaid sam nie zawija etykiet.
Eksportuj w dwóch kliknięciach
Otwórz edytor, wklej lub narysuj diagram i pobierz SVG, PNG albo źródło. Nic nie jest zamknięte za kontem.
Najczęściej zadawane pytania
Jak przekonwertować mermaid do PNG?
Wyrenderuj diagram, a następnie użyj Pobierz PNG. Edytor rysuje wyrenderowany SVG na płótnie w skali 2x z białym tłem i zapisuje wynik — bez żadnego zapytania do serwera, więc diagram nigdy nie opuszcza twojej przeglądarki.
Czy mogę wyeksportować przezroczysty PNG?
Nie za pomocą przycisku PNG — celowo wypełnia białe tło, ponieważ ciemny tekst diagramu na przezroczystym tle jest nieczytelny w większości miejsc, gdzie wkleja się PNG. Wyeksportuj zamiast tego SVG; jest przezroczysty.
Czy jest jakiś limit rozmiaru?
Nie ma sztywnego limitu. Eksport odbywa się w twojej przeglądarce, więc praktycznym ograniczeniem jest to, co twoja przeglądarka jest w stanie wyrenderować — a to daleko poza punktem, w którym diagram jest jeszcze czytelny dla człowieka.
Jak zachować możliwość edycji diagramu po eksporcie?
Zachowaj źródło. Pobierz plik .mmd albo blok Markdown obok obrazu; PNG lub SVG nie da się zamienić z powrotem na mermaid, ale źródło wkleja się bezpośrednio z powrotem do edytora.