Как пользоваться
- Выберите диаграмму в «Вставить шаблон» или вставьте готовый код Mermaid.
- Редактируйте код слева. Предпросмотр перерисовывается после паузы, ошибки синтаксиса показываются под ним.
- Выберите тему, скачайте SVG или PNG либо скопируйте код SVG.
Описание параметров
- Типы диаграмм
- Шаблоны охватывают блок-схемы, последовательности, классы, состояния и ER, диаграммы Гантта, круговые диаграммы и mind map. Другие типы Mermaid, например timeline, quadrant и Git graph, можно написать вручную.
- Тема
- Встроенные темы default, neutral, dark и forest. Neutral близка к чёрно-белой и хорошо печатается.
- Экспорт
- SVG — векторный формат без потери качества. PNG экспортируется в размере 2× с цветным фоном для чатов и слайдов.
Шпаргалка по блок-схемам
flowchart LR
A[Rectangle] --> B(Rounded)
B --> C{Decision}
C -->|Yes| D[(Database)]
C -.->|No| E((Circle))TD— сверху вниз,LR— слева направо-->— сплошная стрелка,-.->— пунктирная,==>— толстая,-->|text|— с подписью
Часто задаваемые вопросы
Можно ли вставить код Mermaid в GitHub?
Да. Поместите его в блок ```mermaid в Markdown-файле, issue или комментарии, и GitHub отрисует диаграмму. Mermaid поддерживают также GitLab, Notion, Obsidian и Typora.
Мой код загружается?
Нет. Mermaid отрисовывает его в браузере, код и диаграмма не покидают устройство.
Почему Markdown внутри узлов не форматируется?
Для экспорта PNG подписи узлов рисуются как SVG-текст, который не поддерживает HTML-теги и часть форматирования.
Конфиденциальность
Этот инструмент работает полностью в браузере. Ваши файлы и текст обрабатываются на вашем устройстве и никогда не загружаются на наши серверы.