Floorplan es un plugin gratuito y open source para Claude Code y Codex que lee tu código, dibuja un diagrama de arquitectura interactivo de tu app y revisa los fallos de seguridad típicos de las apps hechas con IA. Le sembramos siete en una app de prueba: encontró los siete y no marcó ninguna de las cuatro configuraciones seguras que pusimos al lado.
El mapa que Codex construyó de nuestra app de prueba cuando le pedimos, en español, “Hazme un floorplan de esta app”: pantallas, servidor principal, pagos, acceso y datos, más los tres servicios externos (OpenAI, Stripe y Supabase), todo nombrado y descrito en español.
yoDEV Tested · 2 de noviembre de 2026
Floorplan 0.6.2 en la app de Codex sobre macOS y como scripts en Linux, con una app de prueba de dos repositorios. Los resultados que reportamos como nuestros salen de esa prueba.
¿Qué es Floorplan y en qué se diferencia de un diagrama de arquitectura?
Floorplan convierte tu código en un mapa con zoom, que funciona como un diagrama de arquitectura vivo: cada parte de la app, cada archivo y cada endpoint recibe un nombre en lenguaje claro y una descripción de una línea, conectados por los imports y las peticiones HTTP que hay entre ellos. A diferencia de un architecture diagram dibujado a mano, no hay que mantenerlo: se regenera desde el código cada vez que se lo pides. Es obra de Hayden Smith, con licencia MIT, y está pensado para quien construye con IA y no lee cada línea que escribió la IA. El README lo plantea sin rodeos: si te preguntan “¿qué se rompe si cambio esto?”, la respuesta honesta muchas veces es ni idea.
El trabajo se divide en dos. Unos scripts de Node, sin ninguna dependencia, hacen la parte mecánica: encuentran los repositorios, analizan el código, emparejan cada petición del frontend con el endpoint del servidor que la responde y acomodan el mapa. Claude o Codex hacen la parte que solo puede hacer un lector: decidir qué son las piezas de tu app y ponerles nombre. El resultado es un único floorplan/index.html que se abre en el navegador.
Además del mapa, suma:
- Health check: claves en el código o enviadas al navegador, tablas de Supabase sin row-level security, reglas de Firebase abiertas, webhooks de Stripe sin verificación de firma, endpoints que modifican datos sin inicio de sesión y CORS demasiado permisivo. Cada problema trae un prompt de corrección listo para pegar.
- Recent work: cuando Claude o Codex cambian algo, las tarjetas afectadas se encienden en verde con una nota sobre por qué hizo falta el cambio.
- Ask the map: una barra de preguntas que responde con tu propia sesión de Claude Code CLI o de Codex, en modo solo lectura, con un minimapa de las piezas involucradas.
- Pantallas, recorridos guiados, un tour de “Start here” y Export a un único archivo HTML que puedes enviarle a alguien que no use ninguna de las dos herramientas.
La versión 0.6.2 salió el 2 de noviembre de 2026 y el Health check llegó en la 0.6.0, dos días antes, así que es de esperar que las reglas sigan cambiando.
¿Cómo se instala Floorplan en Claude Code o Codex?
Necesitas Node.js 18 o superior y Claude Code o Codex. No hay API keys: funciona con el plan de Claude o de ChatGPT que ya tienes.
En Claude Code (CLI o la pestaña Code de la app de escritorio):
claude plugin marketplace add haydenschmitty/floorplan
claude plugin install floorplan@floorplan
En Codex, desde una terminal:
codex plugin marketplace add haydenschmitty/floorplan
codex plugin add floorplan@floorplan
O en la app de Codex: Plugins → Add a marketplace, escribe haydenschmitty/floorplan como origen e instala Floorplan.
Abre una sesión nueva en tu proyecto y pide:
Make me a floorplan of this app.
En Codex también puedes escribir $floorplan. Si tu frontend y tu backend viven en repositorios separados, abre la carpeta que contiene a ambos: Floorplan encuentra cada repositorio y los conecta. Después de seguir trabajando, pide “Update the floorplan” y solo se vuelve a leer lo que cambió.
¿Funciona en español?
Sí: si le hablas en español, todo lo que escribe la IA sale en español. Instalamos Floorplan en la app de Codex en un Mac tal como indica el README (Plugins → Add → Add a marketplace, origen haydenschmitty/floorplan y luego el + junto a Floorplan), lo que tomó menos de un minuto y sin terminal. Después abrimos la carpeta de la app de prueba y escribimos una sola línea: Hazme un floorplan de esta app.
Codex respondió en español, activó el skill de Floorplan por su cuenta y tuvo el mapa listo 1 minuto y 49 segundos después. El resumen del proyecto, los nombres de las partes (“Servidor principal”, “Suscripciones y pagos”, “Acceso y administración”), cada descripción de archivo y de endpoint, y tres recorridos guiados que eligió sin que se lo pidiéramos (Crear una suscripción, Registrar un pago y Consultar mis pedidos) quedaron en español. Su informe final, también en español, enumeró en lenguaje claro los problemas importantes del Health check.
Lo que no se traduce, al momento de publicar esta nota: la interfaz y los títulos del Health check siguen en inglés, así que aparecen líneas mezcladas como “Anyone could fake a Stripe payment in Recibir avisos de pago”. Se entiende, pero tenlo en cuenta si piensas compartir el mapa con un cliente no técnico que solo lee español.
Los tres recorridos guiados que Codex agregó por su cuenta, con nombre en español.
¿Qué fallos de seguridad encuentra en una app hecha con IA?
Encuentra los errores clásicos que deja el vibe coding, y en nuestra prueba no se le escapó ninguno. Armamos una pequeña app de suscripción de café repartida en dos repositorios (un frontend con React y Vite, y un backend con Express que usa Stripe y Supabase) y sembramos siete errores que aparecen una y otra vez en el código generado por IA:
- Una clave secreta de Stripe con formato live escrita directamente en un archivo de rutas
- Una clave de OpenAI en una variable
VITE_, usada desde el navegador - Una tabla
ordersde Supabase creada sin row-level security - Un webhook de Stripe que actúa sobre
checkout.session.completedsin verificar la firma - Un endpoint
DELETEde administración sin comprobación de inicio de sesión cors({ origin: true, credentials: true })en el servidor- Un archivo
.envguardado en git
Junto a ellos pusimos cuatro controles que no debían marcarse: una clave publishable de Stripe en una variable VITE_, un hash bcrypt en ADMIN_PASSWORD_HASH, una tabla profiles con RLS y una policy, y dos rutas detrás de un middleware requireAuth.
Resultado: seis problemas “importantes” y uno “para corregir”: los siete errores y ninguno de los controles. Obtuvimos exactamente la misma lista dos veces: ejecutando los scripts de Floorplan directamente en Linux y en la ejecución completa de Codex en el Mac.
El panel de Health de la ejecución en Codex, encabezado por la clave de Stripe escrita en el código y la clave de OpenAI expuesta al navegador. Cada problema tiene “Show on map”, “Fix with Codex” (“Fix with Claude” en Claude Code) y “Not a problem”.
Algunos detalles que importan en la práctica:
- Nunca muestra el secreto. La clave de Stripe apareció como “starts sk_l…, 72 characters” y nada más.
- Entiende las variables de entorno. El aviso explica que todo lo que empieza con
NEXT_PUBLIC_,VITE_y similares se copia al código que recibe cada visitante, y deja tranquilas las claves que son públicas por diseño, como la publishable de Stripe. - La revisión de RLS lee tus migraciones en orden, así que una tabla que se protege en una migración posterior no cuenta como abierta. El propio mensaje reconoce que, si solo tu servidor habla con la base de datos, el riesgo es menor.
- El emparejamiento entre repositorios funcionó: las tres peticiones del frontend, construidas con una plantilla
${BASE}leída de una variable de entorno, quedaron unidas a los endpoints correctos de Express en el otro repositorio. - Es rápido. El escaneo tomó 0,24 segundos y armar el mapa 0,27 segundos en nuestra app de prueba; la ejecución completa en Codex, con la IA leyendo y describiendo los 13 archivos, tomó menos de dos minutos. En un código grande, el tiempo se va en las descripciones.
También corrimos la suite de pruebas del proyecto: 190 de 191 tests pasan, uno se omite y ninguno falla. La herramienta de checksums que trae el repositorio confirmó que los 54 archivos coinciden con la versión 0.6.2.
¿Detecta cuándo corriges un fallo?
Sí. En la ejecución en Linux agregamos requireAuth al endpoint de administración y lanzamos la actualización. El refresco tomó 0,57 segundos, detectó el único archivo editado y el Health check bajó de seis problemas importantes a cinco. Después, Recent work resaltó la tarjeta que cambió, con una nota que explica qué problema cerró.
Recent work después de la corrección: lo que se pidió, lo que se hizo y la tarjeta del archivo modificado resaltada.
¿Qué limitaciones tiene?
Aparecieron tres, y conviene conocerlas antes de confiar en el conteo.
Iniciar sesión no es tener permiso. En cuanto el endpoint de administración tuvo alguna comprobación de inicio de sesión, el Health check lo dio por corregido, aunque cualquier cliente con sesión iniciada todavía podía borrar cualquier cuenta, porque nada comprueba el rol de administrador. El README lo dice abiertamente: el Health check es “a check, not an audit”. Úsalo como red para los errores obvios, no como una revisión de seguridad.
La detección de rutas depende de los nombres. Nuestra primera versión declaraba las rutas de Express sobre un router llamado r (const r = Router()) y Floorplan encontró cero endpoints. La detección se basa en nombres de variable convencionales como app, router o cualquiera que termine en Router. Al renombrarlo a router, apareció todo. Si tu mapa muestra un servidor sin endpoints, revisa esto primero.
La barra de preguntas necesita su servidor local. En nuestra prueba con la app de Codex, el mapa se abrió en el panel de vista previa de la propia app en 127.0.0.1:4378, pero la pestaña no se mostró, y al reintentar la ventana de Codex quedó en blanco. Si abres floorplan/index.html directamente ves el mapa completo, con la barra de preguntas desactivada y una nota que indica ejecutar node floorplan/serve.mjs desde la raíz del proyecto. Las propias instrucciones de Floorplan dicen que, en Codex, el servidor del mapa debe correr fuera del sandbox; si la vista previa falla, ese comando es la solución.
¿Es seguro instalar Floorplan?
Según su documentación, Floorplan no tiene hooks, ni servidores MCP, ni dependencias, no descarga nada y su servidor local solo acepta conexiones desde tu propia máquina. Crea una carpeta floorplan/ que se excluye sola de git y, en Claude Code, solo si dices que sí, una sección breve en tu CLAUDE.local.md personal. Su única petición hacia afuera es una lista de espera opcional por correo para una futura versión alojada. El código que lee tu IA pasa por tu propia cuenta de Claude o de ChatGPT, igual que en cualquier otra tarea.
¿Floorplan o Archify para un diagrama de arquitectura de software?
Depende de para qué lo quieras: Archify es para explicar un sistema a otros, Floorplan para entender y revisar la app que es tuya. El README de Floorplan se compara directamente con Archify y con Understand Anything. Archify dibuja diagramas pulidos (de arquitectura, de secuencia, ERD) para un documento, una charla o una decisión; Floorplan mapea tu app, te dice qué es riesgoso y qué acaba de cambiar tu IA. Se combinan bien: mapeas la app con Floorplan y luego dibujas un flujo con Archify para una presentación. Aquí cubrimos Archify: Archify: cómo hacer diagramas de arquitectura con Claude Code y comparar dos versiones
¿Qué no probamos?
Ejecutamos Floorplan de dos formas: sus scripts directamente en Linux y el plugin completo dentro de la app de Codex en macOS. No lo corrimos dentro de Claude Code, no logramos que funcionara la barra de preguntas, y no probamos los blueprints a partir de un PRD, un código grande del mundo real ni Windows.
¿Y tú? ¿Qué es lo primero que revisas en una app que armaste con IA antes de ponerla en producción?
- Leo el código yo mismo
- Le pido a la IA que me la explique
- Uso un diagrama o una herramienta que la mapea
- Prefiero otra opción (cuéntanos cuál)
Comenta abajo o, si este artículo te llegó por correo, responde directamente al email: tu respuesta se publica aquí.
Relacionado: Cómo auditar la seguridad de tu código con IA usando el skill que liberó Cloudflare