mermaid.design — онлайн-редактор Mermaid-диаграмм. Пишите на простом текстовом синтаксисе mermaid и наблюдайте, как текст превращается в блок-схемы, диаграммы последовательности, ER-диаграммы, диаграммы Ганта и многое другое — с рендерингом в реальном времени.
Всё работает локально в вашем браузере: без аккаунта, без загрузки на сервер, без обращений к бэкенду. Код диаграмм остаётся на вашем устройстве, а каждый экспорт создаётся прямо там, где вы работаете.
Больше, чем инструмент «вставь и посмотри»: полная среда для проектирования, стилизации и экспорта диаграмм как кода.
Лёгкий редактор CodeMirror с подсветкой Mermaid, встроенными ошибками и синхронизацией выделения с холстом, а также живой предпросмотр с панорамированием и масштабированием.
Редактируйте подписи и элементы диаграммы прямо на холсте. Изменения синхронизируются с исходным кодом Mermaid, а выделение, отмена и повтор действий работают совместно в коде и предпросмотре.
Пишите Mermaid быстрее с контекстным автодополнением, готовыми сниппетами, поиском и заменой, форматированием одним нажатием и встроенной диагностикой синтаксиса.
Переключайтесь между официальным SVG-выводом mermaid и движком ASCII, рисующим диаграмму обычным текстом, — идеально для терминалов, комментариев в коде и документации.
Настраивайте все 73 переменные темы mermaid, начинайте с более чем 20 встроенных и дизайнерских пресетов или выводите целую палитру из одного базового цвета, а затем экспортируйте тему как JSON или frontmatter.
Настраивайте 438 параметров рендеринга Mermaid в 33 тематических группах — от макета и отступов до поведения отдельных типов диаграмм — без ручного редактирования JSON.
Начните с галереи шаблонов: блок-схемы, диаграммы последовательности, состояний, ER, Ганта и другие. Каждый шаблон предварительно рендерится с вашей текущей темой.
Скачивайте диаграмму в SVG, PNG, JPG или WebP с опциональным прозрачным фоном или копируйте ASCII-рендеринг прямо в README.
Без регистрации и без бэкенда: парсинг, рендеринг и экспорт выполняются на клиенте, поэтому чувствительные архитектурные диаграммы никогда не покидают ваше устройство.
Один и тот же код mermaid — рендеринг на ваш вкус. Переключайте движки в навбаре в любой момент.
Классический SVG-рендеринг mermaid, знакомый по документации, с полным контролем над каждой переменной темы и параметром рендеринга.
Открыть официальный редактор →Рендеринг диаграмм в виде ASCII-графики для терминалов, комментариев в коде и простых текстовых документов — с настраиваемым набором символов и размером шрифта.
Попробовать ASCII-режим →Опишите диаграмму обычным языком, и ИИ подготовит черновик кода mermaid. Этот режим уже в пути.
Узнать, что планируется →От блок-схем до архитектурных диаграмм C4: если mermaid это поддерживает, вы можете создать это здесь.
Начните с нуля, вставьте существующий код или выберите один из 31 шаблона в галерее.
Настройте переменные темы, примените пресет или переключитесь на движок Styled для теней и кастомных обводок — без единой строчки CSS.
Скачайте SVG, PNG, JPG или WebP для документов и слайдов или TXT для ASCII-рендеринга. Тема сохраняется как JSON или frontmatter.
Нет. mermaid.design работает полностью в браузере: откройте страницу и начните вводить синтаксис mermaid. Ничего устанавливать и нигде регистрироваться не нужно.
Нет. Парсинг, рендеринг и экспорт происходят локально в вашем браузере. Код диаграммы хранится в локальном хранилище вашего браузера и никогда не покидает устройство.
Все типы, поддерживаемые mermaid 12: блок-схемы, диаграммы последовательности, классов и состояний, ER-диаграммы, диаграммы Ганта, майнд-карты, таймлайны, диаграммы Санкея, C4 и другие.
SVG, PNG, JPG или WebP (с опциональным прозрачным фоном), ASCII-рендеринг — обычным текстом, а конфигурацию темы можно скопировать как JSON или frontmatter mermaid.
Да. Созданные и экспортированные вами диаграммы принадлежат вам: используйте их в документации, презентациях, статьях или продуктах, коммерческих или нет.
Без регистрации — редактор выше уже ждёт вас.