Почему Cursor + Mermaid — рабочая пара
Cursor видит контекст всего проекта: структуру папок, именование переменных, паттерны кода. Когда вы просите блок-схему, он не гадает — он считывает реальную логику функций, условных переходов и циклов.
Mermaid.js рендерится прямо в Markdown-файлах, GitHub, GitLab, Notion, Obsidian и документации. Никаких внешних инструментов, экспортов картинок или ручного рисования стрелочек.
Результат: живая диаграмма в репозитории, которая обновляется вместе с кодом.
Анатомия промта, который работает
Хороший промт для диаграмм — это не просьба «нарисуй схему», а техническое задание с жёсткими ограничениями. Ниже — скелет, который покрывает 90% случаев.
Role + Context
Задаёт персону и привязку к кодовой базе. Cursor использует контекст открытых файлов.
Requirements
Жёсткие правила синтаксиса, именования, группировки и стилей. Исключает «творчество» модели.
Algorithm Description
Вставляете код, псевдокод или шаги. Чем точнее вход — тем точнее схема.
Example Format
Феw-shot образец. Фиксирует ожидаемый стиль классов, кликабельные ссылки, сабграфы.
Три вариации под тип задачи
Типичные сбои и как их чинить
Продвинутые приёмы: сабграфы, стили, навигация
Сабграфы как архитектурные слои
Группируйте узлы не произвольно, а по слоям ответственности: Validation → Processing → Persistence → Notification. Внутри сабграфа — только узлы этого слоя. Переходы между сабграфами показывают контракты.
subgraph Validation
proc_check_input[Check input]
dec_valid{Valid?}
end
subgraph Processing
proc_transform[Transform]
dec_retry{Retry?}
end
subgraph Persistence
proc_save[Save to DB]
io_event[Emit Event]
endКлассовые стили для темной и светлой темы
Определяйте 4 класса через `classDef`. Используйте CSS-переменные Mermaid — они уважают настройки темы просмотрщика.
classDef proc fill:var(--mermaid-bg-process, #1A1A1A),
color:var(--mermaid-fg-process, #FFFFFF),
stroke:var(--mermaid-stroke-process, #D80621);
classDef dec fill:var(--mermaid-bg-decision, #D80621),
color:var(--mermaid-fg-decision, #FFFFFF),
stroke:var(--mermaid-stroke-decision, #B50518);
classDef io fill:var(--mermaid-bg-io, #FFF0F1),
color:var(--mermaid-fg-io, #1A1A1A),
stroke:var(--mermaid-stroke-io, #E53348);
classDef err fill:var(--mermaid-bg-error, #FFF0F0),
color:var(--mermaid-fg-error, #B50518),
stroke:var(--mermaid-stroke-error, #D80621),
stroke-dasharray: 5 5;Назначайте классы: `class nodeID proc;`. Для ошибок — пунктирная рамка `stroke-dasharray`.
Кликабельные узлы → навигация по коду
Самая ценная фича для ревью: клик по узлу открывает файл в IDE или на GitHub. Два подхода:
- Локально (Cursor): `click proc_validate «../src/validator.ts#L12″` — относительный путь от .md файла.
- В репозитории (GitHub/GitLab): `click proc_validate «https://github.com/org/repo/blob/main/src/validator.ts#L12″` — абсолютный URL.
Детали, экономящие часы правок
Используйте @-ссылки в Cursor
В чате наберите `@file:src/module.ts` — Cursor подтянет контент файла в контекст. Промт становится короче, точность — выше.
Итеративное уточнение
Первый вариант редко идеален. Пишите следом: «Fix: node IDs must follow prefix convention. Add missing error branch. Move retry logic into subgraph.» Курсор поправляет точечно.
Экспорт в документацию
Сохраняйте `.mmd` файлы рядом с кодом. MkDocs, Docusaurus, VitePress рендерят их нативно. CI может проверять валидность: `mermaid-cli -i diagram.mmd -o /dev/null`.
Версионируйте схемы
Коммитьте `.mmd` в тот же PR, что меняет логику. Ревьюер видит diff диаграммы рядом с diff кода. Никаких устаревших картинок в вики.