Редактор диаграмм Mermaid
Пишите Mermaid с одной стороны, а диаграмма рисуется с другой прямо по ходу набора. Ошибка отмечается на своей строке, а последняя рабочая версия остаётся на экране. Всё работает в этой вкладке браузера.
Как это работает
Mermaid — это способ записать диаграмму текстом. Несколько строк вроде «A --> B» превращаются в блок-схему, диаграмму последовательности, диаграмму классов или базы данных, диаграмму Ганта или интеллект-карту. GitHub, GitLab, Notion и большинство инструментов для документации рисуют её прямо на месте, поэтому диаграммы в README и документации так часто сделаны на Mermaid. Чего они не дают, так это удобного места, где её писать.
Этот редактор рисует диаграмму по мере набора. Если строка написана с ошибкой, она подчёркивается, а сообщение говорит, чего ожидал Mermaid. При этом последняя рабочая версия остаётся на экране, слегка приглушённая, чтобы картинка не пропадала каждый раз, когда вы на середине стрелки. Большие диаграммы можно перетаскивать и масштабировать.
Когда всё выглядит как надо, сохраните диаграмму как SVG или как PNG под то место, куда она пойдёт: документ, слайд или печатную страницу. Её также можно сразу скопировать в буфер обмена. Черновик хранится в этом браузере между посещениями, а ссылка для отправки несёт диаграмму внутри себя, поэтому на сервере о ней ничего не хранится.
Как пользоваться
- 1 Напишите или вставьте Mermaid, откройте файл .mmd или Markdown либо начните с примера.
- 2 Следите за просмотром. Если строка подчёркнута, исправьте её; сообщение подскажет, чего ожидал Mermaid.
- 3 Выберите оформление и перетащите или увеличьте просмотр, чтобы проверить детали.
- 4 Скачайте SVG или PNG, скопируйте изображение или скопируйте ссылку, чтобы поделиться диаграммой.
Полезно знать
- При открытии файла Markdown открывается его первый блок ```mermaid, так что диаграмму из README можно редактировать отдельно.
- Выбор примера заменяет то, что было в редакторе, а Ctrl+Z возвращает вашу диаграмму.
- SVG остаётся чётким при любом размере, и именно его стоит использовать в вебе. PNG надёжнее всего принимают слайды, мессенджеры и текстовые редакторы.
- Тема, заданная внутри диаграммы строкой %%{init}%%, важнее настройки «Оформление».
- Ничего не загружается на сервер. Диаграмма рисуется в этой вкладке, а ссылки для отправки хранят её в той части адреса, которую браузер никогда не отправляет на сервер.
Поддержка браузеров
- Chrome 94 и новее
- Firefox 93 и новее · полная скорость с 113
- Safari 16.4 и новее
- Edge 94 и новее
Это самые старые версии, где есть всё, чем пользуется инструмент. Они вычисляются из самого инструмента, поэтому меняются вместе с ним.
Номера версий проверены 2026-09-04.
Частые вопросы
Моя диаграмма куда-нибудь загружается?
Нет. Mermaid работает внутри этой вкладки браузера, а черновик сохраняется только в этом браузере. Это можно проверить в инструментах разработчика браузера, на вкладке «Сеть»: при наборе ничего не отправляется.
Как ссылки работают без сервера?
Диаграмма сжимается и записывается в ту часть ссылки, что идёт после #. Браузеры никогда не отправляют эту часть сайту, поэтому ссылка открывает диаграмму на любом устройстве, а сам сайт её не получает. Длинная диаграмма даёт длинную ссылку.
Какие типы диаграмм поддерживаются?
Всё, что рисует Mermaid 12: блок-схемы, диаграммы последовательности, классов, состояний и «сущность-связь», диаграммы Ганта, круговые диаграммы, интеллект-карты, временные шкалы, пути пользователя, графы Git, квадрантные диаграммы, диаграммы Санкей и XY, а также более новые блочные, пакетные, архитектурные, канбан-, радарные и treemap-диаграммы.
Почему строка подчёркнута?
Именно здесь Mermaid перестал понимать диаграмму. Сообщение рядом написано самим Mermaid и называет то, что он ожидал найти. Часто настоящая ошибка стоит чуть раньше, например незакрытая скобка или кавычка.
Какого размера будет PNG?
Это зависит от назначения. Для документа вдвое больше размера, в котором нарисована диаграмма, так она остаётся чёткой на экранах с высокой плотностью пикселей. Для слайдов настолько большой, насколько помещается на экране 4K. Для печати настолько большой, насколько помещается на A4 при 300 dpi. Кнопка показывает точный размер в пикселях до скачивания.
Можно ли отредактировать диаграмму из моего README?
Да. Откройте файл Markdown, и первый блок Mermaid из него откроется в редакторе. Когда закончите, скопируйте текст обратно в файл.
Безопасно ли открывать диаграмму, которую мне прислал кто-то другой?
Диаграммы рисуются в строгом режиме Mermaid. Всё, что может выполнить код, удаляется, а строка внутри диаграммы не может отключить этот режим.
Похожие инструменты
Ваши файлы обрабатываются на вашем устройстве и не загружаются на сервер — это можно проверить в инструментах разработчика браузера, на вкладке «Сеть».