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

​
Почему диаграммы важны

Диаграммы показывают, как проходят данные и как взаимодействуют компоненты. Они полезны, когда ты:
  • Хочешь разобраться с управлением потоком в своей кодовой базе
  • Нужно проследить происхождение данных от входа до выхода
  • Онбордишь других или документируешь систему
Они также отлично подходят для отладки и чтобы задавать более умные вопросы. Визуализации помогают тебе (и модели) увидеть общую картину.

​
Два измерения, которые стоит учитывать

Есть несколько разных ракурсов, о которых стоит подумать:
  • Цель: ты описываешь логику, поток данных, инфраструктуру или что-то ещё?
  • Формат: тебе нужно что-то быстрое (например, диаграмма Mermaid) или формальное (например, UML)?

​
Как задавать запросы

Начни с чёткой цели. Вот несколько распространённых формулировок:
  • Потоки выполнения: «Покажи, как запросы проходят от контроллера до базы данных».
  • Линия происхождения данных: «Проследи эту переменную от места входа до конечной точки».
  • Структура: «Дай компонентный обзор этого сервиса».
Можешь указать начальную и конечную точки или попросить Cursor найти полный путь.

​
Работа с Mermaid

Mermaid легко освоить и он рендерится прямо в Markdown (с подходящим расширением). Cursor может генерировать диаграммы вроде:
  • flowchart для логики и последовательностей
  • sequenceDiagram для взаимодействий
  • classDiagram для структуры объектов
  • graph TD для простых направленных графов
Можно установить расширение Mermaid, чтобы просматривать диаграммы.
  1. Перейди во вкладку Extensions
  2. Найди Mermaid
  3. Установи
Installing Mermaid extension

​
Стратегия работы с диаграммами

Начни с малого. Не пытайся отобразить всё сразу.
  • Выбери одну функцию, маршрут или процесс
  • Попроси Cursor построить диаграмму этой части с помощью Mermaid
  • Когда будет несколько, попроси объединить их
Это соответствует модели C4: начинаешь с низкого уровня (код или компоненты) и поднимаешься к обзорам более высокого уровня.
  1. Начни с подробной низкоуровневой диаграммы
  2. Сверни её до среднего уровня
  3. Повторяй, пока не достигнешь нужной степени абстракции
  4. Попроси Cursor объединить их в одну диаграмму или карту системы

​
Важное

  • Используй диаграммы, чтобы понимать поток, логику и данные
  • Начни с небольших запросов и постепенно расширяй диаграмму
  • Mermaid — самый удобный формат для работы в Cursor
  • Начинай с нижнего уровня и поднимайся к абстракциям, как в модели C4
  • Cursor поможет тебе легко создавать, улучшать и объединять диаграммы