TL;DR
Get the latest gadgets delivered free — and shop member deals
- Fast, free delivery on millions of items
- Access to Prime Big Deal Days deals on October 6–7
- Prime Video, Amazon Music and more included
Reladraw is a version 0.13.0 diagram language introduced in a Show HN post and published on GitHub. It lets authors specify relative positions for nodes in text, then render diagrams as SVG through a command-line tool or a web element. Its creator describes it as early-stage and says the syntax may change.
Reladraw, a text language for diagrams, was presented in a Show HN post as a way to specify where diagram elements go while generating SVG output. The project offers a command-line renderer and a web-page element; its creator says the software is at version 0.13.0 and that the language is still changing.
Reladraw’s author says the project grew from wanting to make expressive diagrams with custom arrangements without manually placing every item in a drawing editor. The GitHub project contrasts the language with tools such as Mermaid, Graphviz and D2, which accept declarations of boxes and connections but choose their positions automatically. It also contrasts Reladraw with editors such as draw.io and Excalidraw, where people can place objects directly but may need to adjust them by hand.
The example syntax uses named nodes and relative instructions. A diagram can declare a “Web app” node, place an “Interface” below it, put an “API” node beside the interface, and position a database to the right of the app. An edge can then connect the API to the database with a “queries” label and specify which sides the connection should use. The author says these relationships avoid manually choosing absolute coordinates.
The project documents two ways to render diagrams. Users can install the package with npm and run its command-line tool to turn a .reladraw file into SVG. A web page can load the project’s JavaScript module and place diagram source inside a <reladraw-diagram> element, which the project says is replaced by an SVG. The documentation also describes themes and in-place error messages that include line numbers.
Control Without Manual Coordinates
Reladraw addresses a practical trade-off for people who want diagrams to be both text-based and deliberately arranged. Automatic layout can be convenient when the relationships matter more than the picture, but may not match an author’s intended composition. Direct manipulation gives finer control, while requiring visual editing. Reladraw’s relative placement commands offer a way to express layout intent in source text without writing a complete set of coordinates.
That approach may be useful when diagrams need to sit alongside code or be regenerated as part of a project. The creator also describes using Reladraw with coding agents, and provides instructions for installing a skill that explains the language to supported agents. The project’s stated goal is to reduce the effort involved in having an agent edit diagram layouts. The source does not provide comparative tests or evidence that this workflow is faster, so the benefit remains the project’s intended use rather than a measured result.
For readers choosing a diagram tool, the project’s value will depend on how well its syntax handles their layouts and how often those layouts change. Its relative commands may suit diagrams whose structure and placement can be described compactly. It may be less suitable for authors who prefer to position every object visually or need features the current language does not offer.
Between Auto Layout and Editors
Reladraw’s project page frames the tool between two familiar approaches. In Mermaid, Graphviz and D2, authors describe elements and links, and the software determines the layout. In editors such as draw.io and Excalidraw, users arrange objects directly. Reladraw’s author argues that each approach has limits for a diagram whose author has a particular composition in mind: automatic positioning may not produce it, while direct placement takes more manual work.
The sample language uses relative relationships such as “below,” “right of” and “level with,” rather than requiring each object’s location to be entered as a pair of coordinates. The project includes a syntax reference and example files, including an architecture diagram. Its README shows both a before-and-after comparison using draw.io and Reladraw, though the supplied source text does not include enough detail to independently assess the diagrams’ complexity or the amount of work involved.
The repository identifies the parser, layout engine and SVG renderer as TypeScript software with zero runtime dependencies. It lists the license as Apache-2.0 for the code and says the license does not grant rights to the project name, logo or other marks. The README asks users to report diagrams that cannot be represented, saying issues are more helpful than pull requests while the language is changing quickly.
“I wanted to be able to create custom, expressive diagrams where I decided how to arrange the diagram, but without the inefficiency of manually drawing in draw.io.”
— Reladraw’s creator, in the GitHub project description
Syntax and Feature Stability
The source describes Reladraw as early-stage and says its syntax is not stable. It does not specify a release schedule, a compatibility policy, or which features may change. The project page also does not report independent testing, performance comparisons, adoption figures or user evaluations, so claims about reduced effort cannot be assessed from the supplied material.
It is also unclear how the current layout engine handles larger diagrams, complex routing, overlapping elements or unusual placement constraints. The examples and README demonstrate basic relative positioning and labeled edges, but do not establish the limits of the language. The source gives no date for the Show HN post, making it difficult to place the announcement precisely in a release timeline.
Feedback While the Language Evolves
The project invites users to try the browser demonstration, consult the syntax guide and examples, and file issues describing diagrams they cannot represent. Its README says issues are particularly helpful while the language is changing quickly. Users considering it for ongoing work can review the current syntax and keep in mind that it may change as the project develops. The source does not announce a next release or give a date for further milestones.
Key Questions
What is Reladraw?
Reladraw is a text language for diagrams. Authors declare nodes and describe their relative placement, and the project renders the result as SVG.
How does Reladraw differ from Mermaid?
The project describes Mermaid as a tool where authors declare boxes and connections and the software chooses positions. Reladraw adds commands for authors to specify relative placement themselves.
How can a diagram be rendered?
The project provides an npm command-line tool that converts a .reladraw file to SVG, as well as a JavaScript web element that renders diagram text in a page.
Is Reladraw ready for stable production use?
The project describes version 0.13.0 as early-stage and says its syntax is not stable. It does not provide a production-readiness assessment or compatibility guarantees in the supplied source.
Source: hn
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
