TL;DR
Get business pricing on monitors, keyboards and dev gear
- Business-only prices and quantity discounts
- Tax-exempt purchasing
- Multiple users, one account, clear invoices
Reladraw is a version 0.13.0 diagram language introduced in a Show HN post for people who want to specify where diagram elements go without manually setting every coordinate. Its TypeScript parser, layout engine and SVG renderer are available through a command-line tool and a web component; the project says the syntax is still changing.
The Reladraw project has introduced a text-based language for diagrams that lets authors describe both the elements and their relative positions, such as placing one node below another. The project presents it as an option between automatic layout tools and editors that require manual placement, and says version 0.13.0 is early stage, with syntax changes expected.
In its GitHub project description, Reladraw’s creator says the aim is to make custom, expressive diagrams without the effort of arranging every item by hand. A diagram source file names nodes and gives placement instructions: the example syntax creates a web app, interface, API and database, then places the interface below the app and the database to the right. It also supports a labeled connection from the API to the database, with specified connection sides.
The project provides two ways to render a diagram. Its command-line tool converts a .reladraw file into an SVG, while a browser page can load the project’s JavaScript module and use a reladraw-diagram element containing the diagram source. The project says the web element replaces that content with an SVG. It also describes theme options and says syntax errors appear where the diagram would have been, with line numbers counted from the start of the diagram.
The parser, layout engine and SVG renderer are written in TypeScript, and the project says they have no runtime dependencies. Its license is Apache-2.0 for the code; the project name, logo and other marks are not covered by that license, according to the repository’s notice. The project invites issues, particularly examples of diagrams it cannot represent, and says issues are more helpful than pull requests while the language is changing quickly.
Reladraw addresses a practical tradeoff for people who want a diagram to follow a specific visual arrangement. The project contrasts its approach with Mermaid, Graphviz and D2, which it says determine positions after users declare boxes and connections. That can work when automatic layout suits the intended result, but may not provide the control an author wants over a particular composition.
At the other end, tools such as draw.io and Excalidraw allow direct placement, but the project says arranging objects manually takes effort. Reladraw’s proposition is that users can give relative placement instructions in text, retaining some control over composition without specifying absolute coordinates for every item. Whether that proves faster or more expressive for a given workflow will depend on the diagram and the author; the project description does not provide comparative measurements.
The project also documents a way to install a Reladraw skill for coding agents, including Codex, Claude Code, Cursor and Copilot. That could let an agent work with the diagram language as text rather than manipulate coordinates or a verbose editor file. The repository describes how to install the skill, but does not report user adoption or independent evaluations of agent-generated diagrams.
From Manual Drawing to Relative Rules
Diagram tools generally make different choices about who controls layout. In the project’s description, declarative tools take node and connection definitions and calculate positions. Visual editors let a person arrange objects directly. Reladraw is designed around an intermediate method: authors name diagram elements and express placement as relationships, including “below” and “right of.”
The creator says the idea came from wanting custom arrangements without the inefficiency of drawing them manually. The repository includes an example architecture diagram in both draw.io and Reladraw formats, along with syntax documentation and other examples. These materials show the project’s intended workflow; they do not, on their own, establish how it compares with other tools across different kinds of diagrams.
Reladraw can be installed globally through npm or built from a cloned repository, according to its documentation. For browser use, the instructions load a module from jsDelivr and place source inside a custom HTML element. The instructions note that a less-than sign followed by a letter in the diagram text must be written as the HTML entity <, because the page’s HTML is read before the diagram is processed.
““reladraw is a text language for diagrams where you say where things go.””
— Reladraw project description on GitHub
Syntax and Capabilities Still Developing
The project labels Reladraw early stage and says its language is not stable. It does not specify which syntax changes are planned, when the language might stabilize, or whether existing diagram files will need revisions. Readers considering it for ongoing work should account for that stated possibility.
The repository does not give comparative performance or usability results against Mermaid, Graphviz, D2, draw.io or Excalidraw. It also does not state how large or active the user community is, or how the tool handles especially complex layouts. The documentation offers examples and an invitation to report unsupported diagrams, but those details remain open.
Issues Will Shape the Language
The project’s stated next step is community feedback through GitHub issues, with particular interest in examples of diagrams users cannot express in Reladraw. The creator says this feedback is more useful than pull requests while the syntax is changing quickly. No release schedule or specific upcoming feature is given.
People assessing the tool can try its browser demonstration, inspect the repository’s syntax guide and examples, or install the command-line package to produce SVG output. The project also documents agent skill installation. Future releases may clarify how the language evolves, but the repository material provided for this announcement does not name a planned milestone.
Key Questions
What is Reladraw?
Reladraw is a text language for diagrams. Authors define nodes and use relative placement instructions, such as putting one node below or to the right of another.
How can a Reladraw diagram be rendered?
The project offers a command-line tool that converts a .reladraw file into SVG and a browser element that renders diagram source inside a web page.
Is the Reladraw syntax stable?
No. The project says it is early stage and that the language’s syntax may change.
Can coding agents use Reladraw?
The project provides instructions for installing a Reladraw skill for agents including Codex, Claude Code, Cursor and Copilot. The repository does not provide independent results on agent performance.
What license applies to Reladraw?
The project says its code is licensed under Apache-2.0. Its notice says the license does not grant rights to the Reladraw name, logo or other project marks.
Source: hn
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
