Схема из текста: Mermaid с нуля

Что это и зачем#

Mermaid — способ нарисовать схему текстом. Вместо того чтобы таскать мышью прямоугольники и стрелки, вы пишете A --> B — «из A стрелка в B». Строка — одна связь или один блок. Схему из десяти шагов так можно набросать за минуту.

Такой текст программисты хранят рядом с кодом: GitHub и GitLab рисуют его прямо в README, Notion и Obsidian — в заметках, в Confluence — через расширения. Нейросети тоже часто отвечают схемой Mermaid. Но текст неудобно двигать, обсуждать и показывать на встрече.

NodePanel превращает такой текст в живую доску: каждый блок становится фигурой или карточкой, стрелки — связями, группы — рамками. Дальше это обычная доска: двигайте, перекрашивайте, комментируйте, показывайте команде. А когда схема готова — копируйте её обратно в текст и вставляйте в документацию.

Где вставить схему#

1. 1

   Откройте доску и окно вставки

   Меню доски — три точки в шапке → «Вставить Mermaid…». Если текст уже скопирован, ещё проще: щёлкните по пустому месту холста и нажмите Ctrl+V (на Mac — ⌘+V). Когда первая строка текста — flowchart или graph (пустые строки и комментарии перед ней не мешают), окно откроется само, уже с этим текстом.

2. 2

   Напишите или вставьте схему

   Поле «Текст Mermaid» — моноширинное, стрелки в нём выглядят как набраны. Пока поле пустое, над ним есть кнопка «Вставить пример»: она подставит небольшую схему с развилкой и группой — с неё удобно начать.

3. 3

   Посмотрите, что получится

   Справа сразу видно, сколько будет блоков, связей и групп (для примера из окна — 6 блоков · 6 связей · 1 группа), и направление: «Сверху вниз» или «Слева направо». Всё в порядке — «Всё понятно — можно вставлять». Если строку не удалось понять, ниже появится замечание с её номером: «Строка 4: Не понял стрелку» и сам кусок текста. Такая строка пропускается, остальное вставится.

4. 4

   Нажмите «Вставить»

   Или Ctrl+Enter прямо в поле. Схема ляжет в центр экрана уже разложенной по направлению из текста и будет выделена — её можно сразу перетащить целиком. Появится уведомление — для примера из окна «Вставлено: 6 блоков и 6 связей».

5. 5

   Передумали — одна отмена

   Вся вставка — одно действие: Ctrl+Z убирает её целиком, вместе со связями и группами.

Уроки по шагам#

Каждый пример ниже можно скопировать кнопкой «Скопировать», вставить в окно и посмотреть, что получится. Под примером — что покажет окно, под некоторыми — как схема ляжет на доску. Отступы в начале строк не обязательны, они только для красоты.

flowchart LR
  A --> B

flowchart LR
  idea[Идея] --> check[Проверка]
  check --> launch[Запуск]

flowchart TD
  morning[Утро] --> coffee[Кофе]
  coffee --> work[Работа]

flowchart TD
  start([Старт]) --> step[Шаг процесса]
  step --> ok{Всё в порядке?}
  ok --> task[[Карточка задачи]]
  ok --> done((Готово))

flowchart LR
  api[API] --> db[(База данных)]

flowchart LR
  order[Заказ] --> pay[Оплата]
  pay --- receipt[Чек]
  pay -.-> mail[Письмо]
  pay ==> ship[Доставка]
  ship <--> stock[Склад]
  order -->|отмена| refund[Возврат]
  pay -- не прошла --> refund

flowchart LR
  plan[План] --> design[Дизайн] --> dev[Разработка] --> release[Релиз]
  tests[Тесты] & review[Ревью] --> release

flowchart LR
  subgraph front [Фронтенд]
    site[Сайт]
  end
  subgraph back [Бэкенд]
    api[API] --> db[База данных]
  end
  user[Пользователь] --> site --> api

flowchart TD
  subgraph cloud [Облако]
    subgraph cluster [Кластер]
      app[Приложение]
    end
    files[Хранилище файлов]
  end
  app --> files

flowchart LR
  draft("Шаг 1 (черновик)") --> list["Купить: хлеб; молоко"]
  list --> two["Первая строка<br>вторая строка"]
  two -->|"да | нет"| end1[Конец]

flowchart LR
  draft(Шаг 1 (черновик)) --> next[Дальше]

flowchart TD
  %% Комментарий: на доску не попадёт
  start[Начало] --> finish[Конец] %% и этот тоже

Готовые рецепты#

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

flowchart LR
  start([Заявка подана]) --> check[Проверка руководителем]
  check --> approved{Одобрено?}
  approved -->|Да| pay[Оплата бухгалтерией]
  pay --> done([Готово])
  approved -->|Нет| fix[Доработка заявки]
  fix -.->|исправили| check

flowchart LR
  subgraph clients [Клиенты]
    site[Сайт]
    admin[Админка]
  end
  subgraph backend [Бэкенд]
    api[[API заказов]]
    worker[[Фоновые задачи]]
  end
  subgraph storage [Данные]
    db((PostgreSQL))
    queue((Очередь))
  end
  site -->|HTTPS| api
  admin -->|HTTPS| api
  api -->|SQL| db
  api -.->|события| queue
  queue -.-> worker
  worker -->|SQL| db

flowchart LR
  catalog([Каталог]) --> product[Карточка товара] --> cart[Корзина]
  cart --> signed{Вошёл в аккаунт?}
  signed -- Да --> pay[Оплата]
  signed -- Нет --> login[Вход или регистрация]
  login --> pay
  pay --> thanks([Спасибо за заказ])

Обратно в текст: «Скопировать как Mermaid»#

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

1. 1

   Выберите, что копировать

   Ничего не выделено — скопируется вся доска. Выделены блоки — только они (вместе с содержимым выделенных групп) и связи между ними.

2. 2

   Скопируйте

   Меню доски (три точки) → «Скопировать как Mermaid». Если выделено несколько блоков, та же кнопка «Как Mermaid» есть в панели свойств справа. Появится уведомление, например «Скопировано как Mermaid: 4 блока».

3. 3

   Вставьте куда нужно

   В README на GitHub или GitLab текст оборачивают в блок кода с пометкой mermaid — как в примере ниже, и сайт нарисует схему сам. Или вставьте его обратно на доску — получится та же схема.

flowchart LR
  n1(["Заявка подана"])
  n2["Проверка"]
  n3{"Одобрено?"}
  n4[["Оплата"]]
  n1 --> n2
  n2 --> n3
  n3 -->|"Да"| n4
  n3 -.->|"Нет"| n2

## Как проходит заявка

```mermaid
flowchart LR
  start([Заявка подана]) --> check[Проверка]
  check --> approved{Одобрено?}
  approved -->|Да| pay[[Оплата]]
```

• Направление (LR, TD…) NodePanel подбирает по тому, куда в среднем идут связи на доске.
• Цвета, размеры, иконки, статусы, чек-листы и комментарии в текст не попадают — у Mermaid для них нет места.
• Знаки, которые сломали бы текст, — кавычки, #, <, >, |, % — пишутся кодами вроде #quot;. При вставке обратно они снова станут знаками.
• Копировать может каждый, кто видит доску, — и «Только просмотр», и гость по публичной ссылке.

Что не поддерживается и пределы#

• Только блок-схемы — flowchart и graph. Другие диаграммы Mermaid (sequenceDiagram, erDiagram, classDiagram, gantt и остальные) окно не вставляет и честно об этом пишет.
• Оформление пропускается: classDef, class, style, linkStyle и ::: — цвета на доске свои, окно один раз предупредит. После вставки перекрасьте блоки в панели свойств.
• click не переносится никогда: ни ссылки, ни вызовы из схемы на доску не попадают — это защита от чужих ссылок в скопированном тексте. Ссылку на карточку можно добавить руками.
• Новые формы через @{ shape: … } пока не поддерживаются — такой блок станет прямоугольником.
• Формы, которых нет на доске, — цилиндр, шестиугольник, параллелограмм, флажок — становятся прямоугольниками, крестик на конце связи — стрелкой.
• Группа в группе становится отдельной рамкой поверх внешней.
• Пределы за одну вставку: до 500 блоков вместе с группами, до 1 000 связей, текст до 200 000 знаков, вложенность групп — до 10 уровней. Больше — окно скажет, что схема слишком большая: вставьте её частями.
• Длинные надписи обрезаются: у блока и группы — до 200 знаков, у связи — до 120, имя блока — не длиннее 200 знаков. Об обрезке окно предупредит.

Частые ошибки и как их исправить#

Окно не молчит: у каждого замечания есть номер строки и кусок текста, на котором разбор споткнулся. Строка с ошибкой пропускается, остальные вставятся. Вот что чаще всего идёт не так.

Предупреждения (жёлтые) — не ошибки: схема вставится, просто что-то будет не так, как в Mermaid. Например, для style и click окно скажет одно и то же:

flowchart LR
  start[Старт] --> finish[Финиш]
  style start fill:#f9f
  click finish href

Советы#

• Начните с примера. Пустое окно → «Вставить пример» → поменяйте надписи на свои. Так быстрее, чем с нуля.
• Имена — короткие и латиницей: start, check, pay. NodePanel понимает и русские имена, но латиница надёжнее, если тот же текст потом пойдёт в GitHub или другой редактор.
• Надпись — один раз, при первом упоминании блока, дальше — только имя. Так меньше опечаток и случайных переименований.
• Одна строка — одна мысль. Развилку и её ветки — отдельными строками: замечание окна сразу укажет, где ошибка.
• Схему из нейросети проверяйте в окне. Справа видно, сколько получится блоков и всё ли понятно, — до того, как схема попадёт на доску.
• После вставки это обычная доска. Двигайте блоки, меняйте цвета и формы, добавляйте стикеры и фото, нажмите «Разложить схему автоматически», если блоков стало больше. Текст Mermaid при этом не меняется — когда нужно, скопируйте доску заново.

• Схема из Mermaid — справочникКоротко: где пункты меню, что во что превращается, пределы.
• Принципы хорошей доскиКак сделать так, чтобы схему понимали с первого взгляда.
• Горячие клавишиВставка, отмена, выделение и всё остальное на доске.