Reladraw é uma linguagem de diagramas como código, open source, em que você decide onde vai cada nó: você escreve “o banco de dados fica à direita do app” e o Reladraw calcula as coordenadas. Mermaid e Graphviz escolhem o layout por você; Draw.io e Excalidraw obrigam você a arrastar cada caixa à mão. O Reladraw fica no meio, e a fonte é um arquivo de texto simples que você versiona no Git junto com o seu código.
Foi lançado como Show HN em 26 de setembro de 2026, reuniu 119 comentários e é publicado sob a licença Apache-2.0. É muito novo: o próprio README o descreve como um projeto em estágio inicial que já funciona, e avisa que a sintaxe vai mudar.
O que é o Reladraw?
O Reladraw é uma linguagem de diagram as code baseada em posicionamento relativo. Você declara nós, diz onde cada um fica em relação aos outros e os conecta com arestas (edges). Uma CLI converte o arquivo em um SVG autocontido.
O autor o construiu a partir de uma frustração que qualquer pessoa que desenha diagramas de arquitetura vai reconhecer:
- Ferramentas com auto-layout (Mermaid, Graphviz, D2): você declara caixas e conexões, e o motor decide as posições. Se você tem uma imagem concreta em mente, acaba brigando com ele.
- Ferramentas de tela (Draw.io, Excalidraw): controle total, mas cada mudança é arrastar. Para um agente de IA, editá-las significa recalcular coordenadas em XML verboso.
A aposta do Reladraw é que a maioria dos diagramas não precisa de coordenadas absolutas. Precisam de frases como “à direita de”, “abaixo de” e “no mesmo nível que”.
Como se escreve um diagrama no Reladraw?
Com instruções de posição relativa em vez de coordenadas. Este é o exemplo do README do projeto:
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
Não há uma única coordenada. Algumas regras da referência de sintaxe explicam como funciona:
- A contenção é um nome com ponto.
app.uifica dentro deapp. - Um contêiner se dimensiona sozinho para caber os seus filhos.
- Os espaços (gaps) são mínimos, não distâncias exatas. Se você coloca um nó entre outros dois, eles se afastam para abrir espaço. Se você o apaga, eles voltam a se juntar.
from:eto:indicam de que lado do nó sai uma aresta e a que lado ela chega.- As contradições são erros. Se você coloca um nó à esquerda e à direita do mesmo alvo, a ferramenta se recusa e nomeia as instruções em conflito. Como o autor resumiu no HN: nada vence em silêncio.
A referência completa está em SYNTAX.md, dentro do repo. Ela muda de versão para versão, então trate qualquer trecho, incluindo o de cima, como ilustrativo.
Reladraw ou Mermaid.js?
Escolha o Mermaid.js quando o diagrama tem uma forma fixa. Diagramas de sequência e de Gantt são os casos mais claros, e o Mermaid ganha em alcance. Vários comentaristas no HN concordaram: quando a estrutura é fixa, o layout automático do Mermaid é uma vantagem, não um problema.
Escolha o Reladraw quando a posição tem significado. Os casos típicos são diagramas de arquitetura, fluxogramas e esquemas do tipo “o cliente à esquerda, a nuvem à direita”. É aí que o Mermaid tende a organizar as coisas do seu próprio jeito assim que o diagrama cresce. Essa é a lacuna que o Reladraw quer preencher.
O Reladraw funciona no GitHub como o Mermaid?
Não, pelo menos no momento da publicação desta nota (3 de outubro de 2026). O GitHub renderiza blocos de código Mermaid de forma nativa, e o Reladraw não tem equivalente. O autor confirmou no HN que a alternativa é exportar para SVG e vincular a imagem.
Os editores são outra história, porque aceitam extensões. Um desenvolvedor da comunidade já publicou uma extensão para o VS Code que renderiza o Reladraw dentro do Markdown. Ela não é oficial e não é mantida pelo projeto Reladraw.
Reladraw ou D2 com TALA?
Depende de quanto controle você quer, e é a comparação que mais vale a pena fazer com cuidado. O README agrupa o D2 com o Mermaid e o Graphviz, como ferramentas que decidem as posições por você. Um comentarista no HN objetou que o motor de layout TALA do D2 oferece bastante controle manual, incluindo a direção por contêiner e a opção de manter formas próximas umas das outras. Ele também observou que o TALA era comercial e agora é open source.
A resposta do autor marca a diferença real. O TALA mantém o layout automático e dá a você formas de empurrá-lo, como “deixe isto fixo aqui” ou “mantenha estes juntos”. O Reladraw não tem um layout automático para empurrar: você declara as relações e ele calcula as posições a partir delas.
Se você já usa o D2, nós o cobrimos aqui: Como fazer um diagrama de arquitetura com D2 e TALA
Como se instala o Reladraw?
A opção mais rápida não exige instalar nada: o playground roda no navegador.
Para a CLI, o README indica:
npm install -g reladraw
reladraw diagram.reladraw -o diagram.svg
O pacote do npm declara Node 18 ou superior. A referência de sintaxe também documenta uma flag --theme, que renderiza o mesmo arquivo com outro tema sem editá-lo:
reladraw arch.reladraw --theme light
Para uma página web, carregue um script e escreva o diagrama dentro do 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>
Como fazer diagramas com IA usando o Reladraw?
Com o seu agente de código e o skill que vem no próprio repo. É metade do sentido do projeto:
npx skills add reladraw/reladraw -g
Segundo o README, -g instala o skill para todos os agentes que você usa, incluindo Claude Code, Codex, Cursor e Copilot. Sem -g, ele é instalado apenas no projeto atual. Para um único agente, adicione -a:
npx skills add reladraw/reladraw -g -a claude-code
O skill é uma cópia do momento em que você o instala, então execute o comando de novo quando saírem versões novas.
O argumento do autor, autodeclarado e sem benchmark, é este: um agente que desenha com Graphviz não consegue prever o layout final, então cai em ciclos de renderizar, olhar e corrigir. Um agente que edita o XML do Draw.io gasta tokens recalculando coordenadas. Com o Reladraw, o agente declara a intenção (“isto fica à direita daquilo”) e a ferramenta faz a aritmética. O próprio autor descreve a integração com agentes como básica por enquanto.
Se você procura diagramas de arquitetura gerados por um agente hoje mesmo, veja também Archify: como fazer diagramas de arquitetura com Claude Code e comparar duas versões.
O Reladraw está pronto para produção?
Está pronto para ser testado, não para ser padronizado. O projeto publicou 24 versões no npm nos seus primeiros 24 dias. No momento da publicação desta nota, o README do GitHub já mencionava uma versão mais nova do que a última disponível no npm, e o changelog registra mudanças incompatíveis entre versões menores.
Para uma equipe, o prático é fixar a versão no projeto e regenerar os diagramas no CI. Assim, uma mudança de sintaxe aparece como um build com falha e não como um diagrama quebrado em silêncio.
E você? Quando um diagrama realmente importa, você o desenha à mão ou o escreve como código?
- Mermaid
- D2 ou Graphviz
- Draw.io ou Excalidraw
- Prefiro outra opção (conte qual)
Comente abaixo ou, se este artigo chegou a você por e-mail, responda diretamente ao e-mail: a sua resposta é publicada aqui.
Relacionado: Como fazer um diagrama de arquitetura com D2 e TALA