Archify — diagramas de arquitectura verificables (tt-a1i/archify)
Repo: https://github.com/tt-a1i/archify (MIT, ~49K⭐ verificado 2026-09-05, versión dev v2.17.0-dev.1). Sistema Node.js de renderizado+validación para agentes (Cursor, Claude Code, Codex CLI, OpenCode): el agente produce JSON IR tipado, Archify lo compila determinísticamente a HTML/SVG.
Idea central (patrón reutilizable)
- Diagram-as-code con IR tipado: en vez de que el LLM escriba SVG directamente (alucina topología), genera un JSON IR validado y un compilador determinista lo renderiza. Interacciones 100% grounded: sin topología inventada.
- Diff de snapshots: compara dos IR validados como Before / Delta / After con hechos exactos de nodos añadidos/eliminados/cambiados/movidos/re-enrutados. Útil para revisar cambios de arquitectura antes de merge.
- 5 tipos de diagrama (arquitectura, workflow, secuencia, data-flow, lifecycle), 4 presets, temas claro/oscuro, marcas de marca, movimiento finito.
- Export: HTML autocontenido + PNG, SVG, WebM y share cards 1200×630.
Workflow
- Instalar desde el repo (npm) o el zip del skill; se integra como skill nativo en Claude Code / Codex / OpenCode.
- El agente escribe JSON IR (tipos de nodos, aristas, agrupaciones, rutas) conforme al schema de Archify.
- Compilar: Node produce HTML validado; cualquier violación de schema falla antes de renderizar.
- Para revisión de cambios: guardar IR por versión y pedir el diff de snapshots.
- Export: PNG/SVG/WebM/1200×630 desde el HTML interactivo.
Cuándo elegirlo sobre escribir SVG a mano
- Necesitas verificabilidad (IR validado, cero topología inventada) o diffs entre versiones de arquitectura.
- Pipeline automatizado: muchos diagramas regenerables desde descripciones estructuradas.
- Para un diagrama editorial one-off, usar
creative/editorial-diagrams (estética) o creative/architecture-diagram (infra dark).
Pitfalls
- Requiere Node.js (no funciona solo en navegador).
- El JSON IR debe seguir el schema exacto del repo — leer CHANGELOG/docs de la versión en uso (v2.16-dev en 2026-08, API en evolución).
- Interactividad (búsqueda, tracing, stories) vive en el HTML generado; el SVG estático pierde esas funciones.
Verificación
- Compilación sin errores de validación de IR.
- Abrir el HTML: búsqueda de nodos, trace upstream/downstream y diff Before/After funcionan.
- Export PNG/SVG correcto a tamaño solicitado.
1---2name: archify-diagram-compiler3description: Use al querer diagramas de sistema verificables con diffs.4---56# Archify — diagramas de arquitectura verificables (tt-a1i/archify)78Repo: https://github.com/tt-a1i/archify (MIT, ~49K⭐ verificado 2026-09-05, versión dev v2.17.0-dev.1). Sistema Node.js de renderizado+validación para agentes (Cursor, Claude Code, Codex CLI, OpenCode): el agente produce **JSON IR tipado**, Archify lo compila **determinísticamente** a HTML/SVG.910## Idea central (patrón reutilizable)11- **Diagram-as-code con IR tipado**: en vez de que el LLM escriba SVG directamente (alucina topología), genera un JSON IR validado y un compilador determinista lo renderiza. Interacciones 100% grounded: sin topología inventada.12- **Diff de snapshots**: compara dos IR validados como Before / Delta / After con hechos exactos de nodos añadidos/eliminados/cambiados/movidos/re-enrutados. Útil para revisar cambios de arquitectura antes de merge.13- 5 tipos de diagrama (arquitectura, workflow, secuencia, data-flow, lifecycle), 4 presets, temas claro/oscuro, marcas de marca, movimiento finito.14- Export: HTML autocontenido + PNG, SVG, WebM y share cards 1200×630.1516## Workflow171. Instalar desde el repo (npm) o el zip del skill; se integra como skill nativo en Claude Code / Codex / OpenCode.182. El agente escribe JSON IR (tipos de nodos, aristas, agrupaciones, rutas) conforme al schema de Archify.193. Compilar: Node produce HTML validado; cualquier violación de schema falla antes de renderizar.204. Para revisión de cambios: guardar IR por versión y pedir el diff de snapshots.215. Export: PNG/SVG/WebM/1200×630 desde el HTML interactivo.2223## Cuándo elegirlo sobre escribir SVG a mano24- Necesitas **verificabilidad** (IR validado, cero topología inventada) o **diffs entre versiones** de arquitectura.25- Pipeline automatizado: muchos diagramas regenerables desde descripciones estructuradas.26- Para un diagrama editorial one-off, usar `creative/editorial-diagrams` (estética) o `creative/architecture-diagram` (infra dark).2728## Pitfalls29- Requiere Node.js (no funciona solo en navegador).30- El JSON IR debe seguir el schema exacto del repo — leer CHANGELOG/docs de la versión en uso (v2.16-dev en 2026-08, API en evolución).31- Interactividad (búsqueda, tracing, stories) vive en el HTML generado; el SVG estático pierde esas funciones.3233## Verificación34- Compilación sin errores de validación de IR.35- Abrir el HTML: búsqueda de nodos, trace upstream/downstream y diff Before/After funcionan.36- Export PNG/SVG correcto a tamaño solicitado.
ntizar