Los diagramas como código son una de las mejores ideas que la ingeniería adoptó en la última década. Un diagrama que vive en un archivo de texto es un diagrama que puedes revisar, comparar y revertir. Viaja con el código que describe y nunca se pierde en la carpeta de descargas de nadie.
Hay una pega, y todo el que ha mantenido un diagrama como código sabe exactamente cuál es. El texto es una forma estupenda de almacenar un diagrama y una forma pésima de organizarlo. En cuanto quieres mover una sola caja dos centímetros a la izquierda, vuelves a la sintaxis, adivinando rangos, direcciones y reglas de maquetación invisibles, renderizando una y otra vez hasta que el motor por fin pone la cosa donde tu ojo la quería desde el principio.
La pizarra es la mitad que falta
La gente recurre a una pizarra porque responde a otra pregunta. El código responde a "cuál es la fuente de verdad". Una pizarra responde a "se ve bien esto". Señalas una caja y la arrastras. Rodeas en rojo la ruta arriesgada. No piensas en cómo está codificada la maquetación, porque no hay codificación; solo están el dibujo y tu mano.
La propuesta de LetDraw es que no deberías tener que elegir. Pega el código de tu diagrama y se convierte en formas reales y editables en un lienzo. No una imagen plana que solo puedes mirar, sino cajas y flechas de verdad que puedes agarrar. Este es el tipo de código fuente que la mayoría de los equipos ya guarda en un repo:
graph TD A[Client] --> B[API Gateway] B --> C[Auth Service] B --> D[Orders Service] D --> E[(Database)]
Importa ese Mermaid y LetDraw no te devuelve una imagen. Te devuelve el grafo como formas que puedes mover:
Ahora la parte tediosa ha terminado. No has ajustado ni una sola directiva de maquetación. Obtuviste una primera versión gratis, y todo lo que hay en el lienzo es tuyo para ajustarlo.
Mueve una caja, corrige la nota, resalta la ruta
Como la importación produce formas auténticas, la mitad de pizarra simplemente funciona. Haces las cosas que son dolorosas en texto y triviales a mano:
- Mueve una caja adonde tu ojo la quiere, sin volver a renderizar para comprobarlo
- Cambia el estilo de un nodo para que el que importa destaque sobre el resto
- Añade una nota junto a la parte por la que los revisores siempre preguntan
- Resalta una ruta para mostrar el flujo de peticiones que te interesa hoy
Las flechas te ayudan en lugar de pelearse contigo. Las puntas de flecha nativas de inicio y fin vienen incluidas, junto con las puntas huecas de UML para la herencia y la cardinalidad de pata de gallo de ER para el trabajo con esquemas. Nunca dibujas un marcador a mano ni finges una notación con un triángulo girado. Y cuando arrastras una caja por encima de otra, los conectores inteligentes vuelven a enrutar la flecha alrededor de tus formas automáticamente, así que la línea se mantiene limpia en lugar de atravesar un nodo.
El texto es donde debe vivir un diagrama. Un lienzo es donde debe organizarse. No deberías tener que elegir uno.
El ida y vuelta es lo esencial
Esta es la parte que mantiene todo honesto. Cuando terminas de ajustar, exportas el dibujo de vuelta a Mermaid o D2. El diagrama regresa a tu repo como código, revisable en un pull request como cualquier otra cosa. El ciclo es así:
- El código de tu repo es la fuente de verdad, comparado y revisado
- El lienzo es donde una persona lo organiza y lo hace legible
- De nuevo código a la salida, para que la maquetación mejorada se publique como texto
Ese último paso es lo que separa "importé un diagrama una vez" de "diagramas como código que una persona realmente soporta mantener". La sintaxis deja de ser un muro. Conservas la revisabilidad del código y la ergonomía de una pizarra, y ninguna de las dos tiene que perder.
Cómo probarlo con Mermaid o D2
Abre un lienzo, usa Generar desde código y pega un fragmento de Mermaid o D2 que ya tengas. Arrastra las cajas hasta que se lea como lo dibujarías en una pared. Después expórtalo de nuevo a código y ponlo en tu repo. Todo el recorrido, de código a lienzo y de vuelta a código, lleva más o menos lo mismo que leer esto.