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

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

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

​
Два аспекта, которые стоит учитывать

Есть несколько разных ракурсов, с которых можно посмотреть:
  • Цель: ты отображаешь логику, поток данных, инфраструктуру или что-то ещё?
  • Формат: нужно что-то быстрое (например, диаграмма 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 поможет легко генерировать, улучшать и комбинировать диаграммы