Tools mentioned in this article
Open the browser-based tool while you read and try the workflow immediately.
Ese Familiar Momento de Pavor
“Oye, ¿no habíamos añadido una instancia de RabbitMQ delante de este servidor de API?”
Cuando un ingeniero junior señaló esto casualmente durante una reunión, se me heló la sangre. El diagrama de infraestructura que flotaba en nuestra Wiki interna me devolvía la mirada, mostrando con orgullo una marca de tiempo de ‘Última actualización’ de hace seis meses.
Seamos sinceros, la infraestructura evoluciona constantemente. Añadimos una caché Redis aquí, un proxy inverso allá. Pero pasar por el enorme dolor de abrir una pesada herramienta de dibujo gráfico, arrastrar pequeños iconos cuadrados, alinear flechas dolorosamente, exportar el PNG y subirlo a la Wiki… Es demasiada fricción. Todo el mundo piensa: “Definitivamente actualizaré el diagrama más tarde”, y por supuesto, nadie lo hace nunca.
Anhelando ‘Diagrama como Código’
Para matar este problema del “diagrama siempre desactualizado”, recurrí a Mermaid.js. La idea de ‘Diagrama como Código’ (Diagram as Code) es un sueño para los desarrolladores: escribes un poco de texto, lo envías a git y aparece mágicamente un hermoso diagrama.
Pero hacer esto localmente tenía sus peculiaridades. Tratar de escribir gráficos anidados complejos (como una instancia EC2 dentro de una VPC dentro de una región de AWS Cloud) requería aprender una sintaxis que no era exactamente intuitiva. Escribía el código, esperaba a que se construyera una vista previa de PR, solo para descubrir que mis flechas apuntaban hacia atrás.
Viéndolo Construirse Mientras Escribes
“Solo quiero escribir el texto y ver cómo el diagrama se construye suavemente al otro lado de mi pantalla en tiempo real”.
Ese deseo completamente egoísta es lo que dio a luz a este “Constructor de Diagramas de Infraestructura” (Infra Diagram Builder).
Mi regla más estricta mientras lo construía fue cero comunicación con el servidor. Los diseños de infraestructura son básicamente los planos de la bóveda de la empresa. No hay absolutamente ninguna manera de que quisiera que pegaras eso en una herramienta que envía datos a un servidor aleatorio (incluso si es mi servidor aleatorio). Así que, forcé toda la tubería de renderizado a JavaScript local del lado del navegador.
Si actualmente temes a una actualización de la documentación de tu infraestructura, intenta escribir algo de código en esta herramienta. Ver encajar el diagrama en su lugar te da esta sensación extraña pero satisfactoria de poder arquitectónico supremo.