Diagramas de arquitetura ajudam a entender como teu sistema funciona. Dá pra usar eles pra explorar a lógica, rastrear dados e comunicar a estrutura. O Cursor gera esses diagramas direto com ferramentas como o Mermaid, então tu pode ir do código pro visual em só alguns prompts.
Exemplo de um diagrama de arquitetura

​
Por que diagramas são importantes

Diagramas deixam claro como os dados fluem e como os componentes interagem. Eles são úteis quando você:
  • Quer entender o fluxo de controle na sua base de código
  • Precisa rastrear a linhagem dos dados da entrada até a saída
  • Tá fazendo onboarding de outras pessoas ou documentando seu sistema
Eles também são ótimos para depurar e fazer perguntas mais inteligentes. Os visuais ajudam você (e o modelo) a enxergar o panorama geral.

​
Duas dimensões para considerar

Tem alguns ângulos diferentes pra pensar:
  • Propósito: você tá mapeando lógica, fluxo de dados, infraestrutura ou outra coisa?
  • Formato: você quer algo rápido (tipo um diagrama em Mermaid) ou formal (tipo UML)?

​
Como criar prompts

Começa com um objetivo claro. Aqui vão algumas formas comuns de pedir:
  • Controle de fluxo: “Me mostra como as requisições vão do controller até o banco de dados.”
  • Linhagem de dados: “Rastreia essa variável desde onde ela entra até onde ela termina.”
  • Estrutura: “Me dá uma visão em nível de componente desse serviço.”
Você pode incluir pontos de início e de fim ou pedir pro Cursor encontrar o caminho completo.

​
Trabalhando com Mermaid

Mermaid é fácil de aprender e renderiza direto no Markdown (com a extensão certa). 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
Tu pode instalar a extensão Mermaid pra pré-visualizar diagramas.
  1. Vai na aba Extensions
  2. Procura por Mermaid
  3. Instala
Instalando a extensão Mermaid

​
Estratégia de diagramas

Começa pequeno. Não tenta mapear tudo de uma vez.
  • Escolhe uma função, rota ou processo
  • Pede pro Cursor diagramar essa parte usando Mermaid
  • Quando tiver algumas, pede pra ele combinar
Isso espelha o modelo C4 – você começa em um nível baixo (código ou componentes) e vai subindo até visões de nível mais alto.
  1. Começa com um diagrama detalhado e de baixo nível
  2. Resume em uma visão de nível intermediário
  3. Repete até chegar no nível de abstração que você quer
  4. Pede pro Cursor mesclar tudo em um único diagrama ou mapa do sistema

​
Principais pontos

  • Usa diagramas para entender o fluxo, a lógica e os dados
  • Começa com prompts pequenos e vai ampliando teu diagrama a partir daí
  • Mermaid é o formato mais fácil de usar no Cursor
  • Começa em baixo nível e vai abstraindo para cima, como no modelo C4
  • O Cursor pode te ajudar a gerar, refinar e combinar diagramas com facilidade