Back to directory

reladraw

A text-based diagram language where node positions are declared relative to each other, sitting between Mermaid-style automatic layout and the manual, absolute placement of tools such as draw.io.

reladraw

reladraw is a text language for drawing diagrams by declaring where things go relative to one another, rather than either leaving layout entirely to an automatic algorithm, as Mermaid, Graphviz, and D2 do, or placing every node at an absolute coordinate, as draw.io and Excalidraw require. A small script names nodes, positions them above, below, or beside each other, and connects them with labeled edges, without the author needing to pick coordinates by hand.

A command-line tool compiles a reladraw file into an SVG diagram, and the language can also be tried directly in a browser. It can be installed as a skill for AI coding agents such as Claude Code, Codex, Cursor, and Copilot, so an agent can generate and edit diagrams in the same syntax.

Its parser, layout engine, and SVG renderer are written in TypeScript with no runtime dependencies, though the language itself is still described as an early, changing work in progress.

More in Design tools

See all 97
  • Wave

    wave.subworkflow.ai

    A browser-based tool for designing layered gradient wave backgrounds, with a colour wheel per layer, presets and shape or colour shuffling, exported as a looping MP4 or GIF.

  • SpikeUI

    nimoxi.com

    A visual, WYSIWYG UI designer that exports a design directly to HTML, CSS and JavaScript or to a native Windows application, sold as a one-time purchase with no subscription, and including a built-in AI assistant that can build components from a description.

  • Bastardica

    bastardica.mitpit.com

    A browser tool that mixes, stretches, and squishes two fonts together glyph by glyph, exporting the result as a downloadable TTF, OTF, or WOFF2 web font.