Mermaid-редактор: диаграммы прямо в Markdown

С Mermaid несколько строк текста превращаются в диаграмму. Markdown Preview Editor работает как Mermaid-редактор с живым предпросмотром: вы пишете код диаграммы в Markdown-документе, а предпросмотр рисует её по ходу набора. В отличие от отдельной программы для диаграмм, схема хранится вместе с окружающим текстом, так что проектный документ, README или план урока остаются одним файлом.

Что такое диаграмма Mermaid?

Диаграмма Mermaid — это схема, описанная обычным текстом. Не нужно перетаскивать блоки и стрелки: вы пишете строки вроде A --> B, а Mermaid сам раскладывает элементы. Поддерживаются блок-схемы, диаграммы последовательности, диаграммы Ганта, диаграммы состояний и классов, круговые диаграммы, интеллект-карты и другие.

Раз диаграмма — это текст, её легко менять, хранить в системе контроля версий и смотреть изменения в диффах. GitHub, GitLab, Obsidian и многие инструменты документации отображают Mermaid, так что один и тот же код работает везде.

Как нарисовать диаграмму

1. Откройте редактор. Перейдите в онлайн-редактор.
2. Добавьте блок Mermaid. Наберите три обратные кавычки и слово mermaid или вставьте шаблон кнопкой Диаграмма Mermaid в строке Расширенный редактор на панели инструментов.
3. Опишите диаграмму. Предпросмотр справа перерисовывает её по мере набора, поэтому пропущенную стрелку или скобку видно сразу.
4. Сохраните или поделитесь. Сохраните документ как .md, выгрузите в HTML или распечатайте в PDF — диаграммы войдут в результат.

Вот первая блок-схема:

markdown```mermaid
flowchart LR
  A[Идея] --> B{Стоит того?}
  B -- да --> C[Сделать]
  B -- нет --> D[Отложить]
```

Поменяйте подписи или добавьте ещё одну стрелку — схема перестроится сама.

Какие диаграммы можно рисовать

Полный синтаксис каждого типа с готовыми примерами — в нашем руководстве по диаграммам Mermaid в Markdown.

Чем он удобен

• Живой предпросмотр. Диаграмма обновляется по ходу набора, ошибки синтаксиса видны сразу.
• Текст и диаграммы вместе. Пояснения, формулы и блок-схема — в одном Markdown-файле.
• Конфиденциально. Диаграммы рисуются в браузере, код не отправляется на сервер.
• Бесплатно и с открытым кодом. Без аккаунта и без ограничений на количество диаграмм.

Ограничения

• Скачать отдельную диаграмму в PNG или SVG нельзя. Диаграммы экспортируются в составе документа — в HTML и в PDF. Если нужна отдельная картинка, её можно получить в официальных инструментах Mermaid.
• Возможности собственных тем и стилей для отдельных узлов ограничены: диаграммы оформлены в простом стиле, который подстраивается под светлую или тёмную тему.
• Диаграммы пишутся кодом; визуального редактирования перетаскиванием нет.

Хотите посмотреть готовый Markdown-файл с диаграммами? Откройте его в просмотрщике Markdown или вернитесь на главную страницу Markdown-редактора.