Редактор Mermaid
Создавайте блок-схемы, диаграммы последовательности, диаграммы Ганта и другие прямо из текста в редакторе Mermaid. Рендеринг, масштабирование и экспорт в SVG или PNG в браузере.
Что такое Mermaid?
Mermaid — открытый язык описания диаграмм, позволяющий создавать диаграммы из обычного текста, как Markdown. Вы описываете узлы и связи простым синтаксисом, а рендерер рисует диаграмму автоматически.
Какие типы диаграмм поддерживаются?
В редакторе есть примеры блок-схем, диаграмм последовательности, классов, состояний, ER-диаграмм, диаграмм Ганта, круговых диаграмм, интеллект-карт и хронологий. Mermaid 11 поддерживает и другие типы, которые можно ввести вручную.
Как создать диаграмму?
Выберите пример из списка или введите свой код в редактор слева. Предпросмотр перерисовывается примерно через 350 мс после ввода; при ошибке синтаксиса красная панель покажет её текст, а прежний diagram сохранится.
Отправляется ли мой код куда-либо?
Нет. Всё рендерится локально в браузере средствами JavaScript. Ваш код не покидает устройство.
Как экспортировать диаграмму?
«Скачать SVG» даёт масштабируемый вектор, «Скачать PNG» — растровое изображение двойного разрешения (с возможностью прозрачного фона). «Копировать код» помещает исходник Mermaid в буфер обмена.
Почему экспорт PNG иногда не удаётся?
Некоторые возможности Mermaid рендерятся через foreignObject, который браузер может отказаться растрировать на canvas. Тогда PNG сообщит об ошибке, но скачивание SVG работает всегда — растеризация ему не нужна.
Как работает масштабирование?
Предпросмотр поддерживает масштаб от 0,5x до 2x. Кнопки + и - меняют масштаб шагами по 10%, «Вписать» подгоняет диаграмму под область просмотра, «100%» возвращает исходный размер.
Можно ли использовать Mermaid в своей документации?
Да. GitHub, GitLab и многие документационные инструменты рендерят блоки Mermaid нативно: оберните код в огороженный блок mermaid, и диаграмма отрисуется автоматически.
Поддерживается ли тёмная тема?
Да. Диаграмма следует теме платформы: при переключении в тёмный режим она автоматически перерисовывается с тёмной темой Mermaid.
Советы по читаемым диаграммам?
Короткие подписи узлов, подходящее направление (TD сверху вниз, LR слева направо), разбиение очень больших графов на подграфы и использование встроенных примеров как шаблонов.
Как использовать Редактор Mermaid
Mermaid превращает обычный текст в блок-схемы, диаграммы последовательности, диаграммы Ганта и многое другое. Этот живой редактор перерисовывает код по мере набора — полностью в браузере, ничего не покидает ваше устройство.
- Выберите отправную точку в выпадающем списке «Пример» — девять готовых диаграмм покрывают блок-схему, последовательность, классы, состояния, ER, Ганта, круговую, интеллект-карту и хронологию; выбор загружает код в редактор.
- Редактируйте код Mermaid в левой панели; предпросмотр справа перерисовывается примерно через треть секунды после того, как вы перестали печатать. Когда в красной панели появляется ошибка синтаксиса, последняя корректная диаграмма остаётся на виду, пока вы правите код.
- Масштабируйте от 50% до 200% кнопками «плюс» и «минус», нажмите «Вписать», чтобы диаграмма заняла область предпросмотра, или «100%», чтобы вернуть исходный размер.
- Отметьте «Прозрачный фон», если нужен PNG без белой подложки, затем нажмите «Скачать SVG» или «Скачать PNG» — PNG экспортируется в двойном разрешении и остаётся чётким при вставке.
- Нажмите «Копировать код», чтобы отправить исходник Mermaid в буфер обмена и вставить его в документацию, вики или репозиторий.
Если диаграмма не строится, закомментируйте недавно изменённые строки, чтобы локализовать ошибку — сообщение называет проблемную строку, а предпросмотр хранит последнюю рабочую версию, пока синтаксис не станет корректным.
Похожие инструменты
- Код в изображение Преобразуйте фрагменты кода в красивые изображения с подсветкой синтаксиса, темами и декорациями окна. 100% конфиденциальность, всё в вашем браузере.
- Предпросмотр Markdown Бесплатный онлайн-редактор Markdown с живым предпросмотром. Пишите, рендерите и экспортируйте Markdown с полной поддержкой GFM.
- Просмотрщик и Редактор SVG Просматривайте, редактируйте и оптимизируйте SVG-файлы онлайн. Предпросмотр в реальном времени, редактирование кода и инструменты оптимизации.
- JSON просмотрщик дерева Визуализируйте данные JSON в виде интерактивного сворачиваемого дерева. Ищите ключи и значения, отслеживайте JSONPath при наведении и обрабатывайте большие файлы с отложенной загрузкой. Поддерживается перетаскивание .json файлов.
- Проверка хеша Вычисляйте и проверяйте хеши MD5, SHA-1, SHA-256, SHA-512 локально
- Калькулятор Chmod Бесплатный онлайн-калькулятор chmod для визуализации и вычисления прав доступа Linux с помощью флажков. Мгновенное преобразование между числовой (755, 644) и символической нотацией (rwxr-xr-x). Поддержка специальных прав: setuid, setgid, sticky bit.
- Таблица ASCII Полная справочная таблица кодировки ASCII с десятичными, шестнадцатеричными, восьмеричными, двоичными кодами, HTML-сущностями и описаниями символов. Мгновенный поиск и фильтрация.
- Hex-просмотрщик Просмотр содержимого файлов в шестнадцатеричном формате с поиском, навигацией по смещению и виртуальной прокруткой