Vie mermaid-kaavio PNG-, SVG- tai Markdown-muotoon
Kaavio on hyödyllinen vain siellä missä sen näkee. Mermaid tarjoaa neljä tapaa viedä sen ulos — kuvan, vektorin, lähdekoodin, tai Markdown-lohkon joka piirtää itsensä — ja oikea valinta riippuu täysin siitä minne kaavio on menossa. Tämä on lyhyt versio, sekä se mikä kunkin kanssa menee rikki.
Valitse formaatti ensin
| Kohde | Käytä | Miksi |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Markdown-lohko | Piirtyy natiivisti ja pysyy diffattavana — ei tiedostoa pidettäväksi synkassa. |
| Diat, spesifikaatio, chat-viesti | PNG | Liitettävissä minne tahansa, ei tarvitse piirtomoottoria, näyttää samalta kaikkialla. |
| Verkkosivu, painettu dokumentti | SVG | Vektori — terävä missä tahansa koossa, ja teksti pysyy valittavana. |
| Toinen editori, repo | .mmd-lähdekoodi | Muokattavissa myöhemmin. Kuva on umpikuja. |
Jos kohde piirtää mermaidia, älä vie sitä lainkaan. Tekstinä committoitu kaavio voidaan katselmoida rivi riviltä; sama kaavio PNG:nä committoituna voidaan vain korvata.
Vie tästä editorista
Avaa koodivälilehti — vientipainikkeet ovat työkalurivillä, ja kukin toimii sen mukaan mitä on juuri nyt piirretty.
- Kopioi SVG — laittaa
<svg>-merkkauksen leikepöydälle, valmiina liitettäväksi suoraan HTML-tiedostoon tai suunnittelutyökaluun. - Lataa SVG — tallentaa tiedoston
diagram.svg. - Lataa PNG — tallentaa tiedoston
diagram.png, piirrettynä 2x-koossa valkoisella taustalla, jotta se pysyy terävänä korkearesoluutioisella näytöllä eikä koskaan päädy läpinäkyvänä tahrana valkoiselle dialle. - Lataa .mmd — tallentaa mermaid-lähdekoodin tavallisena tekstitiedostona.
- Lataa .md (Notion) — tallentaa lähdekoodin aidatun ```mermaid-lohkon sisään, jonka Notion, GitHub ja Obsidian piirtävät liittämisen yhteydessä.
Diaesitykseen ota PNG. Kaikkeen mitä tullaan skaalaamaan — dokumentin otsikkoon, julisteeseen, painatukseen — ota SVG; vientikokoaan suuremmaksi skaalattu PNG sumenee heti.
Pidä se tekstinä sen sijaan
Aidattu lohko on ainoa vientimuoto joka pysyy muokattavana paikan päällä. Kolme takaheittomerkkiä, sana mermaid, kaaviosi, kolme takaheittomerkkiä:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — piirtyy README-tiedostoissa, issueissa, pull requesteissa ja kommenteissa.
- GitLab — piirtyy wikissä, issueissa ja merge requesteissa.
- Notion — liitä koodilohkoon ja aseta kieleksi Mermaid.
- Obsidian — piirtyy esikatselussa ja julkaistuissa muistiinpanoissa.
- Docusaurus / MkDocs Material / VitePress — mermaid-lohkot piirtyvät käännetyssä dokumentaatiossa.
Mikä menee pieleen
PNG on sumea
PNG on kiinteäresoluutioinen: se viedään tietyssä pikselikoossa, ja sitä suurempi skaalaus interpoloi. Tämä editori vie 2x-koossa juuri tästä syystä. Jos se ei silti riitä, vie SVG ja muunna se haluamaasi kokoon — tai käytä suoraan SVG:tä.
SVG:ssä ei ole taustaa
SVG-viennit ovat läpinäkyviä tarkoituksella, joten tumma solmuteksti katoaa tummalla dialla. Aseta SVG joko vaalealle kortille, tai ota PNG, joka viedään valkoisella taustalla.
Fontit näyttävät erilaisilta muualla
SVG viittaa fonttiperheisiin sen sijaan että upottaisi ne, joten kone jolla kyseistä fonttia ei ole korvaa sen toisella, ja selitelaatikot lakkaavat kohdistumasta. Käytä PNG:tä kun et voi hallita katsojan fontteja.
Kaavio on rajautunut pois
Vienti lukee sen mikä on juuri nyt piirretty, joten keskitä näkymä uudelleen ennen suuren kaavion viemistä. Jos solmun selite on valtava, katkaise se <br>-merkinnällä — mermaid ei rivitä selitteitä itsestään.
Vie kahdella klikkauksella
Avaa editori, liitä tai piirrä kaaviosi, ja ota SVG, PNG tai lähdekoodi. Mikään ei ole tilin takana.
Usein kysyttyä
Miten muunnan mermaidin PNG:ksi?
Piirrä kaavio, ja käytä sitten Lataa PNG -painiketta. Editori piirtää piirretyn SVG:n kankaalle 2x-mittakaavassa valkoisella taustalla ja tallentaa tuloksen — ei palvelinkäyntiä, joten kaavio ei koskaan poistu selaimestasi.
Voinko viedä läpinäkyvän PNG:n?
Ei PNG-painikkeesta — se täyttää valkoisella tarkoituksella, koska tumma kaavioteksti läpinäkyvällä taustalla ei ole luettavissa useimmissa paikoissa joihin PNG liitetään. Vie sen sijaan SVG; se on läpinäkyvä.
Onko kokorajaa?
Ei kiinteää. Vienti tapahtuu selaimessasi, joten käytännön raja on se mitä selaimesi pystyy piirtämään — mikä on kaukana pisteestä jossa kaavio olisi vielä ihmiselle luettavissa.
Miten pidän kaavion muokattavana viennin jälkeen?
Säilytä lähdekoodi. Lataa .mmd-tiedosto tai Markdown-lohko kuvan rinnalla; PNG:tä tai SVG:tä ei voi muuttaa takaisin mermaidiksi, mutta lähdekoodi liittyy suoraan takaisin editoriin.