Рендер диаграмм Mermaid

Рендерит диаграммы Mermaid (поток, последовательность, gantt) в SVG в вашем браузере.

Ваш код Mermaid рендерится локально в браузере, и ничего не загружается на сервер.

Нужно уменьшить экспортированную диаграмму? Попробуйте SVG Optimizer.

Об инструменте Рендер диаграмм Mermaid

Этот live-редактор Mermaid превращает обычный код Mermaid в отрендеренные диаграммы по мере ввода, причём рендеринг начинается в момент вставки. Вставьте блок-схему, диаграмму последовательности, диаграмму Ганта, диаграмму классов или диаграмму состояний и наблюдайте, как SVG мгновенно появляется рядом с вашим исходником. Он создан для разработчиков, технических писателей и архитекторов, которые держат диаграммы в документах, файлах README или дизайн-заметках и хотят быстрый способ предпросмотреть и экспортировать их. Рендерер диаграмм Mermaid автоматически определяет светлую и тёмную темы, чтобы соответствовать вашему виду, сообщает о синтаксических ошибках встроенно, чтобы вы быстро их исправили, и позволяет скачать результат как чистый SVG. Поскольку всё обрабатывается локально в вашем браузере, исходник вашей диаграммы не покидает устройство и ничего не загружается на сервер.

Возможности

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

  1. Вставьте или введите свой код Mermaid в поле ввода.
  2. Наблюдайте, как диаграмма рендерится автоматически в панели вывода.
  3. Исправьте любые встроенные сообщения о синтаксических ошибках, если они появятся.
  4. Переключите тему браузера или приложения, чтобы предпросмотреть светлый или тёмный стиль.
  5. Нажмите «Скачать», чтобы сохранить результат как diagram.svg.

Пример

Ввод

graph TD
  A[Старт] --> B{Работает?}
  B -->|Да| C[Выпускаем]
  B -->|Нет| D[Чиним]
  D --> B

Результат

Отрендеренная SVG-блок-схема: блок «Старт» переходит в ромб решения «Работает?», ветка «Да» указывает на «Выпускаем», ветка «Нет» указывает на «Чиним», а «Чиним» возвращается к решению.

Простая блок-схема, отрендеренная в скачиваемый SVG.

Частые ошибки и устранение неполадок

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

Что такое live-редактор Mermaid?
Это браузерный инструмент, который преобразует код Mermaid в отрендеренную диаграмму в реальном времени, поэтому вы можете предпросматривать блок-схемы, диаграммы последовательностей и другие рядом с вашим исходником и экспортировать их как SVG.
Какие типы диаграмм поддерживает live-редактор Mermaid?
Он рендерит стандартный синтаксис Mermaid, включая блок-схемы, диаграммы последовательностей, диаграммы Ганта, диаграммы классов и диаграммы состояний — тот же синтаксис, что используется в GitHub и многих инструментах документации.
Как экспортировать диаграмму Mermaid как изображение?
Как только ваша диаграмма отрендерится, нажмите «Скачать», чтобы сохранить её как файл SVG, который можно вставить в документы или открыть в любом векторном редакторе.
Почему моя диаграмма Mermaid показывает синтаксическую ошибку?
Рендерер проверяет код Mermaid и показывает сообщение парсера встроенно; большинство ошибок возникает из-за отсутствующего объявления типа диаграммы или несбалансированных скобок и стрелок.
Соответствует ли отрендеренная диаграмма моему тёмному режиму?
Да. Live-редактор Mermaid определяет, просматриваете ли вы в светлом или тёмном режиме, и применяет соответствующую тему Mermaid автоматически.
Остаётся ли код моей диаграммы Mermaid приватным?
Да. Исходник вашей Mermaid рендерится локально в вашем браузере и не покидает устройство, поэтому ничего не загружается на сервер.

Связанные инструменты

Все инструменты ArrayKit