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

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

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

​
Два измерения для рассмотрения

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

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

Начните с четкой цели. Вот несколько распространенных способов задать вопрос:
  • Управление потоком: “Покажи мне, как запросы идут от контроллера к базе данных.”
  • Происхождение данных: “Проследи эту переменную от места входа до места назначения.”
  • Структура: “Дай мне представление этого сервиса на уровне компонентов.”
Вы можете указать начальную и конечную точки или попросить Cursor найти полный путь.

​
Работа с Mermaid

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

​
Стратегия создания диаграмм

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

​
Рекомендуемый процесс

  1. Начните с детальной диаграммы низкого уровня
  2. Обобщите её в представление среднего уровня
  3. Повторяйте до достижения нужного уровня абстракции
  4. Попросите Cursor объединить их в единую диаграмму или карту системы

​
Выводы

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