展示HN:Reladraw - 一个由你决定物体摆放位置的图表语言
一个用于图表的文本语言,你可以指定物体的位置。在浏览器中尝试→ — 在左侧编辑源代码,观察右侧的布局重新解决。无需安装。通过手动在 draw.io 中绘制的图表:与在 reladraw 中写下并从文本渲染的相同图表 — examples/arch.reladraw,44 个语句,其中没有任何坐标:第二张图片中的每个距离均根据类似于上述“cluster.hub 的左上方”和“cluster.desktop1 与 cluster.laptop1 之间”的语句计算得出。没有任何东西选择排列;文件中声明了它。 Mermaid、Graphviz 和 D2 要求你声明实体和连接,然后为你安置一切。这是一种超能力,对于大多数图表而言是合适的。 但一旦你有了特定图像并关心物体的位置,就不再合适。假设你正通过制图来积极构建对一个系统的理解,并希望某个模块在右侧,连接放置得刚好:自动布局语言没有办法表达这一点。另一端是绝对定位工具 — draw.io、Excalidraw、Figma。它们给予你完全的摆放控制,但代价是每次编辑复杂图表都需要缓慢的手动工作。这对人类是慢的,但对代理来说代价更高,因为它必须从坐标工作出图像,然后才能决定更改哪一个。 reladraw 旨在代理中部。每个位置相对于其他事物进行声明,文件中没有任何坐标: 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" from: right to: left 没有任何内容是嵌套的,所以没有行依赖于另一行的位置或缩进。草稿在 SYNTAX.md 中,有一个在 examples/ 中的工作示例。为何代理需要这个。常见的情况不是绘制图表,而是更改一个图表。请求将授权服务向左移动,将队列放在它后面。对于像素坐标,代理必须从数字重建图像,然后才能弄清楚更改哪些数字。 使用自动布局根本没有可以读取的内容,因为安排从未被写下来 — 它只能重新表述源代码并重新渲染。通过声明位置,安排以句子的形式存在于文件中,改变图像就是改变表示物体去哪里内容的句子。写作具有相同的结构。发出 Mermaid 的代理是在对一个算法稍后解决的布局进行猜测,而得知的唯一方法就是渲染并查看 — 这是一个回合旅行,结果呈现为图像而非错误列表。意图是可以确认的,结果则不然,区别值得明确。代理可以重新读取它自己的文件,看到数据库在 API 下面,所有四台机器都挂在同步中心。它无法看到两个锚定到不同物体的集群现在重叠了,一个文本溢出了其节点,或者一条边穿过四条边 — 这些是从语句中解析的而不是声明的,因此它们需要下面范围部分中的诊断。与代理一起使用 reladraw 太新,不在任何模型的训练数据中,因此代理必须在能够编写之前了解该语言。该存储库提供了一种代理技能,正好做到了这一点 — 语法、何时使用该语言以及重新阅读自身源代码能确认什么和不能确认什么。npx skills add reladraw/reladraw -g 这会为你使用的任何代理安装它 — Claude Code、Codex、Cursor、Copilot 和其他 — 每个代理都有自己的技能目录。去掉 -g 以将其安装到当前项目中。要为其中一个代理而非全部安装,请使用 -a 命名:npx skills add reladraw/reladraw -g -a claude-code 在进行语法更改的发布后,重新运行你所使用的命令。该技能是在安装时获取的副本,而不是实时链接,因此没有任何东西会自动刷新它。它是普通的 Markdown,旁边有语法参考,因此值得阅读你使用的任何内容,手动复制目录也同样有效。状态版本 0.4.0。早期版本,但它可以运行:一个解析器、解析器和 SVG 渲染器,使用 TypeScript 并且没有运行时依赖, 一个命令行工具可以接受文本文件并写入独立的 SVG。此页面顶部的比较是该管道在 examples/arch.reladraw 上运行的结果。那里仍然明显不对的地方是排版,而不是位置。npm install -g reladraw reladraw diagram.reladraw -o diagram.svg 或者从克隆中获取,这样也能获取示例:npm install && npm run build node dist/cli.js examples/arch.reladraw -o out.svg 尚未构建,粗略按未发现的顺序排列:诊断报告。下面的范围部分说明了它的用途。今天,该工具要么渲染,要么失败;无法告诉你它绘制的图像有什么问题。环绕节点的边路由。可以告诉边离开节点的哪一侧并到达。
本站免费、广告极少。如果觉得有帮助,可以请我们喝杯咖啡 —— 任何金额都对持续运营有实际帮助。
☕请我喝杯咖啡