Экспорт диаграммы mermaid в PNG, SVG или Markdown
Диаграмма полезна только там, где её видно. Mermaid даёт четыре пути наружу — картинку, вектор, исходник или самоотрисовывающийся блок Markdown, — и правильный выбор целиком зависит от того, куда диаграмма идёт. Это короткая версия, плюс то, что ломается в каждом случае.
Сначала выберите формат
| Куда | Что использовать | Почему |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Блок Markdown | Рендерится нативно и остаётся diffable — не нужно держать файл в синхроне. |
| Слайды, спецификация, сообщение в чате | PNG | Вставляется куда угодно, не требует рендерера, везде выглядит одинаково. |
| Сайт, печатный документ | SVG | Вектор — чёткий в любом размере, текст остаётся выделяемым. |
| Другой редактор, репозиторий | Исходник .mmd | Редактируется позже. Картинка — тупик. |
Если место назначения рендерит mermaid, экспорт вообще не нужен. Диаграмму, закоммиченную как текст, можно ревьюить построчно; ту же диаграмму, закоммиченную как PNG, можно только заменить целиком.
Экспорт из этого редактора
Откройте вкладку кода — кнопки экспорта в панели инструментов, и каждая действует на то, что отрисовано прямо сейчас.
- Copy SVG — кладёт разметку
<svg>в буфер обмена, готовую вставить прямо в HTML-файл или дизайнерский инструмент. - Download SVG — сохраняет
diagram.svg. - Download PNG — сохраняет
diagram.png, отрисованный в 2x с белым фоном, чтобы он оставался чётким на экране с высокой плотностью и никогда не превращался в прозрачное пятно на белом слайде. - Download .mmd — сохраняет исходник mermaid как обычный текстовый файл.
- Download .md (Notion) — сохраняет исходник, обёрнутый в блок ```mermaid, который Notion, GitHub и Obsidian рендерят при вставке.
Для слайдов берите PNG. Для всего, что будут менять в размере — заголовок в документе, постер, печать — берите SVG; PNG, увеличенный сверх размера экспорта, сразу становится мыльным.
Оставьте это текстом вместо картинки
Блок в тройных кавычках — единственный экспорт, который остаётся редактируемым на месте. Три обратных кавычки, слово mermaid, ваша диаграмма, три обратных кавычки:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — рендерится в README, issues, pull request'ах и комментариях.
- GitLab — рендерится в вики, issues и 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?
Отрисуйте диаграмму, затем используйте Download PNG. Редактор рисует отрисованный SVG на canvas в масштабе 2x с белым фоном и сохраняет результат — без обращения к серверу, диаграмма никогда не покидает браузер.
Можно ли экспортировать прозрачный PNG?
Не через кнопку PNG — она заливает белым намеренно, потому что тёмный текст диаграммы на прозрачном фоне нечитаем почти везде, куда PNG обычно вставляют. Экспортируйте вместо этого SVG — он прозрачный.
Есть ли ограничение по размеру?
Фиксированного нет. Экспорт происходит в браузере, так что практический предел — то, что ваш браузер способен отрисовать, а это далеко за той точкой, где диаграмма ещё читаема человеком.
Как сохранить диаграмму редактируемой после экспорта?
Сохраните исходник. Скачайте файл .mmd или блок Markdown вместе с картинкой; PNG или SVG нельзя превратить обратно в mermaid, а исходник вставляется прямо обратно в редактор.