# Diagrama Arquitectura
> Experto en Mermaid para generar diagramas en Obsidian. Crea flowcharts, secuencias, clases, estados, ER y git graphs a partir de codigo o descripciones.
- Skill: `vasallo94/diagrama-arquitectura` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vasallo94/diagrama-arquitectura`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vasallo94/diagrama-arquitectura/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Vasallo94 (https://skillmd.com/u/vasallo94)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vasallo94/diagrama-arquitectura
---
# Mermaid Expert para Obsidian
Soy un experto en crear diagramas Mermaid optimizados para renderizar en Obsidian.
## Cuando usar esta skill
- Visualizar flujos de datos o procesos
- Documentar arquitectura de sistemas
- Mostrar relaciones entre clases/modulos
- Crear diagramas de secuencia de APIs
- Modelar estados de una maquina de estados
- Documentar esquemas de base de datos
## Reglas Criticas para Obsidian
> [!IMPORTANT]
> Obsidian tiene limitaciones con Mermaid. Sigue estas reglas.
### Caracteres a EVITAR dentro de nodos `[]`
| Evitar | Problema | Solucion |
|--------|----------|----------|
| `()` | Rompe el parser | Mover a etiqueta de flecha o texto externo |
| `:` al inicio | Interpretado como directiva | Usar numeros: `1.` en lugar de `:00` |
| `"` escapadas | Inconsistente | Usar nodos sin comillas cuando sea posible |
| `
` | No siempre funciona | Separar en multiples nodos |
### Sintaxis segura para nodos
```mermaid
%% CORRECTO - nodos simples
flowchart TD
A[Inicio] --> B[Proceso]
B --> C[Fin]
%% CORRECTO - detalles en etiquetas de flechas
flowchart TD
A[API] -->|POST /users| B[Controller]
B -->|query| C[Database]
%% INCORRECTO - parentesis dentro del nodo
flowchart TD
A[raw/ (audios)] --> B[process]
```
---
## Tipos de Diagramas
### 1. Flowchart (Diagrama de Flujo)
El mas versatil. Usa para arquitectura, pipelines, flujos de datos.
**Direcciones:**
- `TD` / `TB` - Top to Down
- `LR` - Left to Right
- `RL` - Right to Left
- `BT` - Bottom to Top
**Formas de nodos:**
```mermaid
flowchart TD
A[Rectangulo] --> B(Rectangulo redondeado)
B --> C{Rombo - decision}
C --> D[(Base de datos)]
C --> E((Circulo))
E --> F[[Subrutina]]
F --> G>Flag]
```
**Subgraphs:**
```mermaid
flowchart TD
subgraph Backend
A[API] --> B[Service]
B --> C[(DB)]
end
subgraph Frontend
D[React App]
end
D --> A
```
**Estilos:**
```mermaid
flowchart TD
A[Nodo con estilo]
style A fill:#f9f,stroke:#333,stroke-width:2px
```
---
### 2. Sequence Diagram (Diagrama de Secuencia)
Para documentar interacciones entre componentes, llamadas API, flujos de autenticacion.
```mermaid
sequenceDiagram
participant U as Usuario
participant F as Frontend
participant A as API
participant D as Database
U->>F: Click login
F->>A: POST /auth/login
A->>D: SELECT user
D-->>A: User data
A-->>F: JWT token
F-->>U: Redirect dashboard
```
**Tipos de flechas:**
| Sintaxis | Significado |
|----------|-------------|
| `->>` | Linea solida con flecha |
| `-->>` | Linea punteada con flecha |
| `->` | Linea solida sin flecha |
| `-->` | Linea punteada sin flecha |
**Bloques:**
```mermaid
sequenceDiagram
participant A as Service A
participant B as Service B
loop Cada 5 minutos
A->>B: Health check
B-->>A: OK
end
alt Si error
A->>A: Retry
else Si OK
A->>B: Continuar
end
opt Opcional
A->>B: Log evento
end
```
---
### 3. Class Diagram (Diagrama de Clases)
Para documentar modelos, schemas, estructuras de datos.
```mermaid
classDiagram
class User {
+String id
+String email
-String password
+login()
+logout()
}
class Order {
+String id
+Date created
+calculate_total()
}
User "1" --> "*" Order : places
```
**Relaciones:**
| Sintaxis | Tipo |
|----------|------|
| `<\|--` | Herencia |
| `*--` | Composicion |
| `o--` | Agregacion |
| `-->` | Asociacion |
| `..>` | Dependencia |
---
### 4. State Diagram (Diagrama de Estados)
Para maquinas de estado, workflows, ciclos de vida.
```mermaid
stateDiagram-v2
[*] --> Pending
Pending --> Processing : start
Processing --> Completed : success
Processing --> Failed : error
Failed --> Pending : retry
Completed --> [*]
```
---
### 5. ER Diagram (Entidad-Relacion)
Para schemas de base de datos, modelos de datos.
```mermaid
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : includes
USER {
string id PK
string email UK
string name
date created_at
}
```
---
### 6. Git Graph
Para visualizar historial de git, estrategias de branching.
```mermaid
gitGraph
commit id: "init"
branch develop
checkout develop
commit id: "feat-1"
commit id: "feat-2"
checkout main
merge develop id: "v1.0"
```
---
### 7. Gantt Chart
Para timelines, planificacion de proyectos.
```mermaid
gantt
title Proyecto MVP
dateFormat YYYY-MM-DD
section Diseno
Wireframes :done, d1, 2024-01-01, 7d
UI Design :active, d2, after d1, 14d
section Desarrollo
Backend API :d3, after d2, 21d
Frontend :d4, after d2, 28d
section Testing
QA :d5, after d4, 14d
```
---
## Flujo de Trabajo
1. **Analizar** - Entender que se quiere visualizar
2. **Elegir tipo** - Seleccionar el diagrama mas apropiado
3. **Extraer info** - Del codigo fuente o descripcion
4. **Generar** - Codigo Mermaid valido para Obsidian
5. **Validar** - Revisar caracteres problematicos
6. **Insertar** - En la nota correspondiente
## Ubicaciones en el Vault
| Contexto | Ubicacion |
|----------|-----------|
| Proyecto especifico | `02_Proyectos//` |
| Embebido en doc | Directamente en la nota de documentacion |
| Conocimiento tecnico | `03_Conocimiento//` |
## Buenas Practicas
1. **Simplicidad** - Maximo 15-20 nodos por diagrama
2. **Nombres claros** - Nodos descriptivos, sin abreviaturas cripticas
3. **Jerarquia** - Usar subgraphs para agrupar componentes relacionados
4. **Etiquetas** - Usar labels en flechas para dar contexto
5. **Comentarios** - `%%` para explicar partes complejas
6. **Direccion** - `TD` para jerarquias, `LR` para flujos lineales