Ввод кода
Результат
Диаграмма появится здесь после визуализации
Рендеринг диаграммы...
Онлайн-редактор Mermaid
Mermaid позволяет создавать диаграммы с помощью обычного текста. Вместо рисования схем достаточно написать описание, после чего диаграмма строится автоматически.
Какие диаграммы поддерживаются
В зависимости от версии Mermaid:
- Flowchart
- Sequence Diagram
- Class Diagram
- ER Diagram
- State Diagram
- Gantt
- Pie Chart
- Journey
Примеры диаграмм
| Тип | Пример |
|---|---|
| Flowchart | flowchart TD |
| Sequence | sequenceDiagram |
| Gantt | gantt |
| ER | erDiagram |
| Class | classDiagram |
| State | stateDiagram-v2 |
| Pie | pie |
| Journey | journey |
Как пользоваться
-
Вставьте код Mermaid
Опишите диаграмму в левом поле или загрузите пример.
-
Нажмите "Визуализировать"
Схема появится в блоке результата справа.
-
Исправьте ошибки
При синтаксической ошибке следуйте сообщению под кнопкой.
-
Экспортируйте PNG или SVG
Сохраните диаграмму для документации или презентации.
Частые вопросы
Да
В документации, github, gitlab, notion, obsidian, wiki, архитектурных схемах
Язык описания диаграмм текстом
Да, если поддерживается инструментом
Нет, редактор открывается сразу и работает в браузере