Блок-схема
Изобразите процессы и решения с помощью узлов, стрелок и фигур Mermaid: скруглённых блоков, ромбов и других.
Mermaid Viewer онлайн
Вставьте код Mermaid слева — справа диаграмма отрисуется мгновенно. Анализ и исправление синтаксиса Mermaid в один клик, оптимизация кода и экспорт результата в PNG, SVG или PDF — бесплатно, приватно, без регистрации.
- Полностью бесплатно
- Без регистрации
- Всё работает в браузере
- Более 12 типов диаграмм
Живой редактор Mermaid и просмотрщик диаграмм
Этот просмотрщик Mermaid обновляет предпросмотр, как только вы прекращаете печатать, поэтому нарисовать простую Mermaid-диаграмму так же легко, как написать текст. Если что-то сломалось, встроенный исправитель Mermaid найдёт проблему и починит самые частые ошибки синтаксиса — «умные» кавычки, невидимые символы Юникода, полноширинные знаки препинания и другие ловушки.
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
Типы диаграмм Mermaid, которые можно отрисовать
От блок-схем до таймлайнов — каждый тип диаграмм Mermaid работает сразу, без установки чего-либо. Каждый предпросмотр ниже рисуется тем же движком, что и в просмотрщике; загрузите любой шаблон и продолжайте редактировать.
Диаграмма последовательности
Покажите обмен сообщениями между участниками во времени — с циклами, альтернативами и активациями.
ER-диаграмма
Смоделируйте сущности, атрибуты и связи базы данных в нотации «воронья лапка».
Диаграмма классов
Опишите классы, интерфейсы, поля и наследование для проектирования ПО.
Диаграмма состояний
Проследите состояния системы и переходы между ними.
Диаграмма Ганта
Планируйте проекты: задачи, вехи, зависимости и даты.
Круговая диаграмма
Превратите несколько чисел в наглядную круговую диаграмму долей.
Путь пользователя
Изобразите путь пользователя по задачам с оценками удовлетворённости.
Таймлайн
Запишите события на вертикальной шкале времени — идеально для истории и планов.
Интеллект-карта
Мозговой штурм в виде ветвящейся карты: текст на входе — иерархия на выходе.
Git-граф
Визуализируйте ветки, коммиты и слияния Git-репозитория.
Квадрант-чарт
Разложите элементы по двум осям на четыре квадранта: приоритет против трудозатрат и т. п.
Основы синтаксиса Mermaid
Синтаксис Mermaid — это простой текст: одно выражение на строку, узлы соединяются стрелками. Этих фигур Mermaid хватает для большинства диаграмм — щёлкните по примеру, чтобы открыть его в просмотрщике и отредактировать.
| Синтаксис | Рисует |
|---|---|
A[Текст] | Прямоугольник (процесс) |
A(Текст) | Скруглённый блок |
A{Текст} | Ромб (решение) |
A([Текст]) | Стадион |
A[(Текст)] | Цилиндр (БД) |
A((Текст)) | Круг |
A-->B | Стрелка (связь) |
A-->|текст|B | Стрелка с подписью |
A---B | Линия без стрелки |
subgraph Заголовок … end | Группа узлов |
Мини-шаблоны
Конвертировать диаграмму Mermaid в картинку онлайн
Хотите узнать, как конвертировать диаграмму Mermaid в изображение онлайн? Три шага: вставьте код, дождитесь отрисовки предпросмотра и нажмите PNG, SVG или PDF на панели инструментов. Всё происходит в вашем браузере — файлы никуда не загружаются.
Mermaid в PNG
Экспорт с масштабом до 4× — чёткие диаграммы для презентаций, документов и чатов.
Mermaid в SVG
Настоящий векторный файл: бесконечное масштабирование, редактирование в Figma или Illustrator, идеально для печати.
Mermaid в PDF
Один клик — и готова PDF-страница по размеру диаграммы: удобно для отчётов и архива.
Частые вопросы
Что такое Mermaid Viewer?
Mermaid Viewer берёт код диаграммы, написанный на синтаксисе Mermaid, и отрисовывает его как настоящую диаграмму. Этот сайт совмещает просмотрщик, редактор и исправитель на одной странице: живой рендер по мере ввода, поиск проблем синтаксиса, автоматическое исправление и экспорт в PNG, SVG или PDF.
Как исправить неверный синтаксис Mermaid?
Вставьте код и нажмите «Исправить». Исправитель Mermaid чинит «умные» кавычки и невидимые символы Юникода, полноширинные знаки препинания, непарные скобки, зарезервированные слова вроде «end», пропущенные «end» у subgraph и циклов, случайно вставленные ограждения Markdown и многое другое. Каждое изменение объясняется в списке диагностики.
Как конвертировать Mermaid в PNG, SVG или PDF?
Отрисуйте диаграмму в просмотрщике выше и нажмите PNG, SVG или PDF на панели предпросмотра. PNG скачается как высокое разрешение-растровое изображение, SVG — как вектор, PDF — как готовый к печати документ. Бесплатно, без ограничений, целиком в браузере.
PlantUML или Mermaid — что выбрать?
Mermaid рендерится прямо в браузере, поэтому GitHub, GitLab и большинство Markdown-вики поддерживают его нативно — это лёгкий выбор для документации. PlantUML покрывает больше спецификации UML 2, но требует Java или сервера для рендеринга. Для диаграмм «текстом прежде всего» в документации и вебе Mermaid обычно проще.
Что означает «Mermaid» — откуда название?
Инструмент назван в честь мифической русалки: идея в том, что простой текст, как песня русалки, «выпевает» прекрасную диаграмму. В мире диаграмм Mermaid означает «диаграмма как код»: вы описываете узлы и стрелки текстом, а библиотека рисует схему за вас.
Какие бывают типы диаграмм Mermaid?
Самые популярные: блок-схемы, диаграммы последовательности, ER-диаграммы, диаграммы классов и состояний, диаграммы Ганта, круговые диаграммы, путь пользователя, таймлайны и интеллект-карты — полная галерея выше. Каждый тип начинается строкой-ключевым словом вроде «flowchart TD» или «sequenceDiagram», а дальше — по одному выражению на строку.
Мой код диаграммы куда-то отправляется?
Нет. Рендеринг, исправление, оптимизация и экспорт выполняются локально в вашем браузере. Ничего не отправляется и не сохраняется на сервере — после загрузки страницы просмотрщик работает даже офлайн.