Редактор Mermaid

Ввод

Результат

Ожидание ввода

Строк: 6Символов: 108

Ожидание вводаМасштаб: 100%

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

Mermaid — это инструмент для создания диаграмм на основе JavaScript, который использует текстовый синтаксис, аналогичный Markdown, для генерации различных диаграмм. Нет необходимости вручную перетаскивать фигуры — достаточно написать простое текстовое описание, и автоматически будут сгенерированы блок-схемы, диаграммы последовательности, диаграммы классов и многое другое.Этот инструмент предоставляет онлайн-среду редактирования Mermaid с предварительным просмотром в реальном времени, масштабированием перетаскиванием и функциями экспорта, помогая разработчикам быстро создавать и делиться диаграммами. Mermaid лучше всего подходит для диаграмм, которые должны жить рядом с текстом или кодом: flows, sequence diagrams, Gantt и архитектурные схемы. Сильная сторона — versionability и быстрое редактирование, а не pixel-perfect иллюстрация. Для сложных схем нужно проверять читаемость, длину узлов, theme, направление layout и export format, потому что валидный Mermaid-код может дать перегруженную картинку.

Как использовать

Как пользоваться

Введите синтаксис Mermaid в редакторе слева
На правой панели диаграмма отображается в реальном времени
Используйте мышь для перетаскивания и колесо прокрутки для масштабирования
Нажмите кнопки экспорта, чтобы сохранить в PNG или SVG

Проверка диаграмм

Просматривайте результат после каждого значимого изменения; ошибки Mermaid часто вызваны отступами, неэкранированной пунктуацией или неподдерживаемым синтаксисом для выбранного типа диаграммы.
Перед экспортом убедитесь, что подписи, стрелки и переносы строк остаются читаемыми при том размере, в котором диаграмма будет использоваться.

Применение

Создание диаграмм из Mermaid-кодаРедактируйте Mermaid-синтаксис слева и наблюдайте отложенный рендеринг в реальном времени справа с помощью библиотеки Mermaid. Встроенные примеры охватывают блок-схемы, диаграммы последовательности, диаграммы классов, диаграммы состояний, ER-диаграммы, диаграммы Ганта, круговые диаграммы, карты мыслей и карты пути пользователя. Тот же исходный код можно вставить в README, вики или GitHub issue — хостинг отрисует диаграмму самостоятельно.

Просмотр крупных диаграмм с панорамой, масштабированием и полноэкранным режимомОбласть предпросмотра поддерживает перетаскивание мышью, масштабирование колесом от 10% до 500%, сброс двойным щелчком и полноэкранный режим, состояние которого запоминается в localStorage. Это упрощает изучение сложных архитектурных и процессных диаграмм по сравнению со статическим превью. Увеличение плотного участка перед скриншотом зачастую единственный способ сохранить читаемость подписей стрелок в насыщенных блок-схемах.

Экспорт диаграмм для документацииКогда диаграмма успешно отрендерена, экспортируйте её в SVG для редактируемого векторного использования или в PNG с белым фоном через canvas. Синтаксические ошибки отображаются в области предпросмотра, чтобы диаграмму можно было исправить перед вставкой в README, слайд или тикет. PNG подходит для презентаций и каналов, работающих только с изображениями, а SVG сохраняет ссылки и стили редактируемыми для передачи дизайнерам.

Настройка темы и направления диаграммы для скриншотовПереключите тему (default, dark, forest, neutral) и направление графа (TD/LR/BT/RL) перед скриншотом, чтобы одна и та же диаграмма хорошо читалась в светлых документах и тёмных дашбордах. Активные themeVariables также доступны для переопределения fontFamily, primaryColor и цвета рёбер при брендированном экспорте. Двойной щелчок сбрасывает масштаб после смены темы, чтобы новая цветовая палитра была захвачена чисто.

Переключение между блок-схемами, диаграммами последовательности, ER и диаграммами Ганта в синтаксисе v10Выберите подходящее семейство диаграмм для решаемой задачи: flowchart (graph TD) для ветвящихся решений, sequenceDiagram для временно упорядоченных вызовов, erDiagram для моделирования сущность-связь и gantt для проектных планов. Синтаксис Mermaid v10 (и более поздний v11) изменил некоторые значения по умолчанию — classDef теперь объявляется в начале, идентификаторы subgraph обязательны, а диаграмма Ганта использует форматы ISO-дат — поэтому существующие фрагменты из старых версий могут потребовать небольшой правки перед повторным рендерингом.

Технический принцип

Mermaid — это библиотека рендеринга диаграмм с открытым исходным кодом, основанная Кнутом Свейдквистом в 2014 году. Её главная идея — взять человекочитаемый DSL (доменно-ориентированный язык) и с помощью парсера превратить его в SVG-графику. Полный конвейер состоит из трёх этапов: лексер/парсер (сгенерированный jison) разбирает исходник во внутреннюю структуру данных; алгоритм компоновки, специфичный для типа диаграммы, вычисляет координаты узлов и рёбер; наконец, d3 отрисовывает компоновку как SVG-элементы. Разные диаграммы используют разные движки компоновки: flowchart по умолчанию использует dagre (многоуровневая компоновка ориентированного графа), а с v10 также поддерживает ELK (более мощный, но тяжелее); sequenceDiagram применяет собственную тайминговую компоновку, располагая участников горизонтально и укладывая сообщения вертикально; gantt вручную размещает задачи на оси времени с зависимостями; classDiagram и stateDiagram также опираются на dagre. Именно алгоритм компоновки определяет читаемость — dagre следует фреймворку Сугиямы для назначения рангов, минимизации пересечений рёбер и уплотнения расстояний, что хорошо работает для диаграмм общего размера. В сравнении с Graphviz синтаксис Mermaid ближе к естественному языку (например, A --> B) и рендерится нативно в браузере с живым предпросмотром. Язык DOT от Graphviz более низкоуровневый, а его движки компоновки (fdp, neato, ...) более зрелые, но требуют локальной установки, а стиль по умолчанию выглядит устаревшим. В настоящее время Mermaid поддерживает более 15 типов диаграмм — flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block и другие — покрывая подавляющее большинство потребностей в черчении для программной инженерии.

Парсинг: сгенерированный jison парсер превращает текст DSL во внутреннее AST; каждый тип диаграммы имеет свой файл грамматики.
Алгоритм компоновки: flowchart использует dagre для многоуровневой компоновки ориентированного графа и может переключиться на ELK; sequence- и gantt-диаграммы используют собственную выделенную логику компоновки.
Движок рендеринга: SVG отрисовывается с помощью d3; узлы используют элементы g/rect/path/text, стрелки определяются маркерами.
Типы диаграмм: поддерживаются flowchart, sequence, class, state, ER, gantt, pie, journey, gitGraph, mindmap и ещё дюжина других.
Сравнение с Graphviz: Mermaid имеет более дружественный синтаксис и нативную веб-поддержку; Graphviz обеспечивает более тонкую компоновку, подходящую для больших и сложных графов.
Тематизация: переключение между темами default, dark, forest, neutral и другими встроенными через конфигурацию themeVariables или директиву init.

Примеры

Блок-схема

flowchart TD
    A[Начало] --> B{Вход выполнен?}
    B -- Да --> C[Главная страница]
    B -- Нет --> D[Страница входа]
    D --> E[Ввод учётных данных]
    E --> C
    C --> F[Конец]

Диаграмма последовательности

sequenceDiagram
    participant Browser
    participant Server
    participant Database
    Browser->>Server: GET /api/user
    Server->>Database: SELECT * FROM users
    Database-->>Server: User data
    Server-->>Browser: JSON response

Диаграмма Ганта

gantt
    title План проекта
    dateFormat YYYY-MM-DD
    section Дизайн
    Требования  :a1, 2026-06-01, 7d
    UI-дизайн   :a2, after a1, 10d
    section Разработка
    Frontend  :b1, after a2, 20d
    Backend   :b2, after a2, 18d
    section Тестирование
    Интеграция :c1, after b1, 7d

Часто задаваемые вопросы

Какие типы диаграмм поддерживает Mermaid?

Mermaid охватывает блок-схемы, диаграммы последовательностей, диаграммы классов, диаграммы состояний, диаграммы «сущность-связь», диаграммы Ганта, круговые диаграммы, карты пути пользователя, графы Git, mind-карты и квадрантные диаграммы. Тип объявляется первой строкой кода (например, 'flowchart TD' или 'sequenceDiagram').

Почему моя диаграмма показывает синтаксическую ошибку?

Самые частые причины: пропущенные точки с запятой или операторы стрелок, несбалансированные скобки в подписях узлов (берите текст со спецсимволами в кавычки: A["Hello (world)"]), неподходящий синтаксис стрелок для типа диаграммы (--> для flowchart, ->> для sequence) и проблемы с отступами в подграфах. Панель ошибок обычно указывает на строку, где парсинг прервался.

Как экспортировать диаграмму как изображение?

Используйте кнопки экспорта, чтобы сохранить как SVG (векторный, масштабируемый, рекомендуется для слайдов и документации) или PNG (растровый, удобен для чатов и почты). Скопируйте SVG-разметку, если хотите встроить её прямо в HTML или дальше редактировать в Figma или Illustrator.

Можно ли настроить цвета и стили?

Да. Используйте 'classDef', чтобы определить стиль в духе CSS, и применяйте его через 'class A,B,C myStyle'. Для разовых правок подходят инлайновые переопределения вроде 'style A fill:#f9f,stroke:#333'. Для глобальной темы укажите %%{init: {'theme':'forest'}}%% в первой строке — встроенные темы: default, forest, dark, neutral и base.

Есть ли ограничения по длине или сложности?

Mermaid спокойно отрисовывает сотни узлов, но время компоновки растёт нелинейно. Если диаграмма медленная или нечитаемая, разбейте её на несколько связанных или сгруппируйте узлы подграфами; при большом числе пересечений рёбер автокомпоновка выбирает заметно худшие позиции.

Как добавить гиперссылки или обработчики кликов на узлы?

Используйте 'click NodeId "https://example.com"', чтобы сделать узел ссылкой, или 'click NodeId callback "tooltip"', чтобы вызывать JavaScript-обработчик, зарегистрированный через mermaid.parseError. Ссылки работают в экспортированном SVG, если встраивающая страница их не вырезает.

Где ещё можно отрендерить тот же код Mermaid?

GitHub Markdown, GitLab, Notion, Obsidian, Typora, VS Code (с расширениями) и большинство современных систем документации рендерят блоки кода Mermaid нативно. Вставьте тот же код туда, и он отрендерится в выбранной платформой теме.