Diagram Design
Descripción
Genera diagramas de estilo editorial desde una skill para Claude Code, Codex, GitHub Copilot, Factory Droid, Pi y otros hosts compatibles con Agent Skills. Cada pieza sale como HTML + SVG autocontenido: lo abres en el navegador, sin paso de build, sin JavaScript y sin imágenes externas.
Tipos, variantes y fuentes
- 42 tipos: arquitectura, diagrama de flujo, secuencia, máquina de estados, modelo ER, línea de tiempo, carriles, cuadrante, radar, bucle/flywheel, árbol, organigrama, capas, Sankey, Ishikawa, mapa de Wardley, kanban, journey, despliegue, grafo de dependencias, clases UML, story map y esquema de base de datos, entre otros.
- Tres variantes estáticas por tipo: minimal light, minimal dark y full-editorial. El HTML estático es el valor por defecto; hay motion opcional para explicaciones ordenadas.
- Redibuja orígenes de draw.io, Mermaid o Excalidraw al formato, tamaño y nivel de detalle que indiques.
Los patrones semánticos separan el comportamiento del layout, así una cola, un rastro de política o un límite de confianza reutiliza el tipo más cercano sin inflar el catálogo. Lee tu web para adaptar la paleta a tu marca en unos 60 segundos. Cada nodo tiene que ganarse el sitio; el color de acento queda para las 1–2 cosas que el lector debe mirar primero. Sin sombras, sin Figma y sin cajas genéricas.
Tecnologías y temas
-
42 tipos de diagrama
Arquitectura, ER, UML, Sankey, Wardley, flywheels, kanban y más, cada uno en light, dark y editorial.
-
HTML + SVG autocontenido
Sin build, sin JavaScript ni imágenes externas: abres el archivo en el navegador.
-
Marca desde tu web
Lee el sitio y aplica paleta editorial en alrededor de un minuto, sin Figma.
-
Mermaid, draw.io y Excalidraw
Redibuja esas fuentes al formato, tamaño y detalle que elijas.
-
Skills para agentes
Claude Code, Codex, Copilot, Factory Droid, Pi y hosts compatibles con Agent Skills.