Редактор диаграмм Mermaid

Редактируйте локально и просматривайте диаграммы Mermaid, включая блок-схемы и диаграммы последовательностей, в строго безопасном режиме; можно скачать SVG или PNG.

Локальная обработка в браузере
Эта страница прошла проверку открытого каталога; после включения JavaScript можно использовать все функции.
Руководство по использованию

Как пользоваться редактором диаграмм Mermaid

Исходный код диаграммы анализируется и отображается только в текущем браузере и не загружается на сервер; средство визуализации использует строгий безопасный режим.

  1. Введите исходный код диаграммы

    Вставьте код Mermaid размером не более 128 KiB и выберите стандартную, нейтральную, лесную или тёмную тему.

  2. Визуализировать и исправить

    Нажмите «Визуализировать», чтобы просмотреть изолированный предварительный просмотр; при синтаксической ошибке будет показано её расположение или сведения о разборе, чтобы вы могли вернуться к исходному коду и исправить её.

  3. Скачать диаграмму

    Проверьте подписи и соединительные линии, затем экспортируйте безопасно очищенный SVG или PNG.

Ограничения и примечания

  • Поддерживается только фиксированная версия синтаксиса Mermaid, используемая на сайте; экспериментальные функции, устаревший синтаксис и сторонние расширения могут быть несовместимы.
  • Строгий безопасный режим ограничивает HTML теги, обработчики кликов, внешние ссылки и пользовательские скрипты, поэтому некоторые расширенные интерактивные элементы не будут отображаться.
  • Для исходного кода, количества операторов, лексических токенов, цепочечных узлов, количества соединений и результата рендеринга SVG установлены безопасные ограничения; экспорт PNG также ограничен размером холста.

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

Почему директива click не выполняется?

Инструмент работает в строгом безопасном режиме и не выполняет обратные вызовы ссылок или скрипты, чтобы обеспечить безопасность локального предпросмотра.

Что выбрать: SVG или PNG?

SVG лучше подходит для дальнейшего редактирования и масштабирования без потерь; PNG — для документов или социальных платформ, не поддерживающих SVG.

Диаграмма сохраняется автоматически?

Нет. Исходный код хранится только в памяти текущей страницы. Перед уходом скопируйте или скачайте его.

Отзывы о страницеНашли проблему или есть предложения по улучшению?
Функция обратной связи доступна только в онлайн-версии

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

Перейти к отзыву в онлайн-версии