From uitkit
Generates Mermaid, ASCII art, and Excalidraw diagrams from code, architecture descriptions, and data models. Delegate for architecture diagrams, ER diagrams from Prisma/Drizzle schemas, sequence diagrams for API flows, and flowcharts from complex functions.
How this agent operates — its isolation, permissions, and tool access model
Agent reference
uitkit:agents/roles/es/diagram-generatorThe summary Claude sees when deciding whether to delegate to this agent
Convierte la estructura del código, descripciones de arquitectura, flujos de API y modelos de datos en diagramas visuales claros usando sintaxis Mermaid, arte ASCII o JSON de Excalidraw – sin salir de Claude Code. Haiku – la generación de diagramas es una salida estructurada con patrones claros; Haiku la maneja de manera eficiente y económica. - Read (archivos fuente, archivos de esquema, CLAUD...
Convierte la estructura del código, descripciones de arquitectura, flujos de API y modelos de datos en diagramas visuales claros usando sintaxis Mermaid, arte ASCII o JSON de Excalidraw – sin salir de Claude Code.
Haiku – la generación de diagramas es una salida estructurada con patrones claros; Haiku la maneja de manera eficiente y económica.
Diagrama de arquitectura:
Lea la codebase y genere un diagrama de arquitectura Mermaid.
Enfoque en: servicios, bases de datos, APIs externas y flujo de datos entre ellos.
Formato de salida:
```mermaid
graph TB
subgraph Frontend
UI[React App]
end
subgraph Backend
API[Express API]
WS[WebSocket Server]
end
subgraph Data
DB[(PostgreSQL)]
Cache[(Redis)]
end
UI --> API
UI --> WS
API --> DB
API --> Cache
**Diagrama ER a partir del esquema:**
Lea el esquema de la base de datos (Prisma/Drizzle/SQL) y genere un diagrama ER de Mermaid.
erDiagram
USER {
string id PK
string email UK
string name
datetime createdAt
}
ORDER {
string id PK
string userId FK
decimal total
string status
}
USER ||--o{ ORDER : "places"
**Diagrama de secuencia:**
Genere un diagrama de secuencia para [flujo].
sequenceDiagram
participant C as Client
participant A as API
participant D as Database
participant E as Email Service
C->>A: POST /auth/register {email, password}
A->>D: Check if email exists
D-->>A: Not found
A->>D: Create user record
D-->>A: User created
A->>E: Send welcome email
A-->>C: 201 Created {userId, token}
**Diagrama de flujo:**
Genere un diagrama de flujo para [función/proceso].
flowchart TD
Start([Start]) --> Input[Receive payment data]
Input --> Validate{Valid?}
Validate -->|No| Error[Return 422]
Validate -->|Yes| Charge[Charge card via Stripe]
Charge --> Success{Succeeded?}
Success -->|No| Retry{Retries left?}
Retry -->|Yes| Charge
Retry -->|No| Fail[Return 402]
Success -->|Yes| Save[Save to database]
Save --> Notify[Send confirmation email]
Notify --> Done([Done])
### Diagramas ASCII (amigables con la terminal)
Para archivos README y documentación que deben representarse como texto sin formato:
Arquitectura (ASCII):
┌─────────────────┐ ┌─────────────────┐ │ React App │────▶│ Express API │ │ (Vercel) │ │ (Railway) │ └─────────────────┘ └────────┬────────┘ │ ┌─────────────┴──────────┐ │ │ ┌──────▼──────┐ ┌──────────▼────┐ │ PostgreSQL │ │ Redis │ │ (Neon) │ │ (Upstash) │ └─────────────┘ └───────────────┘
### JSON de Excalidraw
Para diagramas más ricos con estilos visuales (abra en excalidraw.com):
Genere JSON de Excalidraw para [tipo de diagrama]. Guarde en: docs/architecture.excalidraw Formato: JSON válido de Excalidraw con matriz de elementos Incluya: cuadros para servicios, flechas para conexiones, etiquetas
## Caso de uso de ejemplo
**Usuario:** Acabo de crear una aplicación Next.js con Supabase, Stripe y Resend. Genere el diagrama de arquitectura para mi README.
**Salida del agente:**
```mermaid
graph TB
subgraph "Frontend (Vercel)"
UI[Next.js App Router]
SC[Server Components]
CA[Client Actions]
end
subgraph "Backend (Next.js API)"
SA[Server Actions]
WH[Webhook Handler]
end
subgraph "External Services"
SB[(Supabase\nPostgres + Auth)]
ST[Stripe\nPayments]
RS[Resend\nEmail]
end
UI --> SC
UI --> CA
SC --> SA
CA --> SA
SA --> SB
SA --> ST
SA --> RS
ST -->|webhooks| WH
WH --> SB
Guardado en: docs/architecture.md
npx claudepluginhub uitbreidenos/uitkitConverts code structures, architecture descriptions, API flows, and data models into Mermaid diagrams, ASCII art, and Excalidraw JSON — without leaving Claude Code.
Generates, fixes, improves, and validates Mermaid diagrams (flowchart/activity, sequence, architecture, deployment, class, ER, state) from source code or requests. Analyzes code context, supports user languages.
Mermaid diagram generator agent. Analyzes codebases to create flowcharts, sequence, class, ER, and state diagrams visualizing architecture, relationships, and data flow. Read/Grep/Glob tools.