Редактор диаграмм Mermaid
Пишите синтаксис Mermaid слева и смотрите, как ваша блок-схема, последовательность или диаграмма Ганта отрисовывается вживую справа.
Всё, что нужно для создания диаграмм как кода
Мгновенный живой предпросмотр
Наблюдайте, как ваша диаграмма отрисовывается в момент ввода — без шага сборки, нажатий кнопок и ожидания.
Все типы диаграмм Mermaid
Блок-схемы, диаграммы последовательности, диаграммы классов, диаграммы состояний, диаграммы Ганта, ментальные карты и многое другое — полный синтаксис Mermaid 11.
Переключатель темы
Переключайтесь между темами default, neutral и dark, чтобы подобрать вид под вашу документацию, слайды или дашборды, не меняя ни строчки кода.
Экспорт в SVG и PNG
Скачивайте чёткий векторный SVG или PNG высокого разрешения или копируйте разметку SVG прямо в буфер обмена.
Конфиденциально, ничего не загружается
Весь рендеринг происходит локально в вашем браузере — ваша диаграмма никогда не покидает ваше устройство, без ограничений на размер и без аккаунта.
Понятные ошибки синтаксиса
Недопустимые диаграммы выявляются мгновенно и показываются с читаемой ошибкой, поэтому вы быстро исправляете синтаксис.
О редакторе диаграмм Mermaid
Редактор диаграмм Mermaid — это бесплатный инструмент в браузере для написания и предпросмотра диаграмм Mermaid. Вводите синтаксис Mermaid слева и видите, как отрисованная диаграмма обновляется вживую справа, с тремя встроенными темами — default, neutral и dark. Когда диаграмма выглядит правильно, копируйте код или SVG или скачивайте её как векторный SVG или PNG высокого разрешения. Поскольку всё работает локально с библиотекой Mermaid с открытым исходным кодом, нет ни загрузок, ни ограничений на размер, ни необходимости в аккаунте.
Как создать диаграмму Mermaid
Три шага от идеи до доступной для обмена диаграммы.
Напишите свою диаграмму как текст
Начните со встроенного примера или вводите синтаксис Mermaid напрямую — блок-схемы, диаграммы последовательности, диаграммы классов и многое другое.
Наблюдайте за живым рендерингом
Диаграмма обновляется автоматически по мере редактирования. Переключайте темы выпадающим списком, чтобы найти нужный вид.
Экспортируйте или делитесь
Копируйте код Mermaid или SVG или скачивайте диаграмму как файл SVG или PNG для документации, слайдов и файлов README.
Что следует знать
Диаграммы отрисовываются с помощью Mermaid 11 в строгом режиме безопасности, который санирует метки, так что никакой HTML или скрипты не выполняются — интерактивные обработчики кликов отключены в предпросмотре. Экспортируемые PNG отрисовываются в разрешении 2x для чёткой печати, и всё работает локально, поэтому ограничений на размер файла нет.