Los diagramas arquitectónicos te ayudan a entender cómo funciona tu sistema. Puedes usarlos para explorar la lógica, rastrear datos y comunicar la estructura. Cursor admite la generación de estos diagramas directamente usando herramientas como Mermaid, para que puedas pasar del código a lo visual en solo unos pocos prompts.
Ejemplo de un diagrama arquitectónico

​
Por qué importan los diagramas

Los diagramas clarifican 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 otros o documentando tu sistema
También son excelentes para depurar y hacer preguntas más inteligentes. Las visualizaciones te ayudan (y al modelo) a ver el panorama general.

​
Dos dimensiones a considerar

Hay algunos ángulos diferentes para pensar:
  • Propósito: ¿Estás mapeando lógica, flujo de datos, infraestructura, o algo más?
  • Formato: ¿Quieres algo rápido (como un diagrama Mermaid) o formal (como UML)?

​
Cómo hacer prompts

Comienza con un objetivo claro. Aquí tienes algunas formas comunes de preguntar:
  • Control de flujo: “Muéstrame cómo van las solicitudes desde el controlador hasta la base de datos.”
  • Linaje de datos: “Rastrea 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.

​
Trabajando con Mermaid

Mermaid es simple de aprender y se renderiza directamente en Markdown (con la extensión correcta). 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 diagramas.
  1. Ve a la pestaña de Extensiones
  2. Busca Mermaid
  3. Instala
Instalando la extensión de Mermaid

​
Estrategia de diagramas

Comienza pequeño. No intentes mapear todo de una vez.
  • Elige una función, ruta o proceso
  • Pide a Cursor que diagrame esa parte usando Mermaid
  • Una vez que tengas algunos, pídele que los combine
Esto refleja el modelo C4 – donde comienzas en un nivel bajo (código o componentes) y trabajas hacia arriba para obtener vistas generales de nivel superior.

​
Flujo recomendado

  1. Comienza con un diagrama detallado de bajo nivel
  2. Resúmelo en una vista de nivel medio
  3. Repite hasta alcanzar el nivel de abstracción que deseas
  4. Pide a Cursor que los fusione en un solo diagrama o mapa del sistema

​
Conclusiones clave

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