Бесплатный онлайн-редактор Mermaid от Bee Tools. Поддерживает блок-схемы, последовательности, диаграммы Ганта, классов и ER. Живая предпросмотр, экспорт в SVG/PNG. Отрисовка полностью в вашем браузере.
Создавайте профессиональные диаграммы на текстовом синтаксисе и сразу видьте предпросмотр. Опишите любую диаграмму в декларативном синтаксисе Mermaid, и Bee Tools отрисует её локально в вашем браузере в виде чёткой векторной графики. Экспортируйте в PNG или SVG для документов, презентаций и блогов.
Шпаргалка по Mermaid
Что такое Mermaid
Mermaid была создана Кнутом Свейдквистом (Knut Sveidqvist) в 2014 году как декларативный язык в стиле Markdown для описания диаграмм. В отличие от инструментов перетаскивания, Mermaid позволяет хранить диаграммы в управляемых версиями исходных файлах.
Краткая справка
flowchart TD/LR — блок-схемы. A-->B — это связь, A{?} — это решение, A([Start]) — это форма стадиона.
sequenceDiagram — последовательность. Alice->>Bob: Hello отправляет синхронное сообщение; Bob-->>Alice: Hi — это ответ.
gantt — диаграммы Ганта. Объявите dateFormat, затем опишите задачи с датами начала и длительностью.
classDiagram — диаграммы классов. Определите классы и отношения, например наследование Animal <|-- Dog.
stateDiagram-v2 — конечные автоматы, отлично подходят для UI/порядка/потока конвейера.
pie — круговые диаграммы через пары "Метка" : значение.
Используйте подграфы, чтобы разбивать сложные диаграммы на читаемые части.
Настраивайте цвета с помощью classDef для лучшей читаемости.
Добавляйте %% комментарии, чтобы исходный код было легче поддерживать.
Отредактируйте пример слева и наблюдайте отрисованную диаграмму справа.
Часто задаваемые вопросы
Что такое Mermaid?
Mermaid — это язык диаграмм на основе JavaScript, созданный Кнутом Свейдквистом (Knut Sveidqvist). С помощью текста в стиле Markdown он генерирует блок-схемы, диаграммы последовательностей, диаграммы Ганта и многое другое. Нативная поддержка встроена в GitHub, GitLab, Docusaurus и Obsidian.
Какие типы диаграмм поддерживаются?
Мы из коробки поддерживаем flowchart, sequenceDiagram, gantt, classDiagram, stateDiagram-v2, pie, erDiagram, gitGraph и requirementDiagram.
Сохраняются ли мои диаграммы или загружаются?
Нет. Отрисовка происходит полностью внутри вашего браузера. Закрытие вкладки удаляет всё.
Потеряет ли экспорт в SVG/PNG качество?
SVG — это вектор, он чёткий при любом масштабе. PNG растеризуется с разрешением 2×, чего достаточно для большинства документов и презентаций.
Как встроить Mermaid в Markdown?
Заключите код в ограждённый блок `mermaid`. GitHub, GitLab, Hugo, Hexo и Obsidian отрисуют его автоматически.