Pular para o conteúdo principalDiagramas 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.
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)?
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.
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.
- Vai na aba Extensions
- Busca por Mermaid
- Instala
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.
- Começa com um diagrama detalhado e de baixo nível
- Resume para uma visão de nível intermediário
- Repete até chegar no nível de abstração que você quer
- Pede pro Cursor mesclar tudo em um único diagrama ou mapa do sistema
- 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