Експортуйте діаграму mermaid у PNG, SVG або Markdown
Діаграма корисна лише там, де її можна побачити. Mermaid дає чотири способи вийти — картинку, вектор, вихідний код або блок Markdown, що відображається сам — і правильний вибір повністю залежить від того, куди йде діаграма. Це коротка версія, плюс те, що ламається в кожному варіанті.
Спершу оберіть формат
| Куди | Що використати | Чому |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Блок Markdown | Відображається нативно і залишається придатним для діфу — немає файлу, який треба синхронізувати. |
| Слайди, специфікація, повідомлення в чаті | 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, 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 на полотні в масштабі 2x із білим фоном і зберігає результат — без звернення до сервера, тож діаграма ніколи не покидає ваш браузер.
Чи можу я експортувати прозорий PNG?
Не через кнопку PNG — вона навмисно заповнює фон білим, бо темний текст діаграми на прозорому фоні нечитабельний у більшості місць, куди вставляють PNG. Натомість експортуйте SVG — він прозорий.
Чи є обмеження розміру?
Фіксованого немає. Експорт відбувається у вашому браузері, тож практичне обмеження — це те, що ваш браузер здатен відрендерити, а це набагато більше, ніж межа, за якою діаграма ще читабельна для людини.
Як зберегти діаграму редагованою після експорту?
Зберігайте вихідний код. Завантажте файл .mmd або блок Markdown разом із зображенням; PNG чи SVG не можна перетворити назад на mermaid, а вихідний код вставляється прямо назад у редактор.