Reladraw, un lenguaje de diagramas donde la posición se escribe en lugar de calcularse

Reladraw es un lenguaje de texto para diagramas en el que la posición de cada elemento se declara por escrito en vez de dejarla en manos de un algoritmo. En sus ficheros de ejemplo no hay una sola coordenada: un nodo está debajo de otro, una caja queda a la derecha de un clúster y una flecha va entre dos máquinas porque alguien lo escribió así. El proyecto va por la versión 0.4.0, es open source y se instala desde npm.

El autor lo plantea como un término medio. Mermaid, Graphviz y D2 obligan a declarar entidades y conexiones y colocan el resto por ti: cómodo para la mayoría de diagramas, inservible cuando tienes en la cabeza una imagen concreta y te importa dónde cae cada cosa. En el otro extremo están draw.io, Excalidraw o Figma, donde colocas todo a mano y cada retoque de un diagrama complejo se paga en minutos de ratón. Reladraw intenta quedarse con lo bueno de los dos: control sobre la disposición, pero expresado en frases que se pueden editar.

El detalle interesante está en el resolutor. Una separación es una distancia mínima, nunca exacta. Si dices que dos cosas van una al lado de otra y luego metes una tercera entre ambas, las dos primeras se separan lo justo para que quepa, y si borras la tercera vuelven a cerrarse. Cada eje es un conjunto de distancias mínimas y el trazado más ajustado que las cumple se obtiene por caminos más largos, así que hay una única solución y no una búsqueda iterativa. El beneficio práctico es que ningún número se queda obsoleto cuando un texto crece y descuadra una caja.

Qué trae y qué le falta

La implementación es un parser, un resolutor y un renderizador a SVG escritos en TypeScript, sin dependencias en tiempo de ejecución, más una herramienta de línea de comandos que toma un fichero de texto y devuelve un SVG suelto. Se instala con npm install -g reladraw y se ejecuta sobre un .reladraw. El ejemplo de arquitectura que usa el autor para comparar tiene 44 sentencias.

Lo que aún no está, y el propio autor lo enumera: no hay informe de diagnósticos, así que la herramienta renderiza o falla, pero no explica qué le pasa a una imagen que sí ha dibujado. El enrutado de aristas es básico: puedes indicar por qué lado de un nodo sale y entra una conexión y por qué hueco pasa, pero una arista que no diga nada es una línea recta entre centros y atravesará lo que se ponga por delante. Los iconos y las formas son conjuntos cerrados, y la sintaxis no es estable.

El gancho para agentes

El caso habitual no es dibujar un diagrama, es modificarlo: mover un servicio a la izquierda o colocar una cola detrás de algo. Con coordenadas, un agente tiene que reconstruir la imagen a partir de los números antes de decidir cuáles cambiar; con auto-layout no hay nada que leer, porque la disposición nunca se escribió. Aquí el reparto está en el fichero como frases, y cambiar el dibujo es cambiar la frase. El repositorio incluye un skill para agentes que enseña la sintaxis, porque el lenguaje es demasiado nuevo para estar en los datos de entrenamiento de ningún modelo; se instala con npx skills add reladraw/reladraw -g y funciona en Claude Code, Codex, Cursor o Copilot. Aviso del autor: es una copia del momento de la instalación, no un enlace vivo, y hay que reinstalarlo cuando cambie la sintaxis.

Merece la pena probarlo en el navegador antes de decidir si encaja en el flujo de trabajo, porque la pregunta real no es si sustituye a Mermaid, sino si el coste de escribir cada posición se compensa con no tener que recolocar a mano cada vez que el sistema cambia. También hay documentación sobre el formato de skills para agentes si vas a integrarlo en tu propio asistente. El propio autor avisa de que la sintaxis cambiará: es un 0.4.0 y hay que leerlo como tal.