reladraw图表语言教程：AI Agent直接编辑架构图布局
内容提要
reladraw 是面向 AI Agent 的开源纯文本图表语言，使用 below、right of 等相对位置语句替代坐标与自动排版，避免 Agent 逆向解析像素。其特点是无嵌套、改句即改图，Agent 可直接读源码确认布局，无需渲染看图。项目版本 0.4.0，提供 Agent Skill，适合架构图与流程图编辑。
延伸解读
相对定位：在自动排版与绝对坐标之间找平衡
现有图表工具分为两类：自动排版工具（如Mermaid、Graphviz）布局由算法决定，用户无法精确控制元素位置；绝对定位工具（如draw.io、Excalidraw）需要手动拖拽，对AI Agent极不友好。reladraw采用相对位置语句（如below、right of），让用户像写代码一样精确描述布局，同时避免直接处理坐标。这种设计既保留了空间确定性，又提供了语义抽象，尤其适合需要精确控制元素摆放的架构图和流程图。
无嵌套设计：降低AI Agent的修改复杂度
Mermaid和D2采用嵌套结构组织图表，子元素依附父元素，修改子元素可能引发父元素尺寸变化和兄弟元素重排，形成连锁依赖。reladraw采用纯平铺语句，每行独立完整，无缩进层级，任何一行的改动都不会影响其他行。这种设计消除了层级间的连锁反应，使AI Agent在修改布局时只需关注目标语句，无需理解整个嵌套结构，大幅降低了编辑的复杂度和出错概率。
反馈循环变革：从“看图”到“读句子”
在Mermaid工作流中，Agent生成代码后需渲染成图片再“看”结果，但图像反馈信号模糊，难以精确指导修改。reladraw让Agent直接阅读源码中的相对位置语句（如“数据库在API下方”），即可确认布局是否正确。修改时只需更改句子（如将below改为right of），无需计算坐标或猜测自动排版结果。这种“意图可确认、结果可验证”的特性，显著提升了AI Agent编辑图表的效率和准确性。
早期局限与未来方向
reladraw目前处于0.4.0版本，求解器已能处理大部分基础布局，但文本溢出、跨越多条连线的边、群组重叠等情况仍需依赖诊断信息发现，尚未在源码中显式声明。v0.3.0版本中工具要么成功渲染，要么直接失败，无法精确指出问题所在行。未来若求解器能在检测到问题时反向建议修改哪句位置声明，将形成完整的Agent修改闭环，进一步提升人机协作画图的自动化水平。
Q&A
reladraw 是什么？它主要解决什么问题？
reladraw 是一个用纯文本描述图表布局的开源语言，核心是放弃绝对坐标与自动排版，改用 below、right of 等相对位置语句来精确控制元素摆放。它旨在解决现有工具在布局控制上的两极分化：自动排版工具无法精确控制位置，绝对定位工具编辑复杂图表耗时且对 AI Agent 不友好。
reladraw 为什么对 AI Agent 特别友好？
因为 Agent 可以直接阅读文本源码确认图表结构（如“数据库在 API 下方”），无需渲染成图片再“看”；修改时只需改位置描述语句（如把 below 改成 right of），无需计算坐标或猜测自动排版结果；项目还提供了可直接安装的 Agent Skill，方便 Claude Code、Cursor 等工具挂载使用。
reladraw 与 Mermaid、Graphviz 等自动排版工具有什么区别？
Mermaid、Graphviz、D2 等自动排版工具由算法决定元素位置，用户无法精确控制，改动连线可能引发雪崩式重排；reladraw 则用相对位置语句精确描述布局，不依赖自动排版，且无嵌套结构，改一句即改图，Agent 可直接读源码确认布局。
reladraw 的语法有什么特点？能举个例子吗？
reladraw 语法无嵌套、无缩进，每行独立完整，使用 below、right of、level with、between 等相对位置声明，不出现任何坐标数字。例如：node app "Web app"、node app.ui "Interface"、node app.api "API"、below app.ui、node store "Database"、right of app level with app、edge app.api -> store "queries"。
reladraw 如何解决自动排版工具中改动连线导致布局混乱的问题？
reladraw 采用纯平铺语句，消除嵌套层级带来的连锁依赖。系统内间距定义为“最小距离”而非固定像素，当插入或删除组件时，求解器通过最长路径算法自动推开或收拢空间，改动一句位置声明即可精确控制布局，不会引发全局重排。
reladraw 目前有哪些局限性？
reladraw 目前处于 0.4.0 早期版本，求解器能处理大部分基础布局，但文本溢出的节点、跨越四条连线的边、锚定在不同对象上的群组重叠等情况，主要依赖求解器诊断信息发现，尚未在源码中显式声明。v0.3.0 版本中工具要么成功渲染要么直接失败，还不能精确指出问题出在哪一行。
如何开始使用 reladraw？
最合理的起点是使用浏览器里的 Playground，打开官方仓库左侧编辑源码、右侧实时显示布局，无需安装。也可以用 npx skills add reladraw/reladraw -g 安装 Agent Skill，加上 -a claude-code 或 -a cursor 指定安装到特定 Agent。上手时可修改示例中的 below 为 right of，或插入 node cache "Cache" 并写 between app.api and store 观察变化。
