Diagrama de arquitectura de sistema en una pizarra

Para dibujar un diagrama de bloques de arquitectura en una pizarra, elige primero un nivel de detalle. Para casi todas las conversaciones es el nivel de contenedores de C4: una caja por cada aplicación y almacén de datos, flechas etiquetadas con lo que circula entre ellas, y las personas y sistemas externos alrededor. Escribe arriba la pregunta que responde el diagrama, añade una leyenda y para en una docena de cajas.

Con el orden correcto se tarda unos 20 minutos. Este artículo da ese orden, los cuatro niveles de C4 de los que sale, un ejemplo completo y una comparación honesta de las herramientas de IA que prometen dibujar el diagrama por ti: Miro AI, DiagramGPT de Eraser y tldraw. Dibujamos estos diagramas al empezar cada producto que construimos, casi siempre en una pizarra compartida durante una llamada, así que este es el método que usamos de verdad.

Qué debe mostrar un diagrama de arquitectura de sistema

Un diagrama de arquitectura responde a una pregunta sobre un sistema de software para un público concreto. «¿Cómo llega un pago desde el checkout hasta el banco?» es una pregunta. «Todo sobre nuestra plataforma» no lo es, y el diagrama que lo intenta acaba con cuarenta cajas que nadie puede leer.

Casi todo diagrama de bloques necesita tres cosas:

Las cajas. Cada una es algo que se ejecuta o guarda datos: una app web, una API, un worker, una base de datos, una cola.
Las flechas. Cada una es una relación con dirección y verbo: «envía pedidos a», «lee de», «publica eventos en».
Los bordes del sistema. Las personas que lo usan y los sistemas externos de los que depende, como un proveedor de pagos o un servicio de email.

Lo que normalmente sobra es el detalle de infraestructura (balanceadores, subredes, zonas de disponibilidad), salvo que la pregunta sea sobre despliegue, y el detalle de código (clases, funciones), salvo que la pregunta sea sobre un componente.

Los cuatro niveles de C4 y cuál va en la pizarra

El modelo C4, creado por Simon Brown y documentado en c4model.com, es la forma más útil que conocemos de decidir cuánto dibujar. Describe un sistema en cuatro niveles de zoom, más vistas complementarias de panorama, comportamiento dinámico y despliegue.

Nivel C4	Qué son las cajas	Para quién	¿Sirve en una pizarra?
1. Contexto del sistema	Tu sistema como una caja, con usuarios y sistemas externos alrededor	Todos, incluidas personas no técnicas	Sí; el mejor primer dibujo
2. Contenedores	Aplicaciones y almacenes de datos dentro del sistema: app web, API, worker, base de datos	Desarrolladores, arquitectos, responsables técnicos	Sí; el diagrama de bloques más habitual
3. Componentes	Las partes principales dentro de un contenedor: módulos, servicios, controladores	Quien trabaja en ese contenedor	A veces, un contenedor cada vez
4. Código	Clases, interfaces, tablas	Desarrolladores; suele generarse desde el código	Casi nunca; mejor generarlo desde el código

En la práctica dibujamos el nivel 1 en los primeros cinco minutos del arranque de un proyecto y dedicamos el resto de la sesión al nivel 2. El nivel 3 aparece cuando un contenedor es lo bastante complejo como para discutirlo. El nivel 4 casi nunca lo dibujamos a mano.

Cómo dibujar un diagrama de bloques en una pizarra en 20 minutos

El método funciona en una pizarra física, un lienzo online o en papel. Los tiempos suponen un sistema de tamaño medio, como un producto SaaS con front web, una API, tareas en segundo plano y algunos servicios de terceros.

Minutos 0 a 3: escribe la pregunta arriba

Escribe una frase arriba de la pizarra: qué debe responder este diagrama y para quién. «Cómo se crea y confirma una reserva, para el nuevo desarrollador de backend» basta. Cada caja que añadas después debe ayudar a responder esa frase.

Minutos 3 a 8: dibuja las personas y los sistemas externos

En los bordes, dibuja las personas (clientes, equipo, administradores) y los sistemas externos (proveedor de pagos, servicio de email, API de calendario). Usa otra forma u otro color para lo que no es tuyo. Ese es tu contexto del sistema, y a menudo saca a la luz una dependencia que alguien había olvidado.

Minutos 8 a 14: dibuja los contenedores

En el centro, una caja por aplicación en ejecución o almacén de datos. Dale a cada caja tres líneas: nombre, tecnología entre paréntesis y una frase sobre lo que hace. «Booking API (Node.js) - crea y confirma reservas» es mejor que una caja que diga «API». Quédate en unas doce cajas; si necesitas más, estás dibujando dos diagramas.

Minutos 14 a 18: dibuja las flechas con verbos

Conecta las cajas, una flecha por relación, en la dirección de la petición o de los datos. Etiqueta cada flecha con un verbo y, cuando importe, el protocolo: «envía la confirmación por (SMTP)», «lee disponibilidad de (JSON sobre HTTPS)». Una flecha sin etiqueta es donde viven los malentendidos.

Minutos 18 a 20: añade leyenda, título y fecha

Añade una pequeña leyenda que explique formas, colores y estilos de línea, un título que diga qué nivel C4 es y la fecha de hoy. La fecha importa más de lo que parece: un diagrama sin fecha se sigue creyendo mucho después de dejar de ser cierto.

Reglas de notación para que un diagrama de bloques se lea bien

Una forma por tipo de cosa. Rectángulos para aplicaciones, cilindros para bases de datos, un icono de persona para personas. No mezcles significados.
El color indica propiedad, no decoración. Por ejemplo, tus sistemas en un color y los de terceros en gris.
Las flechas van en un solo sentido. Si dos cajas se hablan en ambos sentidos, dibuja dos flechas con dos verbos.
Ninguna caja huérfana. Cada caja tiene al menos una flecha, o no pertenece a este diagrama.
Agrupa con límites, no por cercanía. Dibuja un recuadro discontinuo alrededor de lo que está dentro de tu sistema para que el borde sea explícito.
Escribe etiquetas, no siglas. «PSP» significa algo distinto para cada persona de la sala.

Un ejemplo completo: un producto de reservas a nivel de contenedores

Este es el diagrama de nivel 2 que dibujaríamos para un producto sencillo de reservas, descrito en palabras para que puedas esbozarlo a la vez.

Arriba: «Cómo se crea y confirma una reserva, para un nuevo desarrollador de backend. Nivel de contenedores C4. 28 de octubre de 2026.»

A la izquierda, una persona: Cliente. A la derecha, tres sistemas externos en gris: Proveedor de pagos, Servicio de email y Google Calendar.

Dentro de un límite discontinuo llamado «Sistema de reservas», cinco cajas:

App web (Next.js) - muestra la disponibilidad y recoge la reserva.
Booking API (Node.js) - valida y crea reservas.
Worker (Node.js) - envía confirmaciones y sincroniza calendarios.
Base de datos (PostgreSQL) - guarda reservas, clientes y disponibilidad.
Cola (Redis) - guarda los trabajos del worker.

Flechas: Cliente «reserva un hueco con» App web; App web «crea la reserva vía (HTTPS)» Booking API; Booking API «lee y escribe» Base de datos; Booking API «cobra a través de» Proveedor de pagos; Booking API «encola el trabajo de confirmación en» Cola; Worker «recoge trabajos de» Cola; Worker «envía email a través de» Servicio de email; Worker «crea el evento en» Google Calendar.

Son nueve cajas y ocho flechas, y un desarrollador nuevo lo entiende en menos de un minuto.

Pizarra o generador con IA: Miro AI, Eraser DiagramGPT y tldraw comparados

La búsqueda de «diagrama de bloques en pizarra con IA» crece porque varias herramientas ya generan un primer borrador a partir de texto. Un borrador generado ahorra el tiempo de dibujar, no el de pensar: sigues necesitando la pregunta, el nivel y las cajas. Los datos proceden de las páginas de cada proveedor, a octubre de 2026.

Herramienta	Qué hace la IA	Precio a octubre de 2026	Ideal para
Miro AI	Genera un diagrama editable en el tablero a partir de un prompt o de notas y bocetos ya existentes; incluye diagramas de flujo, ER, mapas mentales, UML de secuencia y de clases	Plan Free: 3 tableros editables, 10 créditos de IA al mes; Starter 8 $ por miembro al mes en pago anual con 25 créditos; Business 20 $ con 50 créditos	Talleres en equipos que ya usan Miro
Eraser DiagramGPT	Genera diagramas de flujo, ER, arquitectura cloud, secuencia y BPMN desde un prompt; luego se editan como formas o como diagrama en código	Free: 3 archivos, 3 créditos de IA; Business 45 $ por miembro al mes en pago anual (60 $ mensual), 100 créditos	Diagramas de arquitectura de ingeniería que viven en documentos
tldraw	tldraw.com es una pizarra gratuita; el SDK de tldraw incluye un kit de inicio de agente para que los desarrolladores construyan una IA que dibuje en el lienzo	Pizarra gratis; licencia del SDK con precio bajo solicitud, prueba de 100 días	Bocetos, y equipos que construyen su propio producto de lienzo

Miro AI

El generador de diagramas con IA de Miro parte de un prompt, o de un grupo de notas adhesivas ya en el tablero, y produce un diagrama totalmente editable. Cada generación gasta un crédito, y la página de precios de Miro indica 10 créditos al mes en Free, 25 por miembro en Starter y 50 en Business. Miro no tiene un tipo específico de C4 o arquitectura; se llega con las opciones de diagrama de flujo y UML y algo de edición. Es buena opción si el diagrama forma parte de un tablero de taller que el equipo ya usa.

Eraser DiagramGPT

DiagramGPT de Eraser es la más orientada a ingeniería de las tres. Incluye la arquitectura cloud entre sus cinco tipos de diagrama, y cada resultado se edita como formas o con la sintaxis de diagrama en código de Eraser, útil cuando una etiqueta se corrige antes en texto. La página de precios de Eraser muestra 3 créditos de IA en el plan gratuito: suficiente para probarla, no para depender de ella.

tldraw

tldraw es una pizarra rápida y gratuita con aspecto de dibujo a mano, ideal para los primeros bocetos. Su apuesta por la IA es para desarrolladores: el SDK de tldraw incluye un kit de inicio de agente para construir una IA que lee y edita el lienzo, y la página de licencias de tldraw fija el precio del SDK bajo solicitud. No encontramos en las páginas del proveedor un generador de diagramas con IA integrado en tldraw.com, así que no lo valoramos aquí.

Para una comparación más amplia que incluye Visual Paradigm y Mermaid escrito por un LLM, lee nuestro artículo sobre herramientas de IA para diagramas de bloques.

Dónde encajan las pizarras de Atrix, y qué no hacen

Atrix es la herramienta que construimos, así que primero los límites. Las páginas de Atrix pueden contener pizarras de Excalidraw como bloques, en blanco o a partir de trece plantillas que incluyen arquitectura y diagrama de flujo. Dibujar en ellas es manual: la pizarra de Atrix no genera diagramas a partir de texto. Lo que sí tienes es el diagrama justo debajo del párrafo que lo explica, dentro de una página vinculada al proyecto, con edición simultánea, comentarios e historial de versiones.

La parte de IA de Atrix trabaja sobre la escritura, no sobre el dibujo. Una ejecución Develop toma un brief y produce requisitos, un documento de arquitectura y tareas planificadas; el documento de arquitectura es texto, y a partir de él dibujamos el diagrama de contenedores en la pizarra de la misma página. La página de documentos y pizarras describe exactamente lo que hace la pizarra, y la página del agente de IA describe lo que produce una ejecución Develop. Si quieres una herramienta que dibuje el diagrama a partir de un prompt, usa Miro AI o Eraser y enlaza el resultado desde tu documento.

Para el documento que suele rodear al diagrama, lee cómo escribir un documento de arquitectura con IA.

Preguntas frecuentes

¿Qué es un diagrama de bloques en arquitectura de software?

Un diagrama de bloques muestra las partes principales de un sistema como cajas y sus relaciones como flechas, sin detalle de implementación. En términos de C4, casi todos los diagramas de bloques de software son diagramas de contexto o de contenedores.

¿Cuál es la mejor forma de dibujar un diagrama de arquitectura en una pizarra?

Escribe la pregunta que responde el diagrama, dibuja primero personas y sistemas externos, luego los contenedores en el centro, después las flechas etiquetadas, y termina con leyenda y fecha. Quédate en una docena de cajas y un solo nivel de detalle.

¿Puede la IA dibujar un diagrama de arquitectura de sistema?

Sí, como primer borrador. Miro AI y Eraser DiagramGPT generan diagramas editables desde un prompt, y cualquier LLM puede escribir código Mermaid para renderizarlo en otro sitio. Aun así debes revisar cada caja y cada flecha, porque el borrador solo refleja lo que describiste.

¿Qué es el modelo C4?

El modelo C4, de Simon Brown, describe la arquitectura de software en cuatro niveles: contexto del sistema, contenedores, componentes y código. Cada nivel amplía el anterior. También define diagramas complementarios de panorama de sistemas, comportamiento dinámico y despliegue.

¿Atrix genera diagramas a partir de texto?

No. Atrix tiene pizarras de Excalidraw dentro de las páginas, con una plantilla de arquitectura, y dibujar en ellas es manual. Su agente de IA escribe documentos de arquitectura en texto, que puedes convertir en diagrama en la pizarra de la misma página.

Siguiente paso

Abre una página, inserta una pizarra con la plantilla de arquitectura y dibuja el diagrama de contenedores de tu sistema con el método de 20 minutos. La página de documentos y pizarras muestra cómo encajan páginas y pizarras.

Fuentes

Consultadas en octubre de 2026: modelo C4, generador de diagramas con IA de Miro, precios de Miro, Eraser DiagramGPT, precios de Eraser, tldraw, licencia de tldraw.

Cómo dibujar un diagrama de bloques de arquitectura en una pizarra en 20 minutos, y cuándo ayuda la IA