¿Tu diagrama de arquitectura sigue siendo la foto de una pizarra?

Cómo dibujar un diagrama de arquitectura en el navegador: iconos, grupos y exportación PNG/SVG

La foto de la pizarra de una reunión de diseño acaba siendo «el último diagrama de arquitectura». Pasa más de lo que parece. Pasarlo a limpio en una herramienta de dibujo significa trazar marcos, buscar iconos y enderezar cada quiebro de cada línea, y eso cuesta más de lo que aparenta.

Los diseños automáticos a partir de texto, como Mermaid, son rápidos, pero no son buenos para encerrar fronteras en un marco («dentro de Cloudflare», «dentro de nuestro servidor», «servicios externos») ni para decidir dónde va cada cosa.

Por eso creamos el Editor de diagramas de arquitectura. Coloca libremente nodos con iconos y marcos de grupo, y las líneas se conectan solas en ángulos rectos, así que obtienes un diagrama ordenado solo con el navegador.

Qué puede hacer el editor

  • Marcos de grupo: continuos o discontinuos, 7 colores, anidables. Al mover un marco se mueven los nodos de su interior
  • Nodos con icono: 20 iconos de línea genéricos y una nota bajo el nombre, como Nitro o PostgreSQL
  • Líneas en ángulo recto: etiquetas, trazo discontinuo, color azul y elección de los lados por los que sale y entra
  • Tus propias imágenes: importa logotipos como imágenes (no se incluyen logotipos de marca)
  • Exportación: PNG / SVG / JSON, con deshacer/rehacer y autoguardado en el navegador

Ni el contenido ni las imágenes salen nunca del navegador.

Paso a paso

Tomemos como ejemplo la estructura clásica «usuarios → edge → servidor de aplicación → servicios externos».

  1. Empieza por los marcos de grupo: crea tres marcos, «Edge», «Servidor de aplicación» y «Externos», con colores distintos. Son la base que muestra de un vistazo dónde se ejecuta cada parte
  2. Coloca los nodos dentro de los marcos: con un marco seleccionado, «Añadir nodo» lo coloca en su interior. Escribe un nombre y una nota (la tecnología) y elige un icono
  3. Traza las líneas: pulsa «Conectar» y haz clic en el nodo de origen y luego en el de destino. También sirve Mayús+clic en otro nodo con uno seleccionado
  4. Añade significado con etiquetas: usa el protocolo o la ruta, como HTTPS o /api, como etiqueta de la línea
  5. Exporta: PNG para pegar, SVG para una versión que no se degrada al ampliar, JSON para seguir editando después

Consejos para diagramas legibles

  • Mantén el flujo de izquierda a derecha (de fuera hacia dentro): usuarios a la izquierda, luego edge, servidor y servicios externos, para que el tráfico se lea con naturalidad
  • Colorea solo las líneas protagonistas: poner en azul únicamente el tráfico principal de los usuarios hace destacar el esqueleto del sistema
  • Usa trazos discontinuos para los flujos operativos: las copias de seguridad y los despliegues no son la ruta principal de las peticiones
  • Limita los marcos de grupo a tres o cuatro: demasiados marcos ocultan las fronteras. Divide el detalle en otro diagrama
  • Si una línea no va por donde quieres, fija sus lados: las líneas rodean solas otros nodos y nombres de grupo, pero puedes fijar el lado de inicio y de fin (arriba / abajo / izquierda / derecha) cuando quieras decidir tú la ruta

Gestiona los diagramas como código

Guarda en el repositorio el archivo de «Guardar como JSON»: cuando cambie la infraestructura, cárgalo, edítalo y revisa la diferencia en una PR. Si quieres diferencias en texto o necesitas Mermaid, el Constructor de diagramas de infraestructura encaja mejor. Usa este editor cuando importen la disposición y los iconos.

Preguntas frecuentes

¿En qué se diferencia de un diagrama Mermaid?

Mermaid coloca todo automáticamente, lo cual es cómodo, pero no permite ajustar la posición de los nodos, los iconos ni los marcos anidados. Este editor te deja colocar las cosas tú mismo y, a cambio, puedes crear un diagrama cuidado con marcos de frontera e iconos.

¿Puedo usar iconos de AWS o Cloudflare?

No se incluyen logotipos de marca porque tienen condiciones de uso. Puedes usar los iconos genéricos o importar tu propia imagen (hasta 512 KB) en cada nodo. Sigue las directrices de cada empresa al usar un logotipo.

¿Puedo compartir el diagrama con otras personas?

Expórtalo como PNG / SVG y pégalo, o guárdalo como JSON y envíalo. Quien lo reciba podrá abrir el mismo diagrama con «Cargar JSON» y seguir editándolo.

¿Se envía lo que escribo a un servidor?

No. Todo se ejecuta en el navegador y ni el diagrama ni las imágenes importadas salen de él. El autoguardado solo usa el almacenamiento local de este navegador.

Conclusión

Si dibujar un diagrama es una tarea pesada, nunca se actualiza y al final nadie se fía de él. Dibuja dónde se ejecuta cada cosa con iconos y marcos, y deja que las líneas se ordenen solas. Con tan poca fricción, corregir el diagrama cuando cambia la infraestructura deja de ser una carga. Abre la herramienta y empieza editando el ejemplo.