Izvezite mermaid dijagram u PNG, SVG ili Markdown
Dijagram je koristan samo tamo gdje se može vidjeti. Mermaid vam daje četiri načina izlaza — sliku, vektor, izvorni kod, ili Markdown blok koji se sam prikazuje — a pravi izbor u potpunosti ovisi o tome kamo dijagram ide. Ovo je kratka verzija, plus ono što ne uspijeva sa svakim od njih.
Prvo odaberite format
| Odredište | Upotreba | Zašto |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Markdown blok | Prikazuje se izvorno i ostaje diffable — nema datoteke koju treba održavati sinkroniziranom. |
| Prezentacije, specifikacija, poruka u chatu | PNG | Lijepi se bilo gdje, ne treba renderer, izgleda jednako svugdje. |
| Web stranica, tiskani dokument | SVG | Vektor — oštar u bilo kojoj veličini, a tekst ostaje selektabilan. |
| Drugi editor, repozitorij | .mmd izvor | Kasnije uredivo. Slika je slijepa ulica. |
Ako odredište prikazuje mermaid, uopće ne izvozite. Dijagram predan kao tekst može se pregledati redak po redak; isti dijagram predan kao PNG može se samo zamijeniti.
Izvoz iz ovog editora
Otvorite karticu koda — gumbi za izvoz nalaze se u alatnoj traci, a svaki djeluje na ono što je trenutno prikazano.
- Kopiraj SVG — stavlja
<svg>oznake u međuspremnik, spremne za izravno lijepljenje u HTML datoteku ili alat za dizajn. - Preuzmi SVG — sprema
diagram.svg. - Preuzmi PNG — sprema
diagram.png, prikazan u 2x s bijelom pozadinom kako bi ostao oštar na ekranu visoke gustoće i nikad ne završi kao prozirna mrlja na bijeloj prezentaciji. - Preuzmi .mmd — sprema mermaid izvor kao obični tekstualni fajl.
- Preuzmi .md (Notion) — sprema izvor omotan u ograđeni ```mermaid blok, koji Notion, GitHub i Obsidian prikazuju pri lijepljenju.
Za prezentaciju uzmite PNG. Za sve što će mijenjati veličinu — naslov dokumenta, poster, tisak — uzmite SVG; PNG povećan iznad veličine izvoza odmah postaje mutan.
Umjesto toga zadržite kao tekst
Ograđeni blok jedini je izvoz koji ostaje uredivo na mjestu. Tri obrnuta navodnika, riječ mermaid, vaš dijagram, tri obrnuta navodnika:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — prikazuje se u README datotekama, issues, pull requestovima i komentarima.
- GitLab — prikazuje se u wikiju, issues i merge requestovima.
- Notion — zalijepite u blok koda i postavite jezik na Mermaid.
- Obsidian — prikazuje se u pregledu i u objavljenim bilješkama.
- Docusaurus / MkDocs Material / VitePress — mermaid blokovi prikazuju se u izgrađenoj dokumentaciji.
Stvari koje pođu po zlu
PNG je mutan
PNG je fiksne rezolucije: izvozi se u određenoj veličini piksela, a povećanje iznad toga interpolira. Ovaj editor zbog toga izvozi u 2x. Ako to i dalje nije dovoljno, izvezite SVG i pretvorite ga u bilo koju veličinu koja vam treba — ili jednostavno koristite SVG.
SVG nema pozadinu
SVG izvozi su prozirni po dizajnu, pa tamni tekst čvora nestaje na tamnoj prezentaciji. Ili stavite SVG na svijetlu podlogu, ili uzmite PNG, koji se izvozi na bijeloj pozadini.
Fontovi izgledaju drugačije negdje drugdje
SVG referencira obitelji fontova umjesto da ih ugrađuje, pa računalo bez tog fonta zamjenjuje drugi i okviri oznaka prestaju biti poravnati. Koristite PNG kad ne možete kontrolirati fontove na strani gledatelja.
Dijagram je odrezan
Izvoz čita ono što je trenutno prikazano, pa ponovno centrirajte prikaz prije izvoza velikog dijagrama. Ako je oznaka čvora ogromna, prelomite je s <br> — mermaid sam ne prelama oznake.
Izvezite u dva klika
Otvorite editor, zalijepite ili nacrtajte svoj dijagram, i uzmite SVG, PNG ili izvor. Ništa nije iza računa.
Često postavljana pitanja
Kako pretvoriti mermaid u PNG?
Prikažite dijagram, zatim koristite Preuzmi PNG. Editor crta prikazani SVG na canvas u 2x mjerilu s bijelom pozadinom i sprema rezultat — bez odlaska na poslužitelj, pa dijagram nikad ne napušta vaš preglednik.
Mogu li izvesti prozirni PNG?
Ne iz PNG gumba — namjerno se puni bijelom bojom, jer tamni tekst dijagrama na prozirnoj pozadini nečitljiv je u većini mjesta gdje se PNG lijepi. Umjesto toga izvezite SVG; on je proziran.
Postoji li ograničenje veličine?
Nema fiksnog. Izvoz se odvija u vašem pregledniku, pa je praktično ograničenje ono što će vaš preglednik prikazati — što je daleko iznad točke u kojoj je dijagram još uvijek čitljiv čovjeku.
Kako zadržati dijagram uredivim nakon izvoza?
Zadržite izvor. Preuzmite .mmd datoteku ili Markdown blok uz sliku; PNG ili SVG ne mogu se pretvoriti natrag u mermaid, ali izvor se lijepi izravno natrag u editor.