开发工具CLIAI 技能【免费下载链接】reladraw项目地址https://gitcode.com/gh_mirrors/re/reladraw点击查看免费下载如果你正在为画一张架构图而纠结用Mermaid写代码却被自动布局摆到面目全非用draw.io拖拽改一个节点就要重排整张图reladraw提供了一种第三种选择——它是一种用纯文本描述图表的语言核心思想是相对定位你只需说A 在 B 的右边、C 和 D 对齐坐标由约束求解器算出无需手动指定任何像素。三类图表工具的本质区别一张光谱图看懂画图工具其实只有两个极端自动布局派Mermaid、Graphviz、D2你声明节点和连线位置由算法决定。布局是输出不是你控制的输入。绝对定位派draw.io、Excalidraw、Figma每个元素都是具体坐标。自由但代价是大量的手工拖拽以及维护冗长的 XML 源码。reladraw 恰好站在两者中间的相对定位区间用一句话概括三者的差异维度Mermaid 等自动布局draw.io 等绝对定位reladraw 相对定位位置由谁决定布局算法你像素级你关系式坐标自动求解能否表达心里的图经常不能能但费劲能且改动成本低输出格式SVGSVG / 图片独立 SVG源码可维护性高低XML 冗长高纯文本每行一个关系典型场景快速流程图、时序图精确排版的正式文档图有明确构想的架构图为什么 Mermaid 不够用自动布局解决不了的问题Mermaid 的语法很好写但写出来 ≠ 画出来。当你在脑子里已经有一张具体的架构图——数据库在左边、云同步居中、两台桌面电脑分居右上右下——自动布局算法并不关心你的构想它只会按自己的规则把盒子排开。结果往往是你不得不靠调整声明顺序、加隐形节点等技巧去哄算法最后源码变得很难读。同理的还有 Graphviz 和 D2。它们解决的是我不在意布局给我排整齐就行的问题而我心中有图想按我的图来恰恰是它们最弱的地方。为什么 draw.io 太费劲绝对定位的隐藏成本这是项目作者亲手在 draw.io 里画的一张参考架构图手工画没问题问题出在维护和协作上移动一个节点周围所有元素、连线、文字都要跟着动非文本协作者看到的是画布文本工具看到的是几百行坐标 XML——对人和 AI 都不友好想把数据库挪到服务器右边、再与某行对齐没有这种指令只有拖拽。reladraw 的解法用关系代替坐标还是上面那张图用 reladraw 写出来是这样的摘自 examples/arch.reladrawnode 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关键语法只有几类都能当英文读方向above/below/left of/right of还有above-left等八个方向对齐level with X表示共享中心线间距gap: tight | normal | wide或具体像素数gap: 12连线edge a - b可用from: right、to: left指定出入边还支持between a and b让线穿过两个节点之间的走廊样式style backup border: #d2904e再用style: backup应用避免颜色散落各处。它渲染出的效果和参考图几乎一致几个相对定位带来的实际收益间距是最小值而非精确值把第三个节点塞进两个节点之间两者会自动推开刚好容纳它的距离删掉它又自动收回。你永远不会写下过期的数字默认不重叠任意两个节点默认保持分离无法共存的布局会直接报错并点名冲突而不是画出一张糊图节点永远不重叠、连线永远不穿盒绕盒走线由求解器按最短路径自动完成无坐标所以永不过期文字变长、盒子变大布局依然成立因为描述的是关系而不是位置。完整的词法、布局与渲染逻辑分别在 src/lexer.ts、src/constrain.ts 和 src/render.ts 中实现语言规格全量记录在 SYNTAX.md。5 分钟上手从安装到渲染第一张图npm install -g reladraw reladraw diagram.reladraw -o diagram.svg输入.reladraw文本文件输出独立的SVG文件零运行时依赖TypeScript 编写。也可以把源码克隆下来直接跑仓库自带的 20 示例图git clone https://gitcode.com/gh_mirrors/re/reladraw cd reladraw npm install npm run build node dist/cli.js examples/arch.reladraw -o out.svg想嵌进网页也只需一行脚本页面里放一个reladraw-diagram标签把图表文本写在标签内即可被替换成 SVG还能用themelight一键切换配色。内置主题包括 dark、light、nord、dracula、gruvbox 等十余种。更多可照抄的写法建议直接翻 examples/ 目录lines.reladraw演示线型与虚线snug.reladraw演示紧凑排布routing.reladraw演示绕盒走线——每个文件都是最小可读的活教材。选型建议什么时候该选谁快速出图、不关心布局CI 文档、流程图、时序图→ 继续用Mermaid像素级精修、正式出版物→ 继续用draw.io心中有图且图会随系统演进架构图、部署拓扑、状态机、备份链路→ 试试reladraw的相对定位。最后提醒一句项目目前处于 0.x 早期阶段当前 0.16.0语法尚未稳定版本间可能有调整——官方态度是欢迎提交你画不出来的图而不是 PR。对这个阶段的项目来说早一点用、早一点踩坑反而是参与它最好的方式。赞分享开发工具CLIAI 技能【免费下载链接】reladraw项目地址https://gitcode.com/gh_mirrors/re/reladraw点击查看免费下载相关推荐ConsoleZ开发者指南自定义插件和扩展开发终极教程ConsoleZ开发者指南自定义插件和扩展开发终极教程 ConsoleZ是一个功能强大的Windows控制台增强工具提供了丰富的自定义和扩展能力。作为ConPebble vs RocksDB终极对比为什么Go原生数据库是更好的选择Pebble vs RocksDB终极对比为什么Go原生数据库是更好的选择 在当今数据驱动的世界中选择合适的键值存储数据库对系统性能至关重要。Pebble作KV存储嵌入式数据库5分钟用上skillsCodex的AI技能库新手完整上手指南5分钟用上skillsCodex的AI技能库新手完整上手指南 skills 是一个为 Codex 整理的 AI技能库目录把指令、脚本和资源打包成一个个技能文人工智能AI 技能AI 插件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考