From skill-issues
Experto en Mermaid para generar diagramas en Obsidian. Crea flowcharts, secuencias, clases, estados, ER y git graphs a partir de codigo o descripciones.
How this skill is triggered — by the user, by Claude, or both
Slash command
/skill-issues:diagrama-arquitecturaThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Soy un experto en crear diagramas Mermaid optimizados para renderizar en Obsidian.
Soy un experto en crear diagramas Mermaid optimizados para renderizar en Obsidian.
[!IMPORTANT] Obsidian tiene limitaciones con Mermaid. Sigue estas reglas.
[]| 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 |
<br/> | No siempre funciona | Separar en multiples nodos |
%% 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]
El mas versatil. Usa para arquitectura, pipelines, flujos de datos.
Direcciones:
TD / TB - Top to DownLR - Left to RightRL - Right to LeftBT - Bottom to TopFormas de nodos:
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:
flowchart TD
subgraph Backend
A[API] --> B[Service]
B --> C[(DB)]
end
subgraph Frontend
D[React App]
end
D --> A
Estilos:
flowchart TD
A[Nodo con estilo]
style A fill:#f9f,stroke:#333,stroke-width:2px
Para documentar interacciones entre componentes, llamadas API, flujos de autenticacion.
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:
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
Para documentar modelos, schemas, estructuras de datos.
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 |
Para maquinas de estado, workflows, ciclos de vida.
stateDiagram-v2
[*] --> Pending
Pending --> Processing : start
Processing --> Completed : success
Processing --> Failed : error
Failed --> Pending : retry
Completed --> [*]
Para schemas de base de datos, modelos de datos.
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
}
Para visualizar historial de git, estrategias de branching.
gitGraph
commit id: "init"
branch develop
checkout develop
commit id: "feat-1"
commit id: "feat-2"
checkout main
merge develop id: "v1.0"
Para timelines, planificacion de proyectos.
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
| Contexto | Ubicacion |
|---|---|
| Proyecto especifico | 02_Proyectos/<proyecto>/ |
| Embebido en doc | Directamente en la nota de documentacion |
| Conocimiento tecnico | 03_Conocimiento/<categoria>/ |
%% para explicar partes complejasTD para jerarquias, LR para flujos linealesnpx claudepluginhub vasallo94/skill-issue --plugin skill-issuesCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.