Export diagramu mermaid do PNG, SVG alebo Markdownu
Diagram je užitočný len tam, kde ho niekto vidí. Mermaid ponúka štyri cesty von — obrázok, vektor, zdroj alebo Markdown blok, ktorý sa vykreslí sám — a tá správna závisí úplne od toho, kam diagram smeruje. Toto je stručná verzia, plus to, čo sa pri každej z nich pokazí.
Najprv vyberte formát
| Cieľ | Použite | Prečo |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Markdown blok | Vykreslí sa natívne a zostáva diffovateľný — žiadny súbor, ktorý treba udržiavať synchronizovaný. |
| Prezentácie, špecifikácia, chatová správa | PNG | Vloží sa kamkoľvek, nepotrebuje renderer, vyzerá rovnako všade. |
| Web, tlačený dokument | SVG | Vektor — ostrý pri akejkoľvek veľkosti a text zostáva vybrateľný. |
| Iný editor, repozitár | zdroj .mmd | Neskôr editovateľné. Obrázok je slepá ulička. |
Ak cieľ vykresľuje mermaid, neexportujte vôbec. Diagram commitnutý ako text sa dá reviewovať riadok po riadku; ten istý diagram commitnutý ako PNG sa dá len nahradiť.
Export z tohto editora
Otvorte kódovú kartu — exportné tlačidlá sú v paneli nástrojov a každé pracuje s tým, čo je práve vykreslené.
- Kopírovať SVG — dá kód
<svg>do schránky, pripravený na vloženie priamo do HTML súboru alebo dizajnérskeho nástroja. - Stiahnuť SVG — uloží
diagram.svg. - Stiahnuť PNG — uloží
diagram.png, vykreslený v 2x rozlíšení s bielym pozadím, takže zostáva ostrý na obrazovke s vysokou hustotou pixelov a nikdy neskončí ako priesvitná škvrna na bielej snímke. - Stiahnuť .mmd — uloží mermaid zdroj ako obyčajný textový súbor.
- Stiahnuť .md (Notion) — uloží zdroj obalený v ohradenom ```mermaid bloku, ktorý Notion, GitHub a Obsidian vykreslia po vložení.
Pre prezentáciu použite PNG. Pre čokoľvek, čo sa bude meniť veľkosťou — nadpis dokumentu, plagát, tlač — použite SVG; PNG zväčšené nad rámec exportnej veľkosti hneď stratí ostrosť.
Namiesto toho ho nechajte ako text
Ohradený blok je jediný export, ktorý zostáva editovateľný na mieste. Tri spätné apostrofy, slovo mermaid, váš diagram, tri spätné apostrofy:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — vykreslí sa v súboroch README, issues, pull requestoch a komentároch.
- GitLab — vykreslí sa na wiki, v issues a merge requestoch.
- Notion — vložte do bloku kódu a nastavte jazyk na Mermaid.
- Obsidian — vykreslí sa v náhľade aj v publikovaných poznámkach.
- Docusaurus / MkDocs Material / VitePress — mermaid bloky sa vykreslia vo vybudovanej dokumentácii.
Čo sa dokáže pokaziť
PNG je rozmazané
PNG má pevné rozlíšenie: exportuje sa v danej veľkosti v pixeloch a zväčšenie nad rámec toho interpoluje. Tento editor preto exportuje v 2x. Ak to stále nestačí, exportujte SVG a skonvertujte ho na akúkoľvek veľkosť, ktorú potrebujete — alebo použite rovno SVG.
SVG nemá pozadie
Exporty SVG sú zámerne priesvitné, takže tmavý text uzlov zmizne na tmavej snímke. Buď dajte SVG na svetlú kartu, alebo použite PNG, ktoré sa exportuje na bielom.
Písmo vyzerá inde inak
SVG odkazuje na rodiny písiem namiesto toho, aby ich vkladalo, takže stroj bez daného písma ho nahradí iným a rámčeky popiskov sa prestanú zarovnávať. Ak nemôžete ovládať písma u diváka, použite PNG.
Diagram je orezaný
Export číta to, čo je práve vykreslené, takže pred exportom veľkého diagramu vycentrujte pohľad. Ak je popisok uzla obrovský, zalomte ho pomocou <br> — mermaid popisky sám od seba nezalamuje.
Exportujte na dva kliky
Otvorte editor, vložte alebo nakreslite svoj diagram a vezmite si SVG, PNG alebo zdroj. Nič nie je za účtom.
Časté otázky
Ako skonvertujem mermaid do PNG?
Vykreslite diagram a potom použite Stiahnuť PNG. Editor nakreslí vykreslené SVG na canvas v 2x mierke s bielym pozadím a uloží výsledok — bez odosielania na server, takže diagram nikdy neopustí váš prehliadač.
Môžem exportovať priesvitné PNG?
Nie z tlačidla PNG — zámerne vypĺňa biele pozadie, pretože tmavý text diagramu na priesvitnom pozadí je na väčšine miest, kam sa PNG vkladá, nečitateľný. Namiesto toho exportujte SVG; to priesvitné je.
Existuje limit veľkosti?
Žiadny pevný. Export prebieha vo vašom prehliadači, takže praktický limit je to, čo váš prehliadač dokáže vykresliť — čo je ďaleko za bodom, kedy je diagram pre človeka ešte čitateľný.
Ako zostane diagram editovateľný po exporte?
Ponechajte si zdroj. Stiahnite súbor .mmd alebo Markdown blok popri obrázku; PNG alebo SVG sa naspäť na mermaid premeniť nedá, ale zdroj sa vloží priamo späť do editora.