Unified Modeling Language = El lenguaje universal para diseñar software ANTES de programarlo.
"Voy a hacer una API de usuarios..." [empieza a codear Controller] [se da cuenta que necesita validación] [añade Service] [se da cuenta que necesita BD] [refactoriza todo] [3 horas después: "debí haber pensado esto antes"]
1. Diseñas la arquitectura en 15 min 2. Ves las capas, relaciones, flujos 3. Detectas problemas ANTES de codear 4. Codeas con claridad → menos refactoring
Usuario -------- - id: Long - email: String - password: String -------- + login() + register()
Usuario → Controller → Service → Repository → BD
(POST) (validar) (guardar) (INSERT)
Frontend (React)
↓
API REST (Spring Boot)
↓
Base de Datos (PostgreSQL)
.xml o .asta que nadie puede abrirLos diagramas son texto (código) que se renderiza visualmente.
"Markdown para diagramas". Es sintaxis de texto que se convierte en diagramas.
```mermaid
classDiagram
class Usuario {
+Long id
+String email
+login()
}
```
| Herramienta | Pros | Contras | Uso Recomendado |
|---|---|---|---|
| Eraser.io |
✅ IA desde prompts ✅ Estilo profesional ✅ Colaboración real-time |
❌ No está en Git | Presentaciones, arquitectura compleja |
| Whimsical AI |
✅ IA para wireframes ✅ Muy visual |
❌ No es código | Diseño inicial de interfaces |
| PlantUML |
✅ Más potente ✅ Más tipos de diagramas |
⚠️ Sintaxis compleja ❌ Menos integración |
Proyectos enterprise que ya lo usan |
| Excalidraw | ✅ Estilo sketch |
❌ Manual ❌ No IA |
Brainstorming inicial, wireframes casuales |
Tú → 30 min dibujando cajitas en Draw.io Tú → Ajustando flechas manualmente Tú → Exportando imagen Tú → Olvidando actualizar cuando cambias el código
Tú → "Analiza mi proyecto y crea un diagrama de clases" IA → [genera Mermaid en 10 segundos] Tú → Revisas, ajustas, acepta Tú → git commit -m "docs: add class diagram"
❌ Mal:
"Hazme un diagrama"
✅ Bien:
"Analiza src/domain/ y crea un diagrama de clases mostrando las relaciones entre entidades"
✅ "Diagrama de secuencia para el flujo de login" ✅ "Diagrama de arquitectura hexagonal"
✅ "Genera un diagrama Mermaid de clases"
"Añade colores a las capas" "Muestra solo las clases públicas" "Simplifica, demasiado detalle"
Tú piensas: "Necesito un módulo de autenticación con JWT"
En Cursor Agent Mode: "Crea un diagrama de secuencia Mermaid mostrando el flujo: 1. Usuario hace POST /login 2. Controller valida credenciales 3. AuthService genera JWT 4. Responde con token Guárdalo en docs/diagrams/auth-flow.md"
Verificas: - ¿Tiene sentido el flujo? - ¿Falta algún paso? - ¿Es legible?
"Añade el caso de error cuando las credenciales son inválidas"
Ahora SÍ, con el mapa claro, codeas rápido y sin dudar.
Con UML:
11 min de diseño + 30 min de código = 41 minutos de trabajo estructurado
Sin UML:
1 hora de código + 30 min de refactoring = 90 minutos de frustración
Mira cómo se documenta la arquitectura de un proyecto real con Spring Boot + React usando diagramas Mermaid:
Incluye:
docs/diagrams/No es burocracia, es ahorro de tiempo
Vive en Git, la IA lo entiende
Pero TÚ revisas, TÚ decides
15 min de diseño > 3 horas de refactoring
| Término | Significado |
|---|---|
| UML | Unified Modeling Language - Lenguaje de modelado de software |
| Diagrama de Clases | Muestra estructura: clases, atributos, métodos, relaciones |
| Diagrama de Secuencia | Muestra flujo temporal de interacciones entre componentes |
| Diagrama de Componentes | Muestra arquitectura: capas, módulos, dependencias |
| Mermaid | Sintaxis de texto para crear diagramas (Diagrams as Code) |
| Diagrams as Code | Filosofía de escribir diagramas como código versionable |
| PlantUML | Alternativa a Mermaid, más potente pero compleja |
| Eraser.io | Herramienta visual con IA para diagramas técnicos |
Recordad:
"Eres arquitecta. La IA es tu asistente de dibujo técnico. 🏗️✨"
No memorices sintaxis, entiende los conceptos:
Vosotras sois arquitectas, no solo programadoras. 🚀