Создание диаграмм онлайн

Создавайте блок-схемы, диаграммы последовательности и ER-диаграммы в онлайн-редакторе Mermaid. Вставьте код и сразу увидите результат. Есть примеры, экспорт в PNG, SVG и PDF и обмен по ссылке.

Бесплатно и без установки

Создавайте блок-схемы в онлайн-редакторе Mermaid

Вставьте код или выберите готовый пример — схема появится рядом с редактором. Меняйте текст и связи, проверяйте результат и скачивайте диаграмму в PNG, SVG или PDF. Можно поделиться ссылкой.

Открыть редактор Примеры Возможности
  • 100% бесплатно
  • 33 типа диаграмм
  • Обработка в браузере
  • 4 формата экспорта

Всё для работы с диаграммами Mermaid

От первого наброска до схемы для документации — редактируйте код и сразу проверяйте результат.

Предпросмотр сразу при вводе

Изменили код — увидели обновлённую схему. Так проще заметить ошибку в синтаксисе или расположении элементов.

Шаблоны и примеры

Начните с блок-схемы, диаграммы последовательности, ER-диаграммы или диаграммы Ганта.

33 типа диаграмм

От блок-схем и интеллект-карт до C4, диаграмм Санки и досок канбан.

Сохранение в PNG, SVG, PDF и MMD

Скачайте готовую схему или сохраните код в MMD, чтобы вернуться к нему позже.

Обмен по ссылке

Отправьте ссылку коллеге — он сможет открыть ту же диаграмму в браузере.

Редактирование в браузере

Для редактирования и экспорта не нужно загружать код диаграммы на сервер.

Интерфейс на 11 языках

Работайте на русском или переключитесь на один из других доступных языков.

Диаграммы под контролем версий

Код схемы удобно копировать, проверять на ревью и хранить в Git.

Примеры Mermaid: блок-схема, диаграмма последовательности и ER-диаграмма

Посмотрите, как описать согласование заявки, обмен с API и связи в базе данных. Откройте пример, измените код и проверьте, как изменится диаграмма.

Блок-схема согласования заявки

Процесс от отправки заявки до одобрения или доработки. Команда flowchart TD задаёт направление сверху вниз, а ромб обозначает решение.

flowchart TD
    A[Отправить заявку] --> B{Заявка одобрена?}
    B -->|Да| C[Начать обработку]
    B -->|Нет| D[Исправить заявку]
    D --> A

Подсказка по синтаксису: Меняйте подписи в квадратных скобках, сохраняя идентификаторы узлов A и B. Подпись ветки записывается между вертикальными чертами: -->|Да|.

Открыть пример в редакторе

Диаграмма последовательности для API

Порядок взаимодействия пользователя, API и базы данных. Объявление participant с as позволяет использовать короткий идентификатор и русскую подпись.

sequenceDiagram
    participant U as Пользователь
    participant A as API
    participant D as База данных
    U->>A: Отправить заказ
    A->>D: Сохранить заказ
    D-->>A: Вернуть ID заказа
    A-->>U: Подтвердить приём

Подсказка по синтаксису: После стрелки поставьте двоеточие и текст сообщения: U->>A: Отправить заказ. Стрелка -->> показывает ответ пунктирной линией.

Открыть пример в редакторе

ER-диаграмма клиентов и заказов

Модель данных, в которой один клиент может иметь несколько заказов. Поля CUSTOMER и ORDER показывают первичные и внешние ключи.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        int id PK
        string name
    }
    ORDER {
        int id PK
        int customer_id FK
        date created_at
    }

Подсказка по синтаксису: || означает одну запись, а o{ — ноль или больше. Атрибуты записываются в порядке «тип имя»; PK обозначает первичный ключ, FK — внешний.

Открыть пример в редакторе

Как экспортировать Mermaid в PNG, SVG или PDF

Откройте меню экспорта в редакторе и выберите формат. PNG подходит для презентаций и обмена изображениями, SVG — для масштабируемых схем на веб-страницах, PDF — для печати. Сохраните MMD, если хотите позже редактировать исходный Mermaid-код.

Три шага до готовой диаграммы

  1. 01

    Вставьте код или выберите шаблон

    Используйте свой код Mermaid или откройте пример и замените текст.

  2. 02

    Проверьте схему

    Меняйте подписи и связи, а результат смотрите в предпросмотре.

  3. 03

    Сохраните или поделитесь

    Скачайте изображение, PDF или код в MMD либо отправьте ссылку на диаграмму.

Блок-схемы, ER-диаграммы и ещё 31 тип

Выберите подходящий тип для рабочего процесса, взаимодействия сервисов, модели данных или плана проекта.

  • Блок-схема
  • Диаграмма классов
  • Диаграмма последовательности
  • ER-диаграмма
  • Диаграмма состояний
  • Интеллект-карта
  • Архитектурная диаграмма
  • Блок-диаграмма
  • C4-диаграмма
  • Фреймворк Cynefin
  • Моделирование событий
  • Диаграмма Ганта
  • Git-граф
  • Диаграмма Исикавы (рыбья кость)
  • Канбан-доска
  • Диаграмма сетевого пакета
  • Круговая диаграмма
  • Квадрантная диаграмма
  • Радарная диаграмма
  • Синтаксическая диаграмма (ABNF)
  • Синтаксическая диаграмма (EBNF)
  • Синтаксическая диаграмма (IR)
  • Синтаксическая диаграмма (PEG)
  • Диаграмма требований
  • Диаграмма Санки
  • Временная шкала
  • Древовидное представление
  • Древовидная карта
  • Карта пути пользователя
  • Диаграмма Венна
  • Карты Уордли
  • XY-диаграмма
  • ZenUML

Для проектов, документации и учёбы

Разработчики

Документируйте API, сервисы, модели данных, переходы состояний, Git-потоки, сетевые пакеты и архитектуру.

Продуктовые и проектные команды

Отображайте путь пользователя, процессы, дорожные карты, Kanban, сроки, требования и планы проектов.

Технические писатели

Создавайте поддерживаемые визуализации для README, баз знаний, спецификаций, руководств и внутренних документов.

Студенты и преподаватели

Объясняйте сложные системы, сравнивайте идеи, стройте интеллект-карты и превращайте конспекты в понятные схемы.

В каком формате сохранить диаграмму?

Выберите PNG для презентации, SVG для масштабирования или PDF для печати. Код можно сохранить отдельно в MMD.

PNG
Качественное растровое изображение для слайдов, документов, чатов и быстрой отправки.
SVG
Масштабируемый вектор для веба, дизайн-инструментов и любого увеличения.
PDF
Формат для печати, отчетов, согласований и архивирования.
MMD
Исходный Mermaid-код для дальнейшего редактирования, повторного использования и контроля версий.

Код диаграммы обрабатывается в браузере

При обычном редактировании и экспорте код Mermaid обрабатывается в браузере, без загрузки на сервер. Ссылка для обмена содержит диаграмму, поэтому отправляйте её только тем, кому хотите показать содержимое.

Часто задаваемые вопросы

Онлайн-редактор Mermaid действительно бесплатный?

Да. Редактор, шаблоны, примеры, live preview, обмен ссылками и экспорт PNG, SVG, PDF и MMD доступны бесплатно.

Что такое Mermaid?

Mermaid позволяет описывать диаграммы текстом. Укажите элементы и связи между ними в коде — и получите блок-схему, диаграмму последовательности или другой тип схемы.

Какие типы диаграмм поддерживаются?

Поддерживаются 33 категории: блок-схемы, классы, последовательности, ER, состояния, интеллект-карты, архитектура, C4, Гант, Git, Kanban, Sankey, временные шкалы, путь пользователя, Venn, Wardley Maps, XY, ZenUML и другие.

Можно экспортировать в PNG, SVG, PDF и MMD?

Да. PNG удобен для обычных изображений, SVG — для масштабирования, PDF — для печати и официальных документов, MMD — для сохранения редактируемого исходника.

Mermaid-код отправляется на сервер?

Сайт рассчитан на обработку данных в браузере; при обычном редактировании и экспорте рабочий контент остается на стороне клиента.

Как работает обмен по ссылке?

Создайте ссылку в редакторе и отправьте ее другому человеку — диаграмма откроется прямо в браузере.

Нужно устанавливать Mermaid или программу?

Нет. Достаточно современного браузера.

Можно начать с шаблона или примера?

Да. Шаблоны помогают быстро освоить синтаксис и создать распространенные диаграммы без пустого листа.

Можно вставить Mermaid-код из ChatGPT или Claude?

Да. Вставьте код, проверьте live preview, исправьте синтаксис при необходимости и экспортируйте результат.

Зачем Mermaid вместо drag-and-drop?

Текстовые диаграммы быстрее редактировать, проще хранить в Git, проверять в code review и синхронизировать с документацией.

Попробуйте на готовом примере

Откройте редактор, выберите пример или вставьте свой код Mermaid.

Открыть редактор