Pular para o conteúdo principal
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 permite gerar esses diagramas diretamente com ferramentas como o Mermaid, então dá pra ir do código pro visual em só alguns prompts.
Exemplo de um diagrama de arquitetura

​
Por que diagramas importam

Diagramas deixam claro 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 dos dados da entrada até a saída
  • Tá onboardando outras pessoas ou documentando seu sistema
Eles também são ótimos pra depurar e fazer perguntas mais inteligentes. Os visuais ajudam você (e o modelo) a enxergar o panorama geral.

​
Duas dimensões a considerar

Tem alguns ângulos diferentes pra pensar:
  • Propósito: tá mapeando lógica, fluxo de dados, infraestrutura ou outra coisa?
  • Formato: quer algo rápido (tipo um diagrama 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.”
  • Linhas de dados: “Rastreia essa variável desde a entrada até onde ela termina.”
  • Estrutura: “Me dá uma visão em nível de componentes 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 diretamente em 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
Você pode instalar a extensão Mermaid para pré-visualizar diagramas.
  1. Vai na aba Extensions
  2. Busca 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 – onde você começa num nível baixo (código ou componentes) e sobe para visões de nível mais alto.
  1. Começa com um diagrama detalhado e de baixo nível
  2. Resume para 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 pra entender fluxo, lógica e dados
  • Começa com prompts pequenos e vai expandindo teu diagrama a partir daí
  • Mermaid é o formato mais fácil de usar no Cursor
  • Começa no baixo nível e vai abstraindo, como no modelo C4
  • O Cursor pode te ajudar a gerar, refinar e combinar diagramas com facilidade