Mermaid Design

Начало работы

mermaid.design — бесплатный онлайн-редактор диаграмм Mermaid. Пишите синтаксис Mermaid слева и наблюдайте, как диаграмма рендерится в реальном времени справа. Всё работает полностью в вашем браузере — ваши диаграммы никогда не покидают устройство.

Ваша первая диаграмма

  1. Откройте mermaid.design — редактор загрузится с примером блок-схемы.
  2. Отредактируйте код Mermaid в левой панели, например:
flowchart TD
    A[Начало] --> B{Готово?}
    B -- Да --> C[Релиз]
    B -- Нет --> D[Продолжаем кодить]
  1. Превью автоматически перерендеривается по мере ввода (с небольшим дебаунсом). Если синтаксис неверен, последняя корректная диаграмма остаётся видимой за полосой ошибки, а редактор кода помечает строку с ошибкой.

Рабочее пространство

Редактор представляет собой рабочее пространство из трёх панелей:

  • Редактор кода (слева) — редактор Monaco (тот же движок, что и в VS Code) с подсветкой синтаксиса Mermaid, встроенными маркерами ошибок и панелью инструментов «форматировать/копировать/очистить». Его можно свернуть в узкую полосу иконок или изменить ширину, перетащив разделитель.
  • Просмотр (в центре) — диаграмма, отрендеренная в реальном времени. Перетаскивайте для панорамирования, Ctrl/⌘ + прокрутка для масштабирования, двойной щелчок — подогнать по размеру. Плавающая панель инструментов предлагает элементы управления масштабом и переключатель фона холста (точки / белый / шахматка).
  • Панель темы (справа) — пресеты в один клик, детальные переменные темы и генерация темы по начальному цвету. См. ниже.

На узких экранах рабочее пространство превращается в одну панель с нижней панелью вкладок Код / Просмотр / Тема.

Режимы рендеринга

Используйте сегментный переключатель в навигационной панели, чтобы изменить способ рендеринга диаграммы:

  • Официальный — стандартный вывод Mermaid в SVG, в точности так, как его рендерит движок Mermaid.
  • ASCII — ваша диаграмма, преобразованная в текстовую графику, которую можно вставить в комментарии к коду, документацию или терминал. См. ASCII-рендеринг.

Режим является частью URL, поэтому вы можете добавить в закладки или поделиться ссылкой на конкретный режим.

Темы

Каждая диаграмма рендерится с темой base плюс набор из более чем 70 редактируемых переменных темы:

  • Пресеты — 11 встроенных тем Mermaid (Default, Neutral, Forest, Dark, Base и другие) плюс дизайнерские пресеты, каждый с мини-превью.
  • Переменные темы — точная настройка отдельных цветов, границ и шрифтов по группам, с поиском.
  • Генерация — создайте полную тему из одного начального цвета, светлую или тёмную.

Ваша работа сохраняется автоматически

Редактор сохраняет ваш код, тему и раскладку в локальном хранилище браузера. Закройте вкладку и вернитесь позже — ваша диаграмма на месте. Ничего не загружается на сервер.

Дальнейшие шаги