Износ на mermaid диаграма към PNG, SVG или Markdown
Диаграмата е полезна само там, където може да бъде видяна. Mermaid дава четири изхода — картина, вектор, изходен код или Markdown блок, който сам се изобразява — а правилният зависи изцяло от това къде отива диаграмата. Това е кратката версия, плюс какво се чупи при всеки един.
Избери формата първо
| Дестинация | Използвай | Защо |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Markdown блок | Изобразява се нативно и остава сравним версия срещу версия — няма файл за поддържане в синхрон. |
| Презентации, спецификация, съобщение в чат | PNG | Постава се навсякъде, не изисква рендерер, изглежда еднакво навсякъде. |
| Уебсайт, отпечатан документ | SVG | Вектор — рязък при всякакъв размер, а текстът остава избираем. |
| Друг редактор, хранилище | .mmd изходен код | Редактируем по-късно. Картината е задънена улица. |
Ако дестинацията изобразява mermaid, не изнасяй изобщо. Диаграма, качена като текст, може да бъде прегледана ред по ред; същата диаграма, качена като PNG, може само да бъде заменена.
Износ от този редактор
Отвори раздела за код — бутоните за износ са в лентата с инструменти, а всеки действа върху това, което в момента е изобразено.
- Копирай SVG — поставя
<svg>markup в клипборда, готов за поставяне направо в 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 файлове, issues, pull requests и коментари.
- GitLab — изобразява се в уикито, issues и merge requests.
- 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 върху canvas в 2x мащаб с бял фон и запазва резултата — без връзка със сървър, така че диаграмата никога не напуска браузъра ти.
Мога ли да изнеса прозрачен PNG?
Не чрез бутона за PNG — той запълва с бяло нарочно, защото тъмен текст на диаграма върху прозрачен фон е нечетлив в повечето места, където PNG се поставя. Изнеси SVG вместо това; той е прозрачен.
Има ли ограничение за размера?
Няма фиксирано. Износът се случва в браузъра ти, така че практическото ограничение е това, което браузърът ти ще изобрази — а то е далеч отвъд точката, в която диаграмата вече е четима за човек.
Как да запазя диаграмата редактируема след износ?
Запази изходния код. Изтегли .mmd файла или Markdown блока заедно с изображението; PNG или SVG не могат да бъдат превърнати обратно в mermaid, но изходният код се поставя направо обратно в редактора.