Ekspordi mermaid diagramm PNG-, SVG- või Markdown-formaati
Diagramm on kasulik ainult seal, kus seda näha saab. Mermaid annab neli väljapääsu — pildi, vektori, lähtekoodi või Markdown-ploki, mis renderdub iseenesest — ja õige valik sõltub täielikult sellest, kuhu diagramm läheb. See on lühiversioon, pluss see, mis igaühe puhul katki läheb.
Vali kõigepealt formaat
| Sihtkoht | Kasuta | Miks |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Markdown-plokki | See renderdub loomupäraselt ja jääb võrreldavaks — pole faili, mida sünkroonis hoida. |
| Slaidid, spetsifikatsioon, vestlussõnum | PNG-d | Kleebitav kõikjale, ei vaja renderdajat, näeb kõikjal ühesugune välja. |
| Veebisait, prinditud dokument | SVG-d | Vektor — terav igas suuruses ja tekst jääb valitavaks. |
| Teine redaktor, hoidla | .mmd lähtekoodi | Hiljem muudetav. Pilt on ummiktee. |
Kui sihtkoht renderdab mermaidi, ära üldse ekspordi. Tekstina committitud diagrammi saab rida-realt üle vaadata; sama diagrammi, mis on committitud PNG-na, saab ainult asendada.
Ekspordi sellest redaktorist
Ava koodisakk — ekspordinupud asuvad tööriistaribal ja igaüks toimib sellel, mis parasjagu renderdatud on.
- Kopeeri SVG — paneb
<svg>märgistuse lõikelauale, valmis kleepimiseks otse HTML-faili või disainitööriista. - Laadi alla SVG — salvestab faili
diagram.svg. - Laadi alla PNG — salvestab faili
diagram.png, renderdatud 2x suuruses valge taustaga, nii et see püsib teravana kõrge pikslitihedusega ekraanil ega maandu läbipaistva plekina valgel slaidil. - Laadi alla .mmd — salvestab mermaid lähtekoodi tavalise tekstifailina.
- Laadi alla .md (Notion) — salvestab lähtekoodi, mis on ümbritsetud ```mermaid plokiga, mida Notion, GitHub ja Obsidian kleepimisel renderdavad.
Slaidiesitluse jaoks võta PNG. Kõige jaoks, mille suurust hiljem muudetakse — dokumendi pealkiri, plakat, trükis — võta SVG; üle ekspordisuuruse skaleeritud PNG muutub kohe uduseks.
Hoia see hoopis tekstina
Sildistatud plokk on ainus eksport, mis jääb kohapeal muudetavaks. Kolm ülakoma, sõna mermaid, sinu diagramm, kolm ülakoma:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — renderdub README-failides, probleemides, pull request'ides ja kommentaarides.
- GitLab — renderdub wikis, probleemides ja merge request'ides.
- Notion — kleebi koodiplokki ja määra keeleks Mermaid.
- Obsidian — renderdub eelvaates ja avaldatud märkmetes.
- Docusaurus / MkDocs Material / VitePress — mermaid plokid renderduvad valminud dokumentatsioonis.
Mis läheb valesti
PNG on hägune
PNG on fikseeritud eraldusvõimega: see eksporditakse kindlas piksliformaadis ja suurendamine üle selle interpoleerib. See redaktor ekspordib seetõttu 2x suuruses. Kui sellest ikka ei piisa, ekspordi SVG ja teisenda see vajaliku suurusega — või kasuta lihtsalt SVG-d.
SVG-l pole tausta
SVG eksport on disaini poolest läbipaistev, nii et tume sõlmetekst kaob tumedal slaidil. Pane SVG kas heledale kaardile või võta PNG, mis eksporditakse valgel taustal.
Fondid näevad mujal erinevad välja
SVG viitab fondiperekondadele, selle asemel et neid manustada, nii et masin, kus seda fonti pole, asendab selle mõne teisega ja sildikastid lähevad joondusest välja. Kasuta PNG-d, kui sa ei saa vaataja fonte kontrollida.
Diagramm on ära lõigatud
Eksport loeb seda, mis parasjagu renderdatud on, seega tsentreeri vaade enne suure diagrammi eksportimist uuesti. Kui sõlme silt on tohutu, katkesta see märgiga <br> — mermaid ise silte reale ei murra.
Ekspordi kahe klõpsuga
Ava redaktor, kleebi või joonista oma diagramm ja võta SVG, PNG või lähtekood. Miski pole konto taga.
Sageli küsitud
Kuidas teisendada mermaid PNG-ks?
Renderda diagramm, seejärel kasuta nuppu Laadi alla PNG. Redaktor joonistab renderdatud SVG lõuendile 2x mõõtkavas valge taustaga ja salvestab tulemuse — serveripoolset käiku pole, seega diagramm ei lahku kunagi sinu brauserist.
Kas saan eksportida läbipaistva PNG?
Mitte PNG-nupu kaudu — see täidab tausta valgega meelega, sest tume diagrammi tekst läbipaistval taustal on enamikus kohtades, kuhu PNG kleebitakse, loetamatu. Ekspordi selle asemel SVG; see on läbipaistev.
Kas suurusele on piirang?
Fikseeritud piirangut pole. Eksport toimub sinu brauseris, seega on praktiline piir see, mida sinu brauser suudab renderdada — mis jääb kaugelt selle punktist taha, kus diagramm on inimesele veel loetav.
Kuidas hoida diagramm pärast eksportimist muudetavana?
Hoia lähtekood alles. Laadi alla .mmd-fail või Markdown-plokk pildi kõrval; PNG-d või SVG-d ei saa tagasi mermaidiks muuta, kuid lähtekood kleebib end otse tagasi redaktorisse.