¿Qué hace architecture?
Crea diagramas de arquitectura de sistemas en capas usando plantillas HTML/CSS con niveles codificados por colores y diseños de cuadrícula. Ideal para pilas tecnológicas, topología de microservicios y diseño de aplicaciones de múltiples capas.
Sintaxis
Para crear un diagrama de arquitectura, usa el siguiente formato en tu Markdown:
```architecture
Nombre del Sistema
Capa 1: [Componente1] [Componente2] [Componente3]
Capa 2: [ComponenteA] [ComponenteB]
Capa 3: [ComponenteX]
### Parámetros
- **Nombre del Sistema**: Título opcional del diagrama.
- **Capas**: Define una o más capas, cada una en una línea nueva. El nombre de la capa va antes de los dos puntos `:`. Los componentes se listan entre corchetes `[]` separados por espacios.
- **Colores**: Los niveles se asignan automáticamente con colores predefinidos, pero se pueden personalizar agregando un color en formato hexadecimal después del nombre de la capa (ej. `Capa 1 (#ff5733): [Componente1]`).
### Ejemplo
```markdown
```architecture
Sistema de Reservas
Frontend: [React App] [Webpack]
Backend: [Node.js] [Express] [Base de Datos]
Infraestructura: [Docker] [Kubernetes] [AWS]
Esto generará un diagrama con tres capas (Frontend, Backend, Infraestructura) y sus respectivos componentes.
## Salida
El skill renderiza el diagrama como HTML incrustado en tu Markdown. El HTML incluye estilos CSS que se encargan del diseño de cuadrícula, los colores de los niveles y la disposición de los componentes.
## Plataformas Soportadas
- Cualquier visor de Markdown que admita HTML (como GitHub, GitLab, Typora, etc.)
- No requiere plugins adicionales; todo el CSS está inline en el HTML generado.
## Personalización
- **Colores**: Puedes cambiar el color de cada capa usando un código hexadecimal después del nombre de la capa (ej. `Capa 2 (#00ff00): [ComponenteA]`).
- **Diseño**: Los componentes se distribuyen automáticamente en una cuadrícula flexible. Si necesitas más control, puedes ajustar el CSS inline que genera el skill (aunque esto se recomienda solo para usuarios avanzados).
## Notas
- Los nombres de los componentes deben ser cortos para que quepan bien en la cuadrícula.
- Si hay muchos componentes en una capa, se ajustarán automáticamente en varias filas.
- El diagrama es responsive y se adapta al ancho de la ventana.
## Ejemplo Completo
```markdown
```architecture
Aplicación Web
Presentación: [Next.js] [Tailwind CSS]
Lógica de Negocio: [API Gateway] [Microservicio A] [Microservicio B]
Datos: [PostgreSQL] [Redis] [S3]
Este ejemplo generará un diagrama de tres capas para una aplicación web moderna.