Mermaid diagram exportálása PNG-be, SVG-be vagy Markdownba
Egy diagram csak ott hasznos, ahol látható. A mermaid négy kiutat ad — egy képet, egy vektort, a forrást, vagy egy Markdown blokkot, ami magától renderelődik — és a helyes választás teljesen attól függ, hova kerül a diagram. Ez a rövid verzió, plusz ami mindegyiknél elromolhat.
Válaszd ki előbb a formátumot
| Cél | Használat | Miért |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Egy Markdown blokk | Natívan renderelődik, és diffelhető marad — nincs fájl, amit szinkronban kell tartani. |
| Diák, egy specifikáció, egy chatüzenet | PNG | Bárhova beilleszthető, nem igényel renderelőt, mindenhol ugyanúgy néz ki. |
| Egy weboldal, egy nyomtatott dokumentum | SVG | Vektor — bármilyen méretben éles, és a szöveg kijelölhető marad. |
| Egy másik szerkesztő, egy repó | .mmd forrás | Később szerkeszthető. Egy kép egy zsákutca. |
Ha a célhely renderel mermaidot, ne exportálj egyáltalán. Egy szövegként commitolt diagram soronként átnézhető code review-ban; ugyanaz a diagram PNG-ként commitolva csak lecserélhető.
Exportálás ebből a szerkesztőből
Nyisd meg a kód fület — az exportgombok az eszköztárban vannak, és mindegyik azon dolgozik, ami éppen renderelve van.
- SVG másolása — a
<svg>kódot a vágólapra teszi, készen arra, hogy közvetlenül beilleszd egy HTML fájlba vagy egy tervezőeszközbe. - SVG letöltése — elmenti a
diagram.svgfájlt. - PNG letöltése — elmenti a
diagram.pngfájlt, 2x felbontásban renderelve, fehér háttérrel, hogy éles maradjon nagy felbontású képernyőn, és sose landoljon átlátszó foltként egy fehér diasoron. - .mmd letöltése — elmenti a mermaid forrást egyszerű szövegfájlként.
- .md letöltése (Notion) — elmenti a forrást egy körbekerített ```mermaid blokkba csomagolva, amit a Notion, a GitHub és az Obsidian beillesztéskor renderel.
Egy diasorhoz vidd a PNG-t. Bármihez, amit át fognak méretezni — egy dokumentum-fejléc, egy poszter, egy nyomtatás — vidd az SVG-t; egy az exportméret fölé nagyított PNG azonnal elmosódik.
Tartsd meg inkább szövegként
A körbekerített blokk az egyetlen export, ami a helyén szerkeszthető marad. Három backtick, a mermaid szó, a diagramod, három backtick:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — renderelődik README fájlokban, issue-kban, pull requestekben és kommentekben.
- GitLab — renderelődik a wikiben, issue-kban és merge requestekben.
- Notion — illeszd be egy kódblokkba, és állítsd a nyelvet Mermaidra.
- Obsidian — renderelődik előnézetben és publikált jegyzetekben.
- Docusaurus / MkDocs Material / VitePress — a mermaid blokkok renderelődnek a lefordított dokumentációban.
Amik elromolhatnak
A PNG homályos
Egy PNG fix felbontású: egy adott pixelméretben exportálódik, és az azon túli nagyítás interpolál. Ez a szerkesztő ezért exportál 2x méretben. Ha ez sem elég, exportáld az SVG-t, és alakítsd át bármilyen méretre, amire szükséged van — vagy egyszerűen használd az SVG-t.
Az SVG-nek nincs háttere
Az SVG exportok szándékosan átlátszóak, így a sötét csomópontszöveg eltűnik egy sötét diasoron. Vagy tedd az SVG-t egy világos kártyára, vagy vidd a PNG-t, ami fehér háttérrel exportálódik.
A betűtípusok máshol másképp néznek ki
Egy SVG betűtípus-családokra hivatkozik ahelyett, hogy beágyazná őket, így egy gép, amelyiken nincs meg az a betűtípus, egy másikat helyettesít be, és a feliratdobozok elcsúsznak. Használd a PNG-t, ha nem tudod kontrollálni a néző betűtípusait.
A diagram le van vágva
Az exportálás azt olvassa be, ami éppen renderelve van, így központosítsd újra a nézetet, mielőtt egy nagy diagramot exportálnál. Ha egy csomópont felirata hatalmas, törd meg <br>-vel — a mermaid magától nem tördeli a feliratokat.
Exportálás két kattintással
Nyisd meg a szerkesztőt, illeszd be vagy rajzold meg a diagramodat, és vidd az SVG-t, a PNG-t vagy a forrást. Semmi nincs fiók mögé zárva.
Gyakran ismételt kérdések
Hogyan alakítsak mermaidot PNG-vé?
Rendereld a diagramot, majd használd a PNG letöltése gombot. A szerkesztő a renderelt SVG-t egy vászonra rajzolja 2x méretarányban, fehér háttérrel, és elmenti az eredményt — nincs szerveroldali kör, így a diagram sosem hagyja el a böngésződet.
Exportálhatok átlátszó PNG-t?
Nem a PNG gombból — az szándékosan tölt ki fehérrel, mert a sötét diagramszöveg átlátszó háttéren olvashatatlan a legtöbb helyen, ahova egy PNG kerül. Exportáld inkább az SVG-t; az átlátszó.
Van méretkorlát?
Nincs rögzített. Az exportálás a böngésződben történik, így a gyakorlati korlát az, amit a böngésződ hajlandó renderelni — ami messze túl van azon a ponton, ahol a diagram még olvasható egy ember számára.
Hogyan tartsam szerkeszthetőnek a diagramot exportálás után?
Tartsd meg a forrást. Töltsd le a .mmd fájlt vagy a Markdown blokkot a kép mellett; egy PNG vagy SVG nem alakítható vissza mermaiddá, de a forrás egyenesen visszamásolható a szerkesztőbe.