Reladraw: Declarative Relative Diagramming Language for Coding Agents
Reladraw is a new zero-dependency CLI and text diagramming syntax that defines visual positioning relatively rather than relying on autolayout or absolute coordinates. It includes an official skill package installable directly into Claude Code, Codex, and Cursor.
Impact: Medium
Why it matters
You can generate structured, human-readable architecture diagrams via AI coding agents without fighting Mermaid autolayouts or draw.io coordinate calculations.
TL;DR
- 01Provides relative layout syntax without requiring hardcoded coordinate geometry
- 02Compiles straight to SVG via zero-dependency TypeScript engine
- 03Includes one-line skill installer for Claude Code, Cursor, and Codex
Key facts
- Current Version
- v0.8.0
- Runtime Dependencies
- 0 (zero-dependency TypeScript CLI)
- License
- Apache-2.0
The Middle Ground in Diagram as Code
Reladraw balances declarative simplicity with explicit positioning:
- Mermaid/Graphviz: Declarative boxes and connections, but the engine forces positions you cannot override.
- draw.io/Excalidraw: Absolute coordinates that require manual drag-and-drop or verbose XML edits by LLMs.
- Reladraw: Relative rules where nodes are positioned relative to neighbors without numeric offsets.
node store "Database" right of app level with app
edge app.api -> store "queries" from: right to: leftAgent Integration via Skills
The repository provides an installation target for skills, registering the syntax reference and CLI instructions inside agent directories for Claude Code, Codex, Cursor, and Copilot.
Try it in 2 minutes
npx skills add reladraw/reladraw -g -a claude-codebash
✓ When to use
- Authoring precise system architecture and sequence diagrams directly via AI agents
- Storing version-controlled diagrams as concise plain text in Git repositories
✕ When NOT to use
- When automatic organic layout engines like Graphviz or Dagre are preferred for vast, unstructured networks
- Interactive collaborative whiteboarding where drag-and-drop mouse interaction is strictly required
What to do today
- Install the skill for Claude Code with npx skills add reladraw/reladraw -g -a claude-code
- Test rendering a sample diagram to SVG with npx reladraw arch.reladraw -o out.svg
- Incorporate relative diagram generation into agent design-review workflows
What the community says
“Awesome! Exactly the problem I was having with drawio and mermaid. Nice work on addressing these problems and sharing it!”
“I always wanted this kind of tool, it’s a great idea”
Sources