Извоз mermaid дијаграма у PNG, SVG или Markdown
Дијаграм је користан само тамо где се може видети. Mermaid нуди четири начина изласка — слику, вектор, изворни код или Markdown блок који се сам рендерује — а прави избор потпуно зависи од тога где дијаграм иде. Ово је кратка верзија, плус шта пође наопако код сваког.
Прво изаберите формат
| Одредиште | Употреба | Зашто |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Markdown блок | Рендерује се нативно и остаје diffabilan — нема фајл који треба ручно синхронизовати. |
| Презентације, спецификација, порука у ћаскању | PNG | Лепи се било где, не тражи рендерер, свуда изгледа исто. |
| Веб-сајт, штампани документ | SVG | Вектор — оштар на било којој величини, а текст остаје селектован. |
| Други едитор, репозиторијум | изворни код .mmd | Може се даље уређивати. Слика је ћорсокак. |
Ако одредиште рендерује mermaid, немојте уопште извозити. Дијаграм комитован као текст може се прегледати линију по линију; исти дијаграм комитован као PNG може се само заменити.
Извоз из овог едитора
Отворите картицу кода — дугмад за извоз су у траци алата, и свако делује на оно што је тренутно приказано.
- Копирај SVG — ставља
<svg>код у клипборд, спреман да се налепи директно у HTML фајл или алат за дизајн. - Преузми SVG — чува
diagram.svg. - Преузми PNG — чува
diagram.png, рендерован у 2x резолуцији са белом позадином, да остане оштар на екрану велике густине и никад не заврши као провидна мрља на белом слајду. - Преузми .mmd — чува mermaid изворни код као обичан текстуални фајл.
- Преузми .md (Notion) — чува изворни код умотан у блок ограђен са ```mermaid, који Notion, GitHub и Obsidian рендерују при лепљењу.
За презентацију узмите PNG. За све што ће се мењати величина — наслов документа, постер, штампу — узмите SVG; PNG увећан преко величине извоза одмах постаје мутан.
Задржите га као текст уместо тога
Ограђени блок је једини извоз који остаје уредив на лицу места. Три обрнуте кврге, реч mermaid, ваш дијаграм, три обрнуте кврге:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — рендерује се у README фајловима, issue-има, pull request-овима и коментарима.
- GitLab — рендерује се у wiki-ју, issue-има и merge request-овима.
- Notion — налепите у блок кода и поставите језик на Mermaid.
- Obsidian — рендерује се у прегледу и у објављеним белешкама.
- Docusaurus / MkDocs Material / VitePress — mermaid блокови се рендерују у изграђеној документацији.
Шта може да пође наопако
PNG је замућен
PNG је фиксне резолуције: извози се у одређеној величини у пикселима, а увећање преко тога интерполира. Овај едитор из тог разлога извози у 2x. Ако то и даље није довољно, извезите SVG и конвертујте га у величину коју желите — или једноставно користите SVG.
SVG нема позадину
SVG извоз је намерно провидан, па тамни текст чвора нестаје на тамном слајду. Или ставите SVG на светлу подлогу, или узмите PNG, који се извози на белој позадини.
Фонтови изгледају другачије негде другде
SVG упућује на породице фонтова уместо да их угради, па машина без тог фонта користи замену и кутије ознака престају да се поклапају. Користите PNG кад не можете контролисати фонтове код гледаоца.
Дијаграм је одсечен
Извоз чита оно што је тренутно приказано, па поново центрирајте приказ пре извоза великог дијаграма. Ако је ознака чвора огромна, преломите је помоћу <br> — mermaid сам не прелама ознаке.
Извезите у два клика
Отворите едитор, налепите или нацртајте дијаграм, и узмите SVG, PNG или изворни код. Ништа није иза налога.
Честа питања
Како да конвертујем mermaid у PNG?
Рендерујте дијаграм, па употребите Преузми PNG. Едитор исцртава рендерован SVG на платно у 2x размери са белом позадином и чува резултат — без одласка на сервер, па дијаграм никад не напушта ваш прегледач.
Могу ли да извезем провидан PNG?
Не преко дугмета за PNG — оно намерно попуњава белу позадину, јер тамни текст дијаграма на провидној позадини није читљив на већини места где се PNG лепи. Извезите SVG уместо тога; он је провидан.
Постоји ли ограничење величине?
Нема фиксног. Извоз се дешава у вашем прегледачу, па је практично ограничење оно што ваш прегледач може да рендерује — што је далеко изнад тачке где је дијаграм још увек читљив човеку.
Како да дијаграм остане уредив после извоза?
Задржите изворни код. Преузмите .mmd фајл или Markdown блок уз слику; PNG или SVG се не могу претворити назад у mermaid, али изворни код се лепи директно назад у едитор.