Реклама мешает? Идти Без рекламы Сегодня 

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

РазработчикИзображениеТекст

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

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

Вставьте код mermaid.js и сразу увидите живую, интерактивную диаграмму, которую можно скопировать или скачать. Поддерживает схемы потоков, диаграммы последовательности, диаграммы Ганта, диаграммы в виде кольца, диаграммы классов и другие — все отображаются на стороне клиента в вашем браузере, без серверов, аккаунтов или установок.

Mermaid отлично подходит для «диаграмм как кода»: ваша диаграмма находится рядом с остальным проектом как простой текст, но люди нуждаются в рендерере, чтобы увидеть изображение. Этот инструмент заполняет этот пробел — вставьте любой фрагмент mermaid, измените темы и экспортируйте результат в виде SVG или PNG.

Как использовать

Вставьте свой код mermaid в редактор — или нажмите Flowchart, Последовательность, Gantt, Диаграмма в виде кольца, или Сорт чтобы загрузить пример.
Выберите тема (По умолчанию, Темная, Forest, Нейтральная, Базовая) и фон (Прозрачный, Белый, Светло-серый, Темный) для совпадения с вашим презентацией или документом.
Следите за обновлением диаграммы в реальном времени при вводе. Если синтаксис неверный, вы увидите точное сообщение об ошибке mermaid прямо под предварительным просмотром.
Когда всё выглядит правильно, нажмите Скачать SVG для получения идеально масштабируемого вектора, Скачать PNG для получения изображения в формате растрового изображения, или Копировать чтобы получить исходный SVG для встраивания.

Возможности

Живой предварительный просмотр — диаграмма перерисовывается при редактировании, с задержкой (debounce), чтобы большие диаграммы оставались отзывчивыми.
Все основные типы mermaid — схемы потоков, последовательности, Ганта, кольца, классов, ER, состояний, путешествий и любых других синтаксисов, поддерживаемых mermaid v11.
5 встроенных тем — По умолчанию, Темная, Forest, Нейтральная и Базовая, а также настраиваемые фоновые предварительные просмотры для прозрачного, белого, светлого или темного.
Экспорт в SVG и PNG — скачайте чёткий вектор SVG или изображение в формате PNG с масштабом 2x, не выходя из страницы.
Исходный SVG для копирования — получите исходный код для вставки в README, документ или веб-страницу.
Интерактивное отображение ошибок — ошибки синтаксиса mermaid показываются ясно, поэтому вы можете их исправить за несколько секунд.
Приватность на первом месте — всё работает в вашем браузере. Ваша диаграмма никогда не передаётся на наши серверы.

Реклама · УДАЛИТЬ?

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

Что такое mermaid.js?

Mermaid — это открытая библиотека JavaScript, которая преобразует простые текстовые определения диаграмм в SVG-диаграммы. Она была создана, чтобы инженеры, технические авторы и команды продуктов могли хранить диаграммы в системе контроля версий вместе с кодом, вместо хранения бинарных файлов в отдельном инструменте для дизайна. Mermaid поддерживает множество типов диаграмм по умолчанию, от простых схем потоков до диаграмм схемы отношений и диаграмм Ганта.
Почему использовать диаграммы как код вместо графического редактора?

Диаграммы, написанные в текстовом виде, находятся в вашем репозитории, изменяются чисто в pull-запросах и обновляются мгновенно при изменении основных идей. Они могут быть найдены, автоматизированы и никогда не теряются, как изображение в вики. Графические инструменты отлично подходят для одноразовых презентаций, но для живой документации текстовый формат лучше масштабируется в команде.
Каковы различия между SVG и PNG при экспорте диаграммы?

SVG — это векторный формат: он хранит фигуры и текст в виде математики, поэтому он остаётся чётким при любом масштабе и мал в размере для типичных диаграмм. PNG — это растровый формат, хранящий фиксированную сетку пикселей, что делает его безопасным выбором для инструментов, не поддерживающих SVG (старые презентации, некоторые чат-приложения, платформы, работающие только с изображениями). Для документов, веб-страниц и современных инструментов для презентаций SVG — почти всегда лучший выбор.
Как влияют темы mermaid на отображение?

Тема mermaid — это набор стандартных цветов и правил шрифтов, применяемых к отображаемой диаграмме. Тема по умолчанию — яркая и хорошо работает на светлых фонах, темная инвертирует цвета для темных интерфейсов, тема Forest использует зелёные оттенки, тема Neutral — серые тона, а тема Base — упрощённый базовый стиль, который можно переопределить с помощью переменных темы. Смена темы меняет внешний вид SVG, но сама структура диаграммы остаётся неизменной.
Происходит ли рендеринг локально или на сервере?

Рендеринг происходит полностью в вашем браузере с использованием JavaScript-движка mermaid. Ничего не загружается, не отправляется на сервер или не хранится удалённо. Это обеспечивает конфиденциальность архитектурных диаграмм и означает, что инструмент будет работать даже при медленном или отсутствующем соединении с интернетом.