Этот live-редактор Mermaid превращает обычный код Mermaid в отрендеренные диаграммы по мере ввода, причём рендеринг начинается в момент вставки. Вставьте блок-схему, диаграмму последовательности, диаграмму Ганта, диаграмму классов или диаграмму состояний и наблюдайте, как SVG мгновенно появляется рядом с вашим исходником. Он создан для разработчиков, технических писателей и архитекторов, которые держат диаграммы в документах, файлах README или дизайн-заметках и хотят быстрый способ предпросмотреть и экспортировать их. Рендерер диаграмм Mermaid автоматически определяет светлую и тёмную темы, чтобы соответствовать вашему виду, сообщает о синтаксических ошибках встроенно, чтобы вы быстро их исправили, и позволяет скачать результат как чистый SVG. Поскольку всё обрабатывается локально в вашем браузере, исходник вашей диаграммы не покидает устройство и ничего не загружается на сервер.
Возможности
Живой рендеринг кода Mermaid в SVG по мере ввода
Поддержка блок-схем, диаграмм последовательностей, Ганта, классов, состояний и других типов диаграмм
Встроенные сообщения о синтаксических ошибках точно указывают на проблемы в вашем коде
Автоопределение светлой и тёмной темы для соответствия текущему виду
Скачивание отрендеренной диаграммы как чистого файла SVG
Строгий режим безопасности санирует содержимое диаграммы во время рендеринга
Работает полностью в вашем браузере, поэтому ничего не загружается на сервер
Как использовать Рендер диаграмм Mermaid
Вставьте или введите свой код Mermaid в поле ввода.
Наблюдайте, как диаграмма рендерится автоматически в панели вывода.
Исправьте любые встроенные сообщения о синтаксических ошибках, если они появятся.
Переключите тему браузера или приложения, чтобы предпросмотреть светлый или тёмный стиль.
Нажмите «Скачать», чтобы сохранить результат как diagram.svg.
Пример
Ввод
graph TD
A[Старт] --> B{Работает?}
B -->|Да| C[Выпускаем]
B -->|Нет| D[Чиним]
D --> B
Результат
Отрендеренная SVG-блок-схема: блок «Старт» переходит в ромб решения «Работает?», ветка «Да» указывает на «Выпускаем», ветка «Нет» указывает на «Чиним», а «Чиним» возвращается к решению.
Простая блок-схема, отрендеренная в скачиваемый SVG.
Частые ошибки и устранение неполадок
Вместо диаграммы показывается ошибка разбора или «Syntax error in text». — Проверьте, что первая строка объявляет валидный тип диаграммы (например graph TD, sequenceDiagram, gantt) и что стрелки и скобки сбалансированы.
Метки узлов со специальными символами вроде скобок или кавычек ломают рендеринг. — Оберните текст метки в двойные кавычки, например A["Моя (метка)"], чтобы Mermaid обрабатывал символы буквально.
Диаграмма рендерится, но цвета выглядят неправильно на фоне. — Рендерер автоматически следует вашей светлой или тёмной теме; переключите тему приложения, чтобы получить соответствующий стиль.
Отступы или табуляция вызывают неожиданную раскладку в блок-схемах. — Используйте согласованные пробелы для отступов и держите каждый узел или связь на отдельной строке.
Часто задаваемые вопросы
Что такое live-редактор Mermaid?
Это браузерный инструмент, который преобразует код Mermaid в отрендеренную диаграмму в реальном времени, поэтому вы можете предпросматривать блок-схемы, диаграммы последовательностей и другие рядом с вашим исходником и экспортировать их как SVG.
Какие типы диаграмм поддерживает live-редактор Mermaid?
Он рендерит стандартный синтаксис Mermaid, включая блок-схемы, диаграммы последовательностей, диаграммы Ганта, диаграммы классов и диаграммы состояний — тот же синтаксис, что используется в GitHub и многих инструментах документации.
Как экспортировать диаграмму Mermaid как изображение?
Как только ваша диаграмма отрендерится, нажмите «Скачать», чтобы сохранить её как файл SVG, который можно вставить в документы или открыть в любом векторном редакторе.
Почему моя диаграмма Mermaid показывает синтаксическую ошибку?
Рендерер проверяет код Mermaid и показывает сообщение парсера встроенно; большинство ошибок возникает из-за отсутствующего объявления типа диаграммы или несбалансированных скобок и стрелок.
Соответствует ли отрендеренная диаграмма моему тёмному режиму?
Да. Live-редактор Mermaid определяет, просматриваете ли вы в светлом или тёмном режиме, и применяет соответствующую тему Mermaid автоматически.
Остаётся ли код моей диаграммы Mermaid приватным?
Да. Исходник вашей Mermaid рендерится локально в вашем браузере и не покидает устройство, поэтому ничего не загружается на сервер.
Связанные инструменты
Форматировщик JSON — Форматируйте, минимизируйте и проверяйте JSON с указанием места ошибок.