Mermaid в Markdown — диаграммы и экспорт в Word, PDF, HTML, PNG

Mermaid описывает диаграммы текстом — flowchart, sequence, class и другие типы. На md-to.ru блок ```mermaid рендерится в предпросмотре; при экспорте поведение зависит от формата: SVG в HTML, печать в PDF, PNG в Word и PNG-снимке.

Базовый пример

# Архитектура сервиса

Текст до диаграммы.

```mermaid
flowchart TB
  User[Пользователь] --> Web[Веб-приложение]
  Web --> API[REST API]
  API --> DB[(База данных)]
  API --> Cache[[Redis]]
```

После диаграммы — обычный абзац.

В preview: схема с блоками и стрелками сверху вниз (TB = top-bottom).

Дождитесь сообщения о построении диаграммы в статусной строке экспорта — иначе в DOCX может попасть placeholder.

Sequence diagram

```mermaid
sequenceDiagram
  participant C as Клиент
  participant S as Сервер
  C->>S: GET /health
  S-->>C: 200 OK
```

Удобно для API-документации рядом с таблицами параметров.

Как экспортировать Mermaid

Формат	Что получает Mermaid	Инструмент
DOCX	PNG внутри документа	MD → Word
PDF	SVG в печатном HTML	MD → PDF
HTML	Inline SVG, без CDN	MD → HTML
PNG	Снимок всего preview	MD → Image

Черновик удобно править в редакторе с live preview.

Word (DOCX)

Диаграмма растеризуется в PNG и вставляется в DOCX. В Word её нельзя редактировать как native SmartArt — только масштабировать как картинку. Для редактируемых схем позже правьте исходный .md и конвертируйте снова.

PDF

Mermaid остаётся векторным SVG в iframe печати. Качество обычно хорошее; включите «Фоновая графика» в диалоге печати, если элементы бледные. См. гайд MD → PDF.

HTML

Экспортированный файл содержит inline SVG и встроенные стили Mermaid — отдельный CDN при offline-открытии не нужен.

PNG

Конвертер в изображение захватывает весь блок preview. Для одной диаграммы без текста можно оставить в MD только блок mermaid — но учитывайте лимиты canvas на длинных страницах.

Советы по синтаксису

Имена узлов с пробелами — в [квадратных скобках] или (скобках).
Спецсимволы в подписях иногда требуют кавычек — при ошибке парсера Mermaid покажет предупреждение в preview.
Слишком большие схемы плохо читаются в DOCX после rasterize — разбейте на две диаграммы.

Ограничения

Не все типы Mermaid одинаково хорошо смотрятся после PNG в Word.
Интерактивность (клики, zoom) ни в одном статическом экспорте не сохраняется.
Ошибка в синтаксисе — текст ошибки в preview вместо схемы; исправьте до экспорта.
Очень сложные diagram + длинный текст могут замедлить браузер.

Связанные материалы

Markdown в Word без Pandoc — полный pipeline документа с Mermaid.
Таблицы Markdown — часто идут в одном документе с диаграммами.

Итог

Mermaid в Markdown — блок ```mermaid с текстовым описанием схемы. Preview на md-to.ru строит диаграмму локально; экспорт выбирайте по задаче: Word для редактируемого документа (диаграмма как PNG), PDF/HTML для печати и веба, PNG для вставки в мессенджер или слайды.

Mermaid в Markdown: как создать диаграмму и экспортировать её