Reladraw es un lenguaje de diagramas como código, open source, en el que tú decides dónde va cada nodo: escribes «la base de datos va a la derecha de la app» y Reladraw calcula las coordenadas. Mermaid y Graphviz eligen el layout por ti; Draw.io y Excalidraw te obligan a arrastrar cada caja a mano. Reladraw se ubica en el medio, y la fuente es un archivo de texto plano que versionas en Git junto a tu código.
Se lanzó como Show HN el 26 de septiembre de 2026, juntó 119 comentarios y se publica bajo licencia Apache-2.0. Es muy joven: el propio README lo describe como un proyecto en etapa temprana que ya funciona, y advierte que la sintaxis va a cambiar.
¿Qué es Reladraw?
Reladraw es un lenguaje diagram as code basado en posicionamiento relativo. Declaras nodos, dices dónde va cada uno respecto de los demás y los conectas con aristas (edges). Una CLI convierte el archivo en un SVG autocontenido.
El autor lo construyó a partir de una frustración que reconocerá cualquiera que dibuje diagramas de arquitectura:
- Herramientas con auto-layout (Mermaid, Graphviz, D2): declaras cajas y conexiones, y el motor decide las posiciones. Si tienes una imagen concreta en mente, terminas peleando con él.
- Herramientas de lienzo (Draw.io, Excalidraw): control total, pero cada cambio es arrastrar. Para un agente de IA, editarlas significa recalcular coordenadas en XML verboso.
La apuesta de Reladraw es que la mayoría de los diagramas no necesitan coordenadas absolutas. Necesitan frases como «a la derecha de», «debajo de» y «al mismo nivel que».
¿Cómo se escribe un diagrama en Reladraw?
Con instrucciones de posición relativa en lugar de coordenadas. Este es el ejemplo del README del proyecto:
node app "Web app"
node app.ui "Interface"
node app.api "API" below app.ui
node store "Database" right of app level with app
edge app.api -> store "queries" from: right to: left
No hay ni una coordenada. Algunas reglas de la referencia de sintaxis explican cómo funciona:
- La contención es un nombre con punto.
app.uiva dentro deapp. - Un contenedor se dimensiona solo para que quepan sus hijos.
- Los espacios (gaps) son mínimos, no distancias exactas. Si colocas un nodo entre otros dos, estos se separan para hacerle lugar. Si lo borras, vuelven a juntarse.
from:yto:indican de qué lado del nodo sale una arista y a qué lado llega.- Las contradicciones son errores. Si pones un nodo a la izquierda y a la derecha del mismo objetivo, la herramienta se niega y nombra las instrucciones en conflicto. Como lo resumió el autor en HN: nada gana en silencio.
La referencia completa está en SYNTAX.md, dentro del repo. Cambia de versión en versión, así que toma cualquier fragmento, incluido el de arriba, como ilustrativo.
¿Reladraw o Mermaid.js?
Elige Mermaid.js cuando el diagrama tiene una forma fija. Los diagramas de secuencia y los Gantt son los casos más claros, y Mermaid gana en alcance. Varios comentaristas en HN coincidieron: cuando la estructura es fija, el layout automático de Mermaid es una ventaja, no un problema.
Elige Reladraw cuando la posición tiene significado. Los casos típicos son diagramas de arquitectura, diagramas de flujo y esquemas del tipo «el cliente a la izquierda, la nube a la derecha». Ahí Mermaid tiende a acomodar las cosas a su manera en cuanto el diagrama crece. Ese es el hueco que Reladraw quiere cubrir.
¿Reladraw funciona en GitHub como Mermaid?
No, al menos al momento de publicar esta nota (3 de octubre de 2026). GitHub renderiza bloques de código Mermaid de forma nativa, y Reladraw no tiene equivalente. El autor confirmó en HN que la alternativa es exportar a SVG y enlazar la imagen.
Los editores son otra historia, porque aceptan extensiones. Un desarrollador de la comunidad ya publicó una extensión para VS Code que renderiza Reladraw dentro de Markdown. No es oficial y no la mantiene el proyecto Reladraw.
¿Reladraw o D2 con TALA?
Depende de cuánto control quieras, y es la comparación que más vale la pena hacer con cuidado. El README agrupa a D2 con Mermaid y Graphviz, como herramientas que deciden las posiciones por ti. Un comentarista en HN objetó que el motor de layout TALA de D2 ofrece bastante control manual, incluida la dirección por contenedor y la opción de mantener formas cerca unas de otras. También señaló que TALA era comercial y ahora es open source.
La respuesta del autor marca la diferencia real. TALA mantiene el layout automático y te da formas de empujarlo, como «deja esto fijo aquí» o «mantén estos juntos». Reladraw no tiene un layout automático que empujar: declaras las relaciones y calcula las posiciones a partir de ellas.
Si ya usas D2, lo cubrimos aquí: Como hacer un diagrama de arquitectura con d2 y tala
¿Cómo se instala Reladraw?
La opción más rápida no requiere instalar nada: el playground corre en el navegador.
Para la CLI, el README indica:
npm install -g reladraw
reladraw diagram.reladraw -o diagram.svg
El paquete de npm declara Node 18 o superior. La referencia de sintaxis también documenta un flag --theme, que renderiza el mismo archivo con otro tema sin editarlo:
reladraw arch.reladraw --theme light
Para una página web, carga un script y escribe el diagrama dentro del HTML:
<script type="module" src="https://cdn.jsdelivr.net/npm/reladraw/dist/element.js"></script>
<reladraw-diagram>
node a "Parser"
node b "Renderer" right of a
edge a -> b
</reladraw-diagram>
¿Cómo hacer diagramas con IA usando Reladraw?
Con tu agente de código y el skill que trae el propio repo. Es la mitad del sentido del proyecto:
npx skills add reladraw/reladraw -g
Según el README, -g instala el skill para todos los agentes que uses, incluidos Claude Code, Codex, Cursor y Copilot. Sin -g, se instala solo en el proyecto actual. Para un solo agente, agrega -a:
npx skills add reladraw/reladraw -g -a claude-code
El skill es una copia del momento en que lo instalas, así que vuelve a ejecutar el comando cuando salgan versiones nuevas.
El argumento del autor, autodeclarado y sin benchmark, es este: un agente que dibuja con Graphviz no puede predecir el layout final, así que cae en ciclos de renderizar, mirar y corregir. Un agente que edita el XML de Draw.io gasta tokens recalculando coordenadas. Con Reladraw, el agente declara la intención («esto va a la derecha de aquello») y la herramienta hace la aritmética. El propio autor describe la integración con agentes como básica por ahora.
Si buscas diagramas de arquitectura generados por un agente hoy mismo, revisa también Archify: cómo hacer diagramas de arquitectura con Claude Code y comparar dos versiones.
¿Reladraw está listo para producción?
Está listo para probarlo, no para estandarizarlo. El proyecto publicó 24 versiones en npm en sus primeros 24 días. Al momento de publicar esta nota, el README de GitHub ya mencionaba una versión más nueva que la última disponible en npm, y el changelog registra cambios incompatibles entre versiones menores.
Para un equipo, lo práctico es fijar la versión en el proyecto y regenerar los diagramas en CI. Así, un cambio de sintaxis aparece como un build fallido y no como un diagrama roto en silencio.
¿Y tú? Cuando un diagrama de verdad importa, ¿lo dibujas a mano o lo escribes como código?
- Mermaid
- D2 o Graphviz
- Draw.io o Excalidraw
- Prefiero otra opción (cuéntanos cuál)
Comenta abajo o, si este artículo te llegó por correo, responde directamente al email: tu respuesta se publica aquí.
Relacionado: Como hacer un diagrama de arquitectura con d2 y tala