La mayoría de los diagramas técnicos se crean utilizando uno de dos extremos: motores de auto-layout o herramientas de posicionamiento absoluto. Las herramientas de auto-layout como Mermaid, Graphviz y D2 permiten declarar entidades y conexiones, pero el software decide dónde se ubican [1]. Por el contrario, herramientas como Figma, Excalidraw y draw.io ofrecen un control total sobre la ubicación, pero cada edición en un diagrama complejo requiere el movimiento manual y lento de los elementos [1].
Reladraw introduce un punto medio. Es un lenguaje de texto para diagramas donde se describe la ubicación de los elementos utilizando términos relativos en lugar de coordenadas [1]. En lugar de adivinar cómo un algoritmo renderizará un flujo o arrastrar manualmente cuadros a través de un lienzo, usted define la disposición en lenguaje sencillo [S1, S3].
Cómo funciona la ubicación relativa
En reladraw, cada posición se establece en relación con otro elemento [1]. No existen las coordenadas en el lenguaje en ninguna de sus formas [3]. En su lugar, se utilizan declaraciones direccionales para vincular los nodos entre sí [2].
Por ejemplo, un nodo puede colocarse above (encima), below (debajo), left of (a la izquierda de) o right of (a la derecha de) otro nodo [2]. También se pueden usar direcciones combinadas, como above-left of, o usar level with para asegurar que dos elementos compartan una línea central [2]. Para manejar agrupaciones más complejas, se puede colocar un elemento right of A and B, lo que lo alinea respecto al cuadro que encierra a ambos elementos [2].
Las distancias en reladraw se gestionan como espacios mínimos en lugar de medidas exactas [3]. Un espacio nunca es un número exacto; en cambio, los elementos quedan tan cerca como las declaraciones lo permitan [3]. Si coloca un nodo between (entre) otros dos, este los separa exactamente lo necesario para encajar [3]. Si ese nodo central se elimina, los elementos restantes se vuelven a juntar automáticamente [3].
Mejorando la diagramación de agentes de IA
Las herramientas de diagramación tradicionales crean un “punto ciego” para los agentes de IA. Cuando un agente emite código Mermaid, está adivinando un diseño que un algoritmo resolverá más tarde [1]. El agente no puede ver el SVG resultante, lo que significa que debe renderizar la imagen y observarla para encontrar errores, creando un proceso de ida y vuelta lento [3].
Con las herramientas basadas en píxeles, el problema es distinto. Un agente debe reconstruir toda la imagen a partir de una lista de números antes de poder decidir qué coordenadas cambiar para mover un solo servicio [1].
Reladraw resuelve esto integrando la disposición directamente en el archivo fuente mediante frases [1]. Esto permite que un agente pueda:
- Confirmar la intención volviendo a leer el código fuente para verificar que una base de datos esté
under(debajo de) una API [S1, S3]. - Cambiar la imagen simplemente editando la frase que define una posición [1].
- Evitar la necesidad de interpretar sistemas de coordenadas complejos [1].
Sin embargo, debido a que la herramienta resuelve el renderizado final a partir de estas declaraciones, un agente no puede confirmar ciertos resultados solo mediante texto [3]. No puede saber si una cadena de texto larga se desbordó de su nodo o si dos clústeres anclados independientemente se solaparon sin un renderizado visual o un informe de diagnóstico [3].
Sintaxis e implementación
Reladraw utiliza un formato sencillo de una declaración por línea, sin anidamientos ni sangrías significativas [3]. Esto garantiza que ninguna línea dependa de la posición de otra [1].
Los elementos clave de la sintaxis incluyen:
- Nodos: Se definen como
node name "text"[2]. Los nombres con puntos (por ejemplo,server.docker) indican un nodo hijo, siempre que el padre se haya declarado primero [2]. - Bordes (Edges): Las conexiones se definen mediante flechas, como
edge a -> b[2]. Se puede especificar la curvatura de la línea usandofrom: right to: left[2]. - Estilo: La apariencia se gestiona mediante la palabra clave
styleo dentro de corchetes después del texto, permitiendo colores, tamaños y formas personalizadas comorectangle,documentodatabase[2].
Para usar reladraw, puede escribir un archivo .reladraw y renderizarlo a un SVG independiente mediante el comando reladraw diagram.reladraw -o diagram.svg [3]. Para quienes utilizan asistentes de IA como Claude Code, Cursor o Copilot, se puede instalar una habilidad de agente específica mediante npx skills add reladraw/reladraw -g para enseñar la sintaxis del lenguaje al modelo [1].
Si desea experimentar con el lenguaje sin instalar nada, puede probar el playground de reladraw en su navegador para ver cómo se resuelven los diseños en tiempo real mientras edita el código fuente [S1, S2].
