✏️ reladraw 让你用一句「放在这个下面」就把架构图摆好,写完命令行一跑就是 SVG。
刚开源没几周,版本还停在 0.8.0,但思路挺对:Apache-2.0 开源,解析器、布局引擎和渲染器全是 TypeScript 写的,没有运行时依赖,还附了一个能装进 AI 编程助手的 skill。
写文档配架构图的人都在两头受气。用自动布局那一派,图小的时候挺好,一复杂布局就自己乱跑,你只能反复调声明顺序去碰运气;换成手摆的那一派,位置是听话了,可每个框的坐标都得自己管,中间插一个节点,整张图重新挪。
reladraw 正好卡在中间:你只声明相对关系,这个放在那个下面、那个靠右边、这几个对齐在同一层,坐标交给布局引擎按关系算。连线还能指定从哪一头出、进到哪一头。最后落成一个 .reladraw 文本文件,能跟着代码进 Git 走版本,谁改了哪一根线 diff 里看得见。
得提醒一句:0.8.0 还是早期阶段,作者自己说语法后面可能会变,现在上手适合先拿小图试。项目也在收集用它表示不出来的图表案例。
文档里的图,本来就该和代码一样能 diff。
GitHub:
顯示更多