Для разработчиков / Диаграммы
Онлайн-редактор Mermaid
Пишите код Mermaid и сразу видите диаграмму: блок-схемы, диаграммы последовательностей и классов, диаграммы Ганта и круговые диаграммы — с возможностью скачать их в SVG и PNG.
Онлайн-редактор Mermaid: Редактор создаёт диаграммы с помощью Mermaid — библиотеки с открытым исходным кодом, которую используют GitHub, GitLab и многие инструменты документирования для диаграмм, написанных в виде текста. Редактор работает в строгом режиме, поэтому код от другого пользователя не может запускать скрипты или добавлять обработчики нажатий. SVG сохраняет чёткость при любом размере, а PNG создаётся в размере, вдвое превышающем размер на экране, на белом фоне. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.
- Категория
- Инструменты для разработчиков
- Запуски
- В вашем браузере
- Стоимость
- Бесплатно · без регистрации
- Доступность
- Готово к использованию
Полностью работает в браузере
Диаграммы создаются в вашем браузере с помощью Mermaid в строгом режиме, поэтому код диаграммы не может запускать скрипты. Вставьте тот же код в GitHub, GitLab или Markdown Notion в блок кода mermaid, чтобы показать диаграмму там.
Диаграммы в виде текста
Диаграмма, нарисованная в графической программе, устаревает, потому что для её изменения файл приходится снова открывать. Диаграмма Mermaid — это несколько строк текста рядом с кодом или документом, который она описывает. Они меняются в одном коммите, а при проверке отображаются в виде понятного diff.
Каждая диаграмма начинается с указания типа: flowchart с направлением, например TD (сверху вниз) или LR (слева направо), sequenceDiagram, classDiagram, gantt или pie. Узлы записываются один раз вместе с подписью — A[Start], — а затем обозначаются по имени: A --> B.
Экспорт
SVG сохраняет чёткость линий и текста при любом размере и лучше подходит для документов и презентаций; PNG удобнее для чатов и мест, где SVG не поддерживается. Чтобы вручную изменить экспортированный SVG, откройте его в редакторе SVG.
Как пользоваться
- Начните с примера или вставьте собственный код Mermaid.
- Редактируйте код: диаграмма перерисовывается по мере ввода или отображается сообщение об ошибке.
- Скачайте диаграмму в формате SVG или PNG либо скопируйте код.
Конфиденциальность и ограничения
Диаграммы создаются в вашем браузере, а код хранится только в этом браузере, поэтому при следующем посещении он останется на месте.
Похожие инструменты
Часто задаваемые вопросы
Что такое Mermaid?
Это способ создавать диаграммы в виде текста. Например, строка A --> B создаёт два блока, соединённых стрелкой. Поэтому диаграммы можно хранить в файлах Markdown и обсуждениях кода, а изменять их — правкой текста, а не в графическом редакторе.
Как показать диаграмму на GitHub?
Поместите код в блок кода с ограждением и пометкой mermaid в файле Markdown, задаче или запросе на слияние: три обратных апострофа, слово mermaid, код, затем ещё три обратных апострофа. GitHub, GitLab и Notion отобразят диаграмму прямо на странице.
Почему на моей диаграмме отображается ошибка?
В сообщении указана строка, которую Mermaid не удалось прочитать. Распространённые причины — отсутствие типа диаграммы в первой строке, например flowchart TD, незакрытые скобки или кавычки, а также текст со специальными символами, который нужно заключить в кавычки.
Какие типы диаграмм поддерживаются?
Все типы, доступные в версии Mermaid, которую загружает редактор, включая блок-схемы, диаграммы последовательностей, классов, состояний и сущность — связь, диаграммы Ганта и круговые диаграммы, интеллект-карты, временные шкалы и графы Git. Примеры охватывают пять наиболее распространённых типов.
Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен