Eksportēt mermaid diagrammu uz PNG, SVG vai Markdown
Diagramma ir noderīga tikai tur, kur to var redzēt. Mermaid piedāvā četrus izejas ceļus — attēlu, vektoru, avotu vai Markdown bloku, kas atveidojas pats — un pareizā izvēle pilnībā ir atkarīga no tā, uz kurieni diagramma dodas. Šī ir īsā versija, plus tas, kas sabojājas ar katru no tiem.
Vispirms izvēlieties formātu
| Mērķis | Lietojums | Kāpēc |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Markdown bloks | Tas atveidojas natīvi un paliek salīdzināms (diff) — nav faila, ko sinhronizēt. |
| Prezentācijas, specifikācija, tērzēšanas ziņa | PNG | Ielīmējams jebkur, nav vajadzīgs atveidotājs, izskatās vienādi visur. |
| Tīmekļa vietne, drukāts dokuments | SVG | Vektors — ass jebkurā izmērā, un teksts paliek iezīmējams. |
| Cits redaktors, repozitorijs | .mmd avots | Vēlāk rediģējams. Attēls ir strupceļš. |
Ja galamērķis atveido mermaid, neeksportējiet vispār. Diagrammu, kas iesniegta kā teksts, var pārskatīt rindiņu pa rindiņai; tā pati diagramma, iesniegta kā PNG, var tikai tikt aizstāta.
Eksportēšana no šī redaktora
Atveriet koda cilni — eksportēšanas pogas atrodas rīkjoslā, un katra darbojas ar to, kas pašlaik ir atveidots.
- Kopēt SVG — ievieto
<svg>marķējumu starpliktuvē, gatavu ielīmēšanai tieši HTML failā vai dizaina rīkā. - Lejupielādēt SVG — saglabā
diagram.svg. - Lejupielādēt PNG — saglabā
diagram.png, atveidotu 2x izšķirtspējā ar baltu fonu, lai tas paliktu ass augstas izšķirtspējas ekrānā un nekad nenonāktu kā caurspīdīgs traips baltā slaidā. - Lejupielādēt .mmd — saglabā mermaid avotu kā vienkāršu teksta failu.
- Lejupielādēt .md (Notion) — saglabā avotu ietvertu norobežotā ```mermaid blokā, ko Notion, GitHub un Obsidian atveido pēc ielīmēšanas.
Prezentācijai izmantojiet PNG. Visam, kas tiks mērogots — dokumenta virsraksts, plakāts, druka — izmantojiet SVG; PNG, palielināts virs sava eksporta izmēra, nekavējoties kļūst neass.
Tā vietā saglabājiet kā tekstu
Norobežotais bloks ir vienīgais eksporta veids, kas paliek rediģējams uz vietas. Trīs pēdiņzīmes, vārds mermaid, jūsu diagramma, trīs pēdiņzīmes:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — atveidojas README failos, issue, pull request un komentāros.
- GitLab — atveidojas wiki, issue un merge request.
- Notion — ielīmējiet koda blokā un iestatiet valodu uz Mermaid.
- Obsidian — atveidojas priekšskatījumā un publicētajās piezīmēs.
- Docusaurus / MkDocs Material / VitePress — mermaid bloki atveidojas izveidotajā dokumentācijā.
Kas var noiet greizi
PNG ir izplūdis
PNG ir fiksētas izšķirtspējas: tas tiek eksportēts noteiktā pikseļu izmērā, un mērogošana virs tā izmanto interpolāciju. Tieši tāpēc šis redaktors eksportē 2x izšķirtspējā. Ja ar to joprojām nepietiek, eksportējiet SVG un konvertējiet to jebkurā nepieciešamajā izmērā — vai vienkārši izmantojiet SVG.
SVG nav fona
SVG eksports pēc noklusējuma ir caurspīdīgs, tāpēc tumšs mezgla teksts pazūd uz tumša slaida. Vai nu novietojiet SVG uz gaišas kartītes, vai izmantojiet PNG, kas tiek eksportēts uz balta fona.
Citur fonti izskatās savādāk
SVG atsaucas uz fontu saimēm, nevis tās iegulda, tāpēc ierīce bez šī fonta aizstāj to ar citu, un etiķešu lauciņi vairs nesaskan. Izmantojiet PNG, ja nevarat kontrolēt skatītāja fontus.
Diagramma ir nogriezta
Eksports nolasa to, kas pašlaik ir atveidots, tāpēc pirms lielas diagrammas eksportēšanas centrējiet skatu no jauna. Ja mezgla etiķete ir ļoti gara, pārtrauciet to ar <br> — mermaid pati etiķetes neaplauž.
Eksportējiet divos klikšķos
Atveriet redaktoru, ielīmējiet vai uzzīmējiet savu diagrammu un lejupielādējiet SVG, PNG vai avotu. Nekas nav slēpts aiz konta.
Biežāk uzdotie jautājumi
Kā konvertēt mermaid uz PNG?
Atveidojiet diagrammu un pēc tam izmantojiet Lejupielādēt PNG. Redaktors uzzīmē atveidoto SVG uz audekla 2x mērogā ar baltu fonu un saglabā rezultātu — bez saziņas ar serveri, tāpēc diagramma nekad neatstāj jūsu pārlūku.
Vai varu eksportēt caurspīdīgu PNG?
Ne izmantojot PNG pogu — tā tīšām aizpilda ar baltu, jo tumšs diagrammas teksts uz caurspīdīga fona lielākajā daļā vietu, kur PNG tiek ielīmēts, ir nesalasāms. Tā vietā eksportējiet SVG — tas ir caurspīdīgs.
Vai pastāv izmēra ierobežojums?
Nav fiksēta ierobežojuma. Eksports notiek jūsu pārlūkā, tāpēc praktiskais ierobežojums ir tas, ko jūsu pārlūks spēj atveidot — kas ir tālu pāri punktam, kurā diagramma cilvēkam vēl ir salasāma.
Kā saglabāt diagrammu rediģējamu pēc eksportēšanas?
Saglabājiet avotu. Lejupielādējiet .mmd failu vai Markdown bloku līdzās attēlam; PNG vai SVG nevar pārvērst atpakaļ mermaid formātā, taču avots ielīmējams tieši atpakaļ redaktorā.