Show HN: Reladraw – A diagram language where you decide where to place things
Reladraw is a text-based diagramming language providing relative layout control for humans and AI agents, striking a balance between auto-layout tools and manual canvas drawing.
summary is enough The README and comments quickly explain how Reladraw bridges the gap between automatic layout and absolute positioning, making a full read unnecessary unless you are actively adopting it.
summary
Reladraw is an open-source, zero-dependency TypeScript library that lets users define diagrams via simple relative positioning instructions like right of or below. Existing text-to-diagram tools like Mermaid or Graphviz force automatic layouts that are difficult to fine-tune, whereas manual tools like draw.io require tedious coordinate dragging or verbose XML editing. Reladraw addresses this by allowing explicit spatial relationships that render directly to SVG, making it uniquely suited for integration with AI coding assistants. The creator actively engaged in the discussion, addressing bugs and discussing potential agent workflows.
key points
- Reladraw uses relative spatial rules such as right of and below to position nodes without requiring manual coordinate math or opaque auto-layout engines.
- It includes a built-in skill integration via npx skills so AI coding agents can generate custom layouts cleanly without burning tokens on coordinates.
- Implemented in TypeScript with zero runtime dependencies, supporting both a CLI to export SVGs and a web component for direct browser rendering.
who should read it
Frontend developers, architects, and engineers looking for code-driven diagram tools that give precise control over spatial layout, especially when working with AI coding assistants.
discussion warm
consensus
Commenters enthusiastically agree that this fills a major gap between rigid auto-layout tools like Mermaid and tedious manual canvas editors, specifically noting its utility for giving AI coding agents spatial awareness.
pushback
A few commenters questioned whether text-to-diagram tools are ultimately a step backward from direct visual or block-based representations when collaborating with AI.
This is very needed in the AI coding age! I find diagramming is one of the best ways for high bandwidth alignment between my mental model and the agent’s. I have been working on this problem a bit as I see good visuals as a key bottleneck in faster development while maintaining a real architecture.
Will def be adding this to my list of diagramming tools the agent can use!
Explains why relative diagram languages are uniquely valuable for maintaining high-bandwidth alignment of mental models with AI coding agents.
Generated by an LLM from the article and thread. Check the sources before relying on it.