RelaDraw Makes Diagram Layout Declarative
RelaDraw is an open-source TypeScript diagram language that expresses placement with relationships like “above,” “right of,” and “between,” then renders standalone SVGs from text. It targets the gap between auto-layout tools such as Mermaid and coordinate-heavy editors like draw.io. [GitHub repository](https://github.com/reladraw/reladraw)
RelaDraw’s core idea is compelling: diagrams become editable source code whose spatial intent survives changes. The project is promising for agent-driven workflows, though machine-readable diagnostics for overlaps, crossed edges, and text overflow remain an emerging part of the roadmap. [Project coverage](https://news.lavx.hu/article/reladraw-releases-text-language-for-diagrams-with-stated-relative-placement)
- –Relative constraints make layout changes easier to review and reproduce than pixel coordinates.
- –Deterministic resolution avoids opaque auto-layout surprises while preserving automatic spacing.
- –SVG output and a zero-runtime-dependency TypeScript implementation keep the tool easy to script.
- –Its agent skill gives coding assistants a structured vocabulary for editing diagrams.
- –The unstable syntax and limited edge routing show this is still an early-stage developer tool.
DISCOVERED
1h ago
2026-09-27
PUBLISHED
1h ago
2026-09-27
RELEVANCE
AUTHOR
Github Awesome
