Diagramas arquiteturais ajudam você a entender como seu sistema funciona. Você pode usá-los para explorar lógica, rastrear dados e comunicar estrutura. O Cursor suporta a geração desses diagramas diretamente usando ferramentas como Mermaid, para que você possa ir do código ao visual em apenas alguns prompts.
Exemplo de um diagrama arquitetural

​
Por que diagramas importam

Diagramas esclarecem como os dados fluem e como os componentes interagem. Eles são úteis quando você:
  • Quer entender o controle de fluxo na sua base de código
  • Precisa rastrear a linhagem de dados da entrada até a saída
  • Está integrando outras pessoas ou documentando seu sistema
Eles também são ótimos para depuração e para fazer perguntas mais inteligentes. Elementos visuais ajudam você (e o modelo) a ver o panorama geral.

​
Duas dimensões a considerar

Existem alguns ângulos diferentes para pensar:
  • Propósito: Você está mapeando lógica, fluxo de dados, infraestrutura ou algo mais?
  • Formato: Você quer algo rápido (como um diagrama Mermaid) ou formal (como UML)?

​
Como fazer prompts

Comece com um objetivo claro. Aqui estão algumas maneiras comuns de perguntar:
  • Controle de fluxo: “Mostre-me como as requisições vão do controller para o banco de dados.”
  • Linhagem de dados: “Rastreie esta variável de onde ela entra até onde ela termina.”
  • Estrutura: “Me dê uma visão em nível de componente deste serviço.”
Você pode incluir pontos de início e fim, ou pedir ao Cursor para encontrar o caminho completo.

​
Trabalhando com Mermaid

Mermaid é simples de aprender e renderiza diretamente em Markdown (com a extensão correta). O Cursor pode gerar diagramas como:
  • flowchart para lógica e sequências
  • sequenceDiagram para interações
  • classDiagram para estrutura de objetos
  • graph TD para mapas direcionais simples
Você pode instalar a extensão Mermaid para visualizar diagramas.
  1. Vá para a aba Extensions
  2. Procure por Mermaid
  3. Instale
Instalando extensão Mermaid

​
Estratégia de diagramas

Comece pequeno. Não tente mapear tudo de uma vez.
  • Escolha uma função, rota ou processo
  • Peça ao Cursor para diagramar essa parte usando Mermaid
  • Depois de ter alguns, peça para combiná-los
Isso espelha o modelo C4 – onde você começa em um nível baixo (código ou componentes) e trabalha para cima até visões gerais de nível mais alto.

​
Fluxo recomendado

  1. Comece com um diagrama detalhado de baixo nível
  2. Resuma-o em uma visão de nível médio
  3. Repita até alcançar o nível de abstração desejado
  4. Peça ao Cursor para mesclá-los em um único diagrama ou mapa do sistema

​
Principais Pontos

  • Use diagramas para entender fluxo, lógica e dados
  • Comece com prompts pequenos e desenvolva seu diagrama a partir daí
  • Mermaid é o formato mais fácil de trabalhar no Cursor
  • Comece em baixo nível e abstraia para cima, assim como no modelo C4
  • O Cursor pode ajudá-lo a gerar, refinar e combinar diagramas com facilidade