archify: el mapa clicable del código que te ha escrito Claude

Qué es y por qué importa

Claude te ha escrito un proyecto entero. Funciona, pero tres semanas después ya no sabes qué toca qué: qué archivo habla con la base de datos, qué arriesgas si cambias esa función.

archify es una skill, es decir, un paquete de instrucciones y scripts que Claude usa cuando hace falta. Pides el mapa con una frase: Claude lee los archivos del proyecto y archify dibuja un archivo HTML, con las partes principales en recuadros y las conexiones en flechas. Antes de entregarlo comprueba que flechas y etiquetas se sostengan; si una comprobación falla, Claude corrige.

Es gratis y open source (licencia Apache 2.0), con más de 90.000 estrellas en GitHub a finales de octubre. Es para quien construye solo con Claude Code y quiere entender su proyecto o explicárselo a un cliente. También funciona con Codex, Cursor y OpenCode.

1. Instálalo en Claude Code

Necesitas Claude Code con Node.js en el ordenador. En claude.ai, en el navegador, depende de que la sandbox tenga acceso a Node.js: está pensado para Claude Code. En la carpeta del proyecto, pega la frase oficial:

Install Archify for me by reading https://raw.githubusercontent.com/tt-a1i/archify/main/llms.txt

Claude lee las instrucciones, te dice qué va a ejecutar y te pregunta si lo quieres en todos los proyectos (global) o solo en este. Luego instala y lanza la comprobación doctor: archify está listo solo si pasa.

Desde la terminal es una sola línea. --copy copia los archivos en lugar de enlazarlos, --yes se salta las preguntas; sin --global solo vale en la carpeta donde la lanzas:

npx -y skills@latest add https://archify.si --skill archify --agent claude-code --global --copy --yes

Luego la comprobación, con la ruta que el instalador te escribe al final (para Claude Code normalmente ~/.claude/skills/archify):

node ~/.claude/skills/archify/bin/archify.mjs doctor

2. El mapa de tu proyecto

En la carpeta del proyecto, copia esta petición. Es la oficial, traducida:

Analiza este repositorio y luego usa archify para crear un diagrama de alto nivel de la arquitectura en ejecución. Muestra de 8 a 12 componentes principales, un recorrido principal, las dependencias externas y los límites de confianza. Pon los detalles en fichas en lugar de añadir más flechas.

Las dependencias externas son los servicios que no son tuyos: base de datos en la nube, pagos, email. Los límites de confianza son donde los datos pasan a una parte que no controlas, como del navegador a tu servidor. Y de 8 a 12 partes es la clave: 40 recuadros no los lee nadie.

Claude sigue quién llama a quién, desde la entrada del proyecto hasta donde los datos entran, salen o se guardan. Al final te da el enlace al archivo, guardado también en la carpeta .archify del proyecto.

Si el proyecto es público en GitHub, añade «enlaza cada componente con los archivos y las líneas que lo demuestran»: los recuadros se marcan con SRC y abren el código del que vienen. Haz antes el commit: archify cita el último commit, no los cambios abiertos.

3. Sin código: empieza por una idea

No hace falta un repositorio: basta una idea, un plan, un proceso. Claude solo necesita una carpeta cualquiera donde escribir el archivo.

Usa archify para convertir esta descripción en un diagrama de arquitectura de alto nivel: [quién usa el producto, las partes principales, el recorrido principal, los servicios externos]. No hay repositorio. Pregúntame solo los datos que cambien de verdad el diagrama, marca como desconocido lo que no sepas y mantén un recorrido principal claro.

Para probarlo en diez segundos: «Usa archify para dibujar: Browser -> API -> caché Redis -> PostgreSQL si la caché no tiene el dato». Luego sigues, un cambio por mensaje:

• «Añade la autenticación.»
• «Resalta el recorrido cuando la caché no tiene el dato.»
• «Mueve la autenticación a la izquierda.»
• «Cambia al tema claro.»

4. Una sola página para quien no programa

A veces la pregunta es «cómo funciona esto». archify también hace una sola página: primero la respuesta, luego un panel por pregunta. Los pasos están al lado del diagrama y, mientras lees, iluminan las partes de las que hablan.

Usa archify para responder con una sola página, para mandar a un cliente que no programa: ¿cómo funciona [el pago] en mi app, desde el clic del usuario hasta [el recibo]? Primero la conclusión, luego los pasos al lado del diagrama del recorrido. Palabras sencillas, nada de jerga.

También es un archivo HTML: se exporta como imagen larga o se imprime en PDF.

5. Las teclas para explorar el mapa

Abre el archivo en el navegador del ordenador. A partir de aquí archify no hace falta: todo está dentro del archivo.

• Clic en una parte: se iluminan las partes conectadas y se abre su ficha, con lo que entra y lo que sale. Esc la cierra.
• Upstream y Downstream, en la ficha: todo lo que lleva a esa parte, o todo lo que sale de ahí, paso a paso.
• R: el recorrido. Haces clic en la salida y en la llegada, archify muestra el camino más corto siguiendo las flechas y lo puedes reproducir.
• /: busca una parte por su nombre. ?: la guía del mapa, con las acciones que ese archivo permite.
• E: exportar. T: tema claro u oscuro. S: cambiar estilo. F: presentación, con el mapa ocupando toda la ventana, cómodo en una llamada.
• + y - para el zoom, 0 para volver a la vista inicial. Live anima las flechas, Still las para.

Las flechas son las que Claude escribió en el mapa: Upstream y Downstream siguen esas, no el programa en marcha. Te dicen dónde mirar, no el impacto de un cambio: el código lo relees tú.

6. Mándaselo a un cliente

El mapa es un solo archivo. Lo mandas por email o por chat, quien lo recibe lo abre en el navegador y lo tiene todo, sin instalar nada. Solo los enlaces externos, como los del código en GitHub, necesitan conexión.

Para una imagen que poner en una diapositiva, pulsa E:

• El mapa entero en PNG al portapapeles, o para descargar en PNG, JPEG, WebP, SVG y como vídeo WebM animado.
• Route Share Card: después de trazar un recorrido con R, una imagen de 1200×630 con ese recorrido resaltado y el resto del mapa alrededor.
• Reach Share Card: lo mismo, después de Upstream o Downstream.

Las imágenes no se pueden clicar: si el cliente tiene que explorar, mándale el HTML. Y antes relee etiquetas y fichas: pueden contener detalles de tu código que no quieres enseñar.

Errores comunes

• Pedir «dibuja todo el proyecto»: sale un mapa que no se lee. Pide de 8 a 12 partes y un recorrido, o una función cada vez.
• Tomar las flechas como verdad: las comprobaciones de archify dicen que el dibujo está bien hecho, no que el programa se comporte así.
• Abrir el mapa en el móvil: no está pensado para pantallas pequeñas. Usa el ordenador.
• Buscar un enlace para compartirlo en línea: archify no aloja los mapas. Mandas el archivo o una imagen.

Lista de comprobación

• He instalado archify y la comprobación doctor ha pasado
• He pedido el mapa de mi proyecto con 8 a 12 partes y un recorrido
• He hecho clic en una parte y he probado Upstream y Downstream
• He trazado un recorrido con R y he exportado su Share Card
• He mandado el archivo HTML a alguien y lo ha abierto sin instalar nada

Preguntas frecuentes