Export mermaid diagramu do PNG, SVG nebo Markdownu
Diagram je užitečný jen tam, kde ho lze vidět. Mermaid nabízí čtyři cesty ven — obrázek, vektor, zdroj, nebo Markdown blok, který se vykreslí sám — a ta správná záleží čistě na tom, kam diagram míří. Tohle je stručná verze, plus co se u každé pokazí.
Nejdřív zvolte formát
| Cíl | Použijte | Proč |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Markdown blok | Vykreslí se nativně a zůstává diffovatelný — žádný soubor, který by bylo nutné synchronizovat. |
| Prezentace, specifikace, zpráva v chatu | PNG | Vloží se kamkoli, nepotřebuje renderer, vypadá všude stejně. |
| Web, tištěný dokument | SVG | Vektor — ostrý v jakékoli velikosti a text zůstává vybratelný. |
| Jiný editor, repozitář | .mmd zdroj | Editovatelné později. Obrázek je slepá ulička. |
Pokud cíl mermaid vykresluje sám, neexportujte vůbec nic. Diagram uložený jako text lze projít řádek po řádku v review; stejný diagram uložený jako PNG lze jen nahradit celý.
Export z tohoto editoru
Otevřete kódovou kartu — tlačítka pro export jsou v panelu nástrojů a každé pracuje s tím, co je právě vykreslené.
- Kopírovat SVG — vloží
<svg>kód do schránky, připravený vložit přímo do HTML souboru nebo grafického nástroje. - Stáhnout SVG — uloží
diagram.svg. - Stáhnout PNG — uloží
diagram.png, vykreslený ve 2x rozlišení s bílým pozadím, takže zůstane ostrý na displeji s vysokou hustotou pixelů a nikdy neskončí jako průhledná šmouha na bílém slajdu. - Stáhnout .mmd — uloží mermaid zdroj jako obyčejný textový soubor.
- Stáhnout .md (Notion) — uloží zdroj obalený v mermaid bloku, který Notion, GitHub i Obsidian po vložení vykreslí.
Pro prezentaci vezměte PNG. Pro cokoli, co se bude zvětšovat — nadpis dokumentu, plakát, tisk — vezměte SVG; PNG zvětšené nad svou exportní velikost okamžitě zmatní.
Nechte to raději jako text
Blok v uvozovkách je jediný export, který zůstává editovatelný přímo na místě. Tři zpětné apostrofy, slovo mermaid, váš diagram, tři zpětné apostrofy:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — vykreslí se v README souborech, issues, pull requestech i komentářích.
- GitLab — vykreslí se na wiki, v issues i merge requestech.
- Notion — vložte do kódového bloku a nastavte jazyk na Mermaid.
- Obsidian — vykreslí se v náhledu i v publikovaných poznámkách.
- Docusaurus / MkDocs Material / VitePress — mermaid bloky se vykreslí v sestavené dokumentaci.
Co se může pokazit
PNG je rozmazané
PNG má pevné rozlišení: exportuje se v dané velikosti v pixelech a zvětšení nad tuhle hranici interpoluje. Tenhle editor proto exportuje ve 2x rozlišení. Pokud to pořád nestačí, exportujte SVG a převeďte ho na jakoukoli potřebnou velikost — nebo rovnou použijte SVG.
SVG nemá pozadí
SVG exporty jsou záměrně průhledné, takže tmavý text uzlů zmizí na tmavém slajdu. Buď umístěte SVG na světlou podložku, nebo vezměte PNG, které se exportuje na bílém pozadí.
Písmo vypadá jinde jinak
SVG odkazuje na rodiny písem, místo aby je vkládal, takže počítač bez daného písma dosadí jiné a popiskové rámečky se přestanou zarovnávat. Použijte PNG, když nemůžete ovlivnit fonty na straně příjemce.
Diagram je oříznutý
Export čte to, co je právě vykreslené, takže před exportem velkého diagramu pohled vycentrujte. Je-li popisek uzlu obrovský, rozdělte ho pomocí <br> — mermaid popisky sám nezalamuje.
Exportujte na dva kliky
Otevřete editor, vložte nebo nakreslete diagram a vezměte si SVG, PNG nebo zdroj. Nic tu není za účtem.
Časté dotazy
Jak převedu mermaid do PNG?
Vykreslete diagram a použijte Stáhnout PNG. Editor nakreslí vykreslené SVG na canvas ve 2x rozlišení s bílým pozadím a výsledek uloží — bez volání na server, takže diagram nikdy neopustí váš prohlížeč.
Můžu exportovat průhledné PNG?
Z tlačítka PNG ne — záměrně vyplňuje bílou, protože tmavý text diagramu na průhledném pozadí je nečitelný skoro všude, kam se PNG vkládá. Exportujte místo toho SVG; to průhledné je.
Existuje limit velikosti?
Žádný pevný. Export probíhá ve vašem prohlížeči, takže praktický limit je to, co váš prohlížeč zvládne vykreslit — což je daleko za bodem, kdy je diagram ještě čitelný pro člověka.
Jak udržím diagram editovatelný i po exportu?
Uchovejte zdroj. Stáhněte si .mmd soubor nebo Markdown blok vedle obrázku; PNG ani SVG se zpátky na mermaid převést nedá, ale zdroj se vloží přímo zpátky do editoru.