Los diagramas de arquitectura te ayudan a entender cómo funciona tu sistema. Puedes usarlos para explorar la lógica, seguir el flujo de datos y comunicar la estructura. Cursor permite generar estos diagramas directamente con herramientas como Mermaid, así puedes pasar de código a visual en solo unos cuantos prompts.
Ejemplo de un diagrama de arquitectura

​
Por qué importan los diagramas

Los diagramas aclaran cómo fluyen los datos y cómo interactúan los componentes. Son útiles cuando:
  • Quieres entender el control de flujo en tu base de código
  • Necesitas rastrear el linaje de datos desde la entrada hasta la salida
  • Estás incorporando a otras personas o documentando tu sistema
También son muy útiles para depurar y hacer preguntas más inteligentes. Las visualizaciones te ayudan a ti (y al modelo) a ver el panorama general.

​
Dos dimensiones a considerar

Hay algunas formas distintas de abordarlo:
  • Propósito: ¿Estás mapeando lógica, flujo de datos, infraestructura o algo más?
  • Formato: ¿Quieres algo rápido (como un diagrama de Mermaid) o algo formal (como UML)?

​
Cómo crear prompts

Empieza con un objetivo claro. Aquí tienes algunas formas comunes de preguntar:
  • Control de flujo: “Muéstrame cómo las solicitudes pasan del controlador a la base de datos.”
  • Linaje de datos: “Sigue esta variable desde donde entra hasta donde termina.”
  • Estructura: “Dame una vista a nivel de componentes de este servicio.”
Puedes incluir puntos de inicio y fin, o pedirle a Cursor que encuentre la ruta completa.

​
Trabajar con Mermaid

Mermaid es fácil de aprender y se renderiza directamente en Markdown (con la extensión adecuada). Cursor puede generar diagramas como:
  • flowchart para lógica y secuencias
  • sequenceDiagram para interacciones
  • classDiagram para estructura de objetos
  • graph TD para mapas direccionales simples
Puedes instalar la extensión de Mermaid para previsualizar los diagramas.
  1. Ve a la pestaña Extensions
  2. Busca Mermaid
  3. Instálala
Instalando la extensión de Mermaid

​
Estrategia para diagramas

Empieza en pequeño. No intentes mapear todo de una sola vez.
  • Elige una función, ruta o proceso
  • Pídele a Cursor que diagrame esa parte usando Mermaid
  • Cuando tengas varias, pídele que las combine
Esto refleja el modelo C4: empiezas en un nivel bajo (código o componentes) y vas subiendo hacia vistas de nivel más alto.
  1. Empieza con un diagrama detallado y de bajo nivel
  2. Resúmelo en una vista de nivel medio
  3. Repite hasta alcanzar el nivel de abstracción que quieras
  4. Pídele a Cursor que las fusione en un solo diagrama o mapa del sistema

​
Conclusiones

  • Usa diagramas para entender el flujo, la lógica y los datos
  • Empieza con prompts pequeños y ve ampliando tu diagrama desde ahí
  • Mermaid es el formato más fácil de usar en Cursor
  • Comienza a bajo nivel y ve abstrayendo hacia arriba, igual que en el modelo C4
  • Cursor puede ayudarte a generar, refinar y combinar diagramas con facilidad