Archify: la skill que convierte tu código o una idea en diagramas de arquitectura interactivos

Archify es una skill para agentes de programación (Claude Code, Codex CLI, Cursor y OpenCode) que convierte una descripción en lenguaje natural, o el código de un repositorio, en un diagrama de arquitectura interactivo guardado como un único archivo HTML. No es una imagen estática: puedes hacer clic en un nodo, seguir el camino de una petición, cambiar entre tema claro y oscuro y exportar a PNG, SVG o vídeo. En este artículo te explicamos qué hace, qué tipos de diagrama genera, cómo instalarla, cómo pedírselo bien a tu agente y qué ha cambiado en su licencia.

Si nunca has instalado una skill, empieza por la guía de skills de Claude Code. Y si lo que quieres es aprender diseño de sistemas antes de dibujarlos, tienes System Design 101.

Qué es Archify

Es el repositorio tt-a1i/archify en GitHub. Nació como derivado de Cocoon-AI/architecture-diagram-generator y hoy es otra cosa: un motor de renderizado con validación propia y una skill que le enseña al agente a usarlo. Datos a 28 de octubre de 2026:

• Versión estable: 3.2.0, del 18 de octubre de 2026.
• Popularidad: unas 90.700 estrellas y 6.100 forks. Llegó al número 1 de la lista semanal de GitHub Trending a principios de septiembre de 2026.
• Requisitos: Node.js 18 o superior. La CLI no tiene dependencias: no hay npm install ni claves de API. Las comprobaciones finales usan un navegador Chromium.
• Compatibilidad: Claude Code, Codex CLI, Cursor y OpenCode con todas las funciones; Claude.ai subiendo el ZIP como skill (si el entorno tiene Node.js); integraciones comunitarias para Hermes Agent y DeepSeek Harness.

La idea es sencilla: tú describes lo que quieres ver y el agente escribe un JSON tipado (el repositorio lo llama *typed JSON IR*), Archify lo valida y lo convierte en una página HTML autocontenida. Como el diagrama sale de un archivo fuente, puedes seguir pidiendo cambios ("añade autenticación", "resalta el camino del fallo de caché") y el agente edita solo lo necesario.

Los diez tipos de diagrama

La versión 3.1 pasó de cinco a diez tipos. La skill elige el adecuado según tu pregunta:

Para el ERD hay una regla que nos gustó: la skill obliga a dibujar todas las columnas con su tipo SQL y sus claves, y agrupa las tablas por dominio. Nada de cajas con tres campos inventados.

Si no sabes qué tipo usar, la CLI tiene un orientador:

node archify/bin/archify.mjs guide "Show an API request with Redis cache miss"

Qué puedes hacer con el diagrama

El resultado es un solo archivo HTML. Lo abres en el navegador sin instalar nada y se lo puedes mandar a otra persona: las interacciones viajan con él. Los controles, según el README:

Cada vista tiene un enlace estable: #focus=api, #route=web~db o #lens=backend~database abren el diagrama ya enfocado. Muy útil para pegar en una issue o en un PR.

La exportación da PNG (también al portapapeles), JPEG, WebP, SVG en claro, oscuro o automático, vídeo WebM de 6 segundos y "share cards" de 1200×630 de una ruta concreta, pensadas para redes sociales.

Novedad de la 3.2: respuestas en una página

La 3.2.0 añade los explainers: le pides al agente que te responda "como una página" y Archify monta un documento con la conclusión primero y un panel por pregunta, con tablas, pasos, gráficos, código y diagramas validados. Los pasos se iluminan en el diagrama mientras los lees y cada afirmación puede citar fuentes numeradas. Se exporta como imagen larga o PDF.

Cómo instalar Archify

La instalación oficial usa el instalador de skills de Vercel Labs (el mismo del que hablamos en find-skills):

npx skills add tt-a1i/archify -g

El -g la instala para tu usuario, así que sirve en todos tus proyectos. Si quieres una instalación concreta sin preguntas, por ejemplo para Cursor:

npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

Y para probarla sin instalar nada:

npx skills use tt-a1i/archify@archify --agent codex

Dónde queda en cada agente:

Para comprobar que funciona, desde la carpeta de la skill:

node bin/archify.mjs doctor
node bin/archify.mjs demo ./archify-demo

El aviso de actualizaciones

Archify consulta de vez en cuando un manifiesto con la última versión estable para avisarte de que hay una nueva. Según el README, la petición no envía tu versión, tu agente, tu código ni tus prompts, solo los metadatos normales de HTTP (IP y hora), y nunca instala nada sola. Si no quieres ninguna conexión:

export ARCHIFY_UPDATE_CHECK_DISABLED=1

Cómo pedirle un diagrama a tu agente

No hace falta un repositorio. Puedes empezar con una frase:

Usa Archify para dibujar: el navegador llama a la API, la API mira en Redis
y, si no está en caché, consulta PostgreSQL y rellena la caché.

Para un diagrama de tu propio código, abre el agente en el repositorio y sé concreto con el alcance. Este es el prompt que recomienda el propio proyecto, traducido:

Analiza este repositorio y usa archify para crear un diagrama de arquitectura
de alto nivel en tiempo de ejecución. Muestra de 8 a 12 componentes clave,
un camino principal, dependencias externas y límites de confianza.
Pon el detalle en tarjetas en lugar de añadir más flechas.

Cuando el diagrama sale de un repositorio, cada nodo puede llevar una marca SRC n que abre el archivo y las líneas exactas que lo justifican, fijadas a un commit. La skill exige anotar la ruta y el rango de líneas de cada componente y relación mientras lee el código, y prohíbe dar por hecho algo solo porque lo diga el nombre de un paquete.

Después, sigue en el chat: "mueve auth a la izquierda", "pásalo a tema claro", "resalta el camino de rollback".

Por qué los diagramas salen limpios

Lo que diferencia a Archify de pedirle "un diagrama en Mermaid" a cualquier modelo es la validación. Antes de entregar, el comando finalize encadena cuatro comprobaciones: el esquema JSON, la maquetación (que las etiquetas no pisen las líneas, que las rutas no se crucen sin necesidad), el HTML/SVG y una prueba en un navegador real. Si algo falla, devuelve un JSON con el código de la regla, el elemento exacto y los arreglos permitidos, y el agente tiene dos rondas para corregirlo. Si no pasa, el archivo anterior bueno se queda donde estaba: nunca te deja un diagrama roto a medias.

Lo que Archify no hace

• No es un editor de dibujo. No arrastras cajas con el ratón; los cambios se piden al agente.
• No convierte Mermaid automáticamente. Si le das un diagrama Mermaid, el agente lo lee para entender la topología y escribe un JSON nuevo. El resultado no copia el estilo de Mermaid.
• No hace dashboards. La propia skill lo dice en su descripción: no está pensada para paneles de métricas.
• No aloja tus diagramas. Te da un HTML; dónde lo publiques es cosa tuya.
• No mide tiempos reales por sí sola. En Timeline y Waterfall los valores son ilustrativos salvo que vengan de tus logs o trazas, y el diagrama lo indica.

La licencia: de MIT a Apache-2.0

Aquí hay un matiz importante. Hasta el 25 de octubre de 2026 Archify era MIT. Ese día la rama principal pasó a Apache-2.0:

• La versión 3.2.0 (la última publicada, del 18 de octubre) se distribuyó con licencia MIT y la conserva.
• El código actual de main y las versiones futuras son Apache-2.0. Los permisos MIT históricos siguen vigentes; están en los archivos NOTICE y LICENSE-MIT.
• La licencia cubre el motor y las plantillas, no tus diagramas: lo que generas con Archify es tuyo.

Para un uso normal (instalarla, generar diagramas para tus proyectos o tus clientes) las dos licencias te dejan hacerlo gratis, también con fines comerciales. Apache-2.0 añade dos obligaciones si redistribuyes el código modificado: conservar el aviso NOTICE e indicar qué archivos cambiaste. Tampoco te da permiso para usar la marca Archify.

Para qué te sirve en el día a día

• Entrar en un proyecto ajeno. Le pides el mapa de un repositorio que no conoces y tienes en minutos una vista con enlaces al código real.
• Documentar para un cliente. Un HTML que se abre en cualquier navegador y que el cliente puede explorar luce más que una captura de una pizarra.
• Revisar cambios de arquitectura. archify compare architecture base.json head.json genera un "Architecture Delta" con lo añadido, quitado y movido entre dos versiones.
• Explicar incidentes. Timeline para la cronología y Waterfall para ver dónde se perdió el tiempo de una petición.
• Contenido técnico. Diagramas exportados como imagen o vídeo para un post o una presentación.

Preguntas frecuentes

¿Archify es gratis? Sí. Es open source (MIT hasta la 3.2.0, Apache-2.0 desde entonces) y no necesita cuenta ni clave de API. Lo que pagas son los tokens del agente que uses.

¿Funciona con Claude Code? Sí, con todas las funciones. Se instala en ~/.claude/skills/ con npx skills add tt-a1i/archify -g.

¿Necesito darle acceso a mi repositorio? No. Puedes trabajar solo con descripciones. Si quieres un diagrama de tu código, el agente lo lee en local; Archify no sube nada a ningún servidor.

¿Puedo editar el diagrama a mano? Puedes editar el JSON fuente y volver a generarlo, o pedir el cambio al agente. No hay editor visual.

¿En qué idiomas sale la interfaz? La interfaz del visor viene en inglés, chino simplificado y tradicional, español, coreano y árabe con meta.locale. El contenido del diagrama sale en el idioma en que se lo pidas.

¿Archify es lo mismo que Anatomy? No. Anatomy dibuja máquinas isométricas que explican un concepto con una metáfora. Archify dibuja diagramas técnicos literales: servicios, tablas, secuencias.

Conclusión

Archify resuelve un problema real: los diagramas de arquitectura que pides a una IA suelen salir con flechas cruzadas, etiquetas encima de las líneas o componentes inventados. Su validación por fases y la exigencia de citar el código hacen que el resultado sea fiable y que se pueda compartir tal cual. Instálalo con npx skills add tt-a1i/archify -g, pruébalo con la arquitectura de tu proyecto actual y, si te interesan más herramientas de este tipo, revisa la guía de skills de Claude Code.