Eksportuoti mermaid diagramą į PNG, SVG ar Markdown
Diagrama naudinga tik ten, kur ją galima pamatyti. Mermaid duoda keturis būdus ją išvesti — paveikslėlį, vektorių, kodą arba Markdown bloką, kuris atvaizduoja save pats — ir tinkamas variantas visiškai priklauso nuo to, kur diagrama keliaus. Tai trumpoji versija, plius kas sugenda su kiekvienu variantu.
Pirmiausia pasirink formatą
| Paskirtis | Naudok | Kodėl |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Markdown bloką | Atvaizduojamas natūraliai ir lieka palyginamas (diff) — nereikia failo sinchronizuoti. |
| Skaidrėms, specifikacijai, pokalbio žinutei | PNG | Įklijuojamas bet kur, nereikalauja atvaizdavimo variklio, atrodo taip pat visur. |
| Svetainei, spausdintam dokumentui | SVG | Vektorinis — ryškus bet kokiu dydžiu, o tekstas lieka pažymimas. |
| Kitam redaktoriui, saugyklai | .mmd kodas | Redaguojamas vėliau. Paveikslėlis — aklavietė. |
Jei paskirties vieta atvaizduoja mermaid, iš viso neeksportuok. Diagrama, įkelta kaip tekstas, gali būti peržiūrėta eilutė po eilutės; ta pati diagrama, įkelta kaip PNG, gali būti tik pakeista.
Eksportuok iš šio redaktoriaus
Atverk kodo skirtuką — eksporto mygtukai yra įrankių juostoje, ir kiekvienas veikia su tuo, kas šiuo metu atvaizduota.
- Kopijuoti SVG — įdeda
<svg>kodą į iškarpinę, paruoštą įklijuoti tiesiai į HTML failą arba dizaino įrankį. - Atsisiųsti SVG — išsaugo
diagram.svg. - Atsisiųsti PNG — išsaugo
diagram.png, atvaizduotą dvigubos raiškos su baltu fonu, kad liktų ryškus didelio tankio ekrane ir niekada nevirstų permatoma dėme baltoje skaidrėje. - Atsisiųsti .mmd — išsaugo mermaid kodą kaip paprastą tekstinį failą.
- Atsisiųsti .md (Notion) — išsaugo kodą, apgaubtą apibrėžtu ```mermaid bloku, kurį Notion, GitHub ir Obsidian atvaizduoja įklijavus.
Skaidrių rinkiniui imk PNG. Viskam, kas bus keičiamo dydžio — dokumento antraštei, plakatui, spaudai — imk SVG; PNG, padidintas virš eksporto dydžio, iškart tampa neryškus.
Verčiau palik kaip tekstą
Apibrėžtas blokas yra vienintelis eksporto būdas, kuris lieka redaguojamas vietoje. Trys atgalinės kabutės, žodis mermaid, tavo diagrama, trys atgalinės kabutės:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — atvaizduojamas README failuose, issues, pull request'uose ir komentaruose.
- GitLab — atvaizduojamas wiki, issues ir merge request'uose.
- Notion — įklijuok į kodo bloką ir nustatyk kalbą į Mermaid.
- Obsidian — atvaizduojamas peržiūroje ir publikuotuose užrašuose.
- Docusaurus / MkDocs Material / VitePress — mermaid blokai atvaizduojami sukurtoje dokumentacijoje.
Kas gali suklysti
PNG neryškus
PNG yra fiksuotos raiškos: jis eksportuojamas nustatyto pikselių dydžio, o didinant virš to vyksta interpoliacija. Šis redaktorius dėl to eksportuoja dvigubos raiškos. Jei ir to neužtenka, eksportuok SVG ir konvertuok jį reikiamu dydžiu — arba tiesiog naudok SVG.
SVG be fono
SVG eksportai yra permatomi iš principo, todėl tamsus mazgo tekstas dingsta tamsioje skaidrėje. Arba dėk SVG ant šviesios kortelės, arba imk PNG, kuris eksportuojamas baltame fone.
Šriftai kitur atrodo kitaip
SVG nurodo šriftų šeimas, o ne jas įterpia, tad mašina be to šrifto pakeičia jį kitu, ir etikečių dėžutės nustoja sutapti. Naudok PNG, kai negali kontroliuoti žiūrovo šriftų.
Diagrama nukirsta
Eksportas nuskaito tai, kas šiuo metu atvaizduota, tad prieš eksportuodamas didelę diagramą centruok vaizdą iš naujo. Jei mazgo etiketė milžiniška, pertrauk ją su <br> — mermaid pati etikečių nelaužo.
Eksportuok per du paspaudimus
Atverk redaktorių, įklijuok arba nupiešk savo diagramą, ir pasiimk SVG, PNG arba kodą. Niekas nėra už paskyros.
Dažniausiai užduodami klausimai
Kaip konvertuoti mermaid į PNG?
Atvaizduok diagramą, tada naudok Atsisiųsti PNG. Redaktorius nupiešia atvaizduotą SVG ant drobės (canvas) dvigubu masteliu su baltu fonu ir išsaugo rezultatą — jokio kelio per serverį, tad diagrama niekada nepalieka tavo naršyklės.
Ar galiu eksportuoti permatomą PNG?
Ne per PNG mygtuką — jis sąmoningai užpildo baltą foną, nes tamsus diagramos tekstas permatomame fone neįskaitomas daugumoje vietų, kur PNG įklijuojamas. Eksportuok SVG vietoj to; jis permatomas.
Ar yra dydžio riba?
Nėra fiksuotos. Eksportas vyksta tavo naršyklėje, tad praktinė riba yra tai, ką atvaizduos tavo naršyklė — o tai gerokai toliau taško, kuriame diagrama žmogui dar būtų skaitoma.
Kaip išlaikyti diagramą redaguojamą po eksporto?
Išsaugok kodą. Atsisiųsk .mmd failą arba Markdown bloką kartu su paveikslėliu; PNG ar SVG negalima paversti atgal į mermaid, bet kodas įklijuojamas tiesiai atgal į redaktorių.