Izvozi mermaid diagram v PNG, SVG ali Markdown
Diagram je koristen le tam, kjer ga je mogoče videti. Mermaid ponuja štiri poti ven — sliko, vektor, izvorno kodo ali blok Markdown, ki se izriše sam — pravi izbor pa je popolnoma odvisen od tega, kam diagram gre. To je kratka različica, plus kaj se pri vsakem pokvari.
Najprej izberi format
| Cilj | Uporaba | Zakaj |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Blok Markdown | Izriše se domače in ostane primerljiv (diff) — brez datoteke, ki bi jo bilo treba usklajevati. |
| Predstavitve, specifikacija, sporočilo v klepetu | PNG | Prilepi se kamor koli, ne potrebuje izrisovalnika, povsod je videti enako. |
| Spletna stran, natisnjen dokument | SVG | Vektor — oster pri kateri koli velikosti, besedilo pa ostane izbirljivo. |
| Drug urejevalnik, repozitorij | Izvorna koda .mmd | Pozneje ga je mogoče urejati. Slika je slepa ulica. |
Če cilj izrisuje mermaid, sploh ne izvažaj. Diagram, dodan kot besedilo, je mogoče pregledati vrstico po vrstico; isti diagram, dodan kot PNG, je mogoče le zamenjati.
Izvoz iz tega urejevalnika
Odpri zavihek s kodo — gumbi za izvoz so v orodni vrstici, vsak pa deluje na tem, kar je trenutno izrisano.
- Kopiraj SVG — postavi kodo
<svg>v odložišče, pripravljeno za lepljenje neposredno v datoteko HTML ali orodje za oblikovanje. - Prenesi SVG — shrani
diagram.svg. - Prenesi PNG — shrani
diagram.png, izrisan v 2x ločljivosti z belim ozadjem, da ostane oster na zaslonu z visoko gostoto in nikoli ne pristane kot prosojen madež na beli diapozitivi. - Prenesi .mmd — shrani izvorno kodo mermaid kot navadno besedilno datoteko.
- Prenesi .md (Notion) — shrani izvorno kodo, ovito v ograjen ```mermaid blok, ki ga Notion, GitHub in Obsidian izrišejo ob lepljenju.
Za predstavitev vzemi PNG. Za vse, kar bo spremenilo velikost — naslov dokumenta, plakat, tisk — vzemi SVG; PNG, povečan čez svojo izvozno velikost, takoj postane mehak.
Namesto tega ga ohrani kot besedilo
Ograjen blok je edini izvoz, ki ostane urejljiv na mestu. Tri obratne poševnice, beseda mermaid, tvoj diagram, tri obratne poševnice:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — izriše se v datotekah README, issues, pull requestih in komentarjih.
- GitLab — izriše se v wikiju, issues in merge requestih.
- Notion — prilepi v blok kode in nastavi jezik na Mermaid.
- Obsidian — izriše se v predogledu in v objavljenih zapiskih.
- Docusaurus / MkDocs Material / VitePress — mermaid bloki se izrišejo v zgrajeni dokumentaciji.
Kaj gre lahko narobe
PNG je zamegljen
PNG ima fiksno ločljivost: izvožen je v določeni velikosti v slikovnih pikah, povečava čez to pa interpolira. Zato ta urejevalnik izvaža v 2x ločljivosti. Če to še vedno ni dovolj, izvozi SVG in ga pretvori v poljubno velikost — ali pa preprosto uporabi SVG.
SVG nima ozadja
Izvozi SVG so namenoma prozorni, zato temno besedilo vozlišč izgine na temni diapozitivi. SVG postavi na svetlo kartico, ali pa vzemi PNG, ki je izvožen na belem ozadju.
Pisave so videti drugače drugje
SVG se sklicuje na družine pisav, namesto da bi jih vgradil, zato naprava brez te pisave nadomesti drugo in polja z oznakami se prenehajo ujemati. Uporabi PNG, kadar ne moreš nadzorovati pisav gledalca.
Diagram je odrezan
Izvoz prebere tisto, kar je trenutno izrisano, zato pred izvozom velikega diagrama ponovno centriraj pogled. Če je oznaka vozlišča ogromna, jo prelomi z <br> — mermaid oznak ne prelama sam od sebe.
Izvozi v dveh klikih
Odpri urejevalnik, prilepi ali nariši svoj diagram in vzemi SVG, PNG ali izvorno kodo. Nič ni za računom.
Pogosta vprašanja
Kako pretvorim mermaid v PNG?
Izriši diagram, nato uporabi Prenesi PNG. Urejevalnik izrisan SVG nariše na platno v 2x merilu z belim ozadjem in shrani rezultat — brez povratne poti na strežnik, zato diagram nikoli ne zapusti tvojega brskalnika.
Lahko izvozim prosojen PNG?
Ne z gumbom PNG — ta namenoma zapolni belo ozadje, ker je temno besedilo diagrama na prosojnem ozadju na večini mest, kamor se PNG prilepi, neberljivo. Namesto tega izvozi SVG; ta je prosojen.
Ali obstaja omejitev velikosti?
Ni fiksne. Izvoz poteka v tvojem brskalniku, zato je praktična omejitev tisto, kar bo tvoj brskalnik izrisal — kar je daleč onkraj točke, kjer je diagram za človeka še vedno berljiv.
Kako ohranim diagram urejljiv po izvozu?
Obdrži izvorno kodo. Prenesi datoteko .mmd ali blok Markdown poleg slike; PNG ali SVG ni mogoče spremeniti nazaj v mermaid, izvorna koda pa se prilepi naravnost nazaj v urejevalnik.