开发工具CLIAI 技能【免费下载链接】reladraw项目地址https://gitcode.com/gh_mirrors/re/reladraw点击查看免费下载reladraw 是一个纯文本图表语言你用几行英文式的文字描述谁在谁的右边、谁在谁的下面它就能自动算出坐标渲染出一张干净的 SVG 图表。和 Mermaid 的自动布局不同它把摆放的决定权交给你和 draw.io 的手工拖拽不同你完全不用碰坐标。装好 CLI 后一条命令就能把.reladraw文件变成图表整个过程不到 5 分钟。reladraw 是什么介于自动布局与绝对定位之间的图表语言先建立一个直观印象。图表工具大致分成两个极端自动布局派Mermaid、Graphviz、D2你只声明节点和连线位置全由算法决定——想要特定排布时无能为力绝对定位派draw.io、Excalidraw、Figma位置自由但每个框都要手动拖动改动后坐标容易过期。reladraw 站在两者中间位置是相对陈述的right of app、below api距离由约束求解器计算。你写的每一行都仍然成立文本变长了图也会自动撑开不会留下难看的空洞。整个工具链由 TypeScript 编写、零运行时依赖解析器、布局引擎和 SVG 渲染器都在 src/ 目录下核心入口是 src/cli.ts。一键安装reladraw CLI两种最快方式前提只有一个Node.js 18 或以上见 package.json 的engines字段。方式一npm 全局安装推荐npm install -g reladraw装完后reladraw命令即可直接使用。方式二从源码构建还能顺便拿到全部示例图git clone https://gitcode.com/gh_mirrors/re/reladraw cd reladraw npm install npm run build构建产物在dist/目录可以直接用node dist/cli.js运行 CLI。想不安装直接试一把npx reladraw 你的文件.reladraw也能跑。写第一个 .reladraw 文件只需要 node 和 edge 两个关键词新建一个diagram.reladraw写入下面的内容——这就是 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逐行拆解语句含义node 名字 文本声明一个节点带点的名字app.ui表示它是app的子节点会自动画成嵌套容器below X、right of X相对定位还有above、left of、above-left of等 8 个方向level with X与 X 对齐到同一中轴线是唯一定距精确的摆放方式edge a - b 文本连线可加from:/to:指定从哪条边出发和进入几个新手容易踩的点全文只允许一个节点不定位其余节点必须直接或间接相对它摆放注释用//颜色值里的#不会触发注释fill: #14532d随便写间距用名字而非像素gap: none | tight | normal | wide间距是最小值所以图会自动紧凑语法上拿不准就直接报错错误信息会指名道姓地告诉你哪一行错了——读报错、改文件、再渲染这是官方推荐的工作流。完整的语法清单包括样式、主题、连线绕行、徽标等都在 SYNTAX.md 里仓库 examples/ 目录还放了 20 多个.reladraw小样例每个对应一种构造值得逐个翻。渲染第一张SVG图表reladraw 命令的三个参数文件写好后一条命令出图reladraw diagram.reladraw -o diagram.svg参数就三个定义见 src/cli.ts-o, --out输出路径。省略时默认把输入文件的扩展名换成.svg写-则输出到终端--theme临时切换配色主题light、nord、dracula等 14 种优先级高于文件内的theme:设置-h, --help打印帮助。成功时命令行会打印出写出的 SVG 路径然后你就能在浏览器里打开它了。下图是仓库里的基准案例左边是作者在 draw.io 里手工摆放的原图examples/reference/arch.png右边则是等价的 examples/arch.reladraw 由 reladraw 渲染出的结果docs/arch-render.png——容器嵌套、连线绕行、标注文字全都自动就位。换个主题再渲染一次不改文件也能出不同配色主题既可以写在文件里diagram theme: nord也可以只在命令行指定reladraw examples/themes.reladraw -o light.svg --theme light reladraw examples/themes.reladraw -o print.svg --theme print这意味着同一个.reladraw源文件可以一份产出亮色、暗色两张图放进 README 里随读者环境切换。主题只换颜色、不挪任何节点可以放心使用。下一步去哪里继续学 reladraw语法全参考SYNTAX.md——从语句形态到连线绕行的完整规范文末还带全部版本变更记录示例库examples/ 下每个文件只演示一种特性改一行就能看效果浏览器 Playgrounddocs/index.html 是自包含页面本地双击打开即可边写边看由 tools/playground.html 生成给 AI 助手的文档docs/llms.txt 是面向语言模型的索引配合 docs/llms-full.txt 可让 Agent 学会写 reladraw。需要注意项目当前版本 0.16.0 处于早期阶段语法尚未稳定后续小版本可能有不兼容改动每次都会给出替换写法而非静默失效。语法速查时以 SYNTAX.md 的 Changelog 一节为准。装好 CLI、写出第一个node和edge你就已经完成了 reladraw 入门的全部核心动作——剩下的就是让你的想法逐行落进文件里。赞分享开发工具CLIAI 技能【免费下载链接】reladraw项目地址https://gitcode.com/gh_mirrors/re/reladraw点击查看免费下载相关推荐最完整c3.js入门指南从安装到第一个图表小白也能10分钟上手最完整c3.js入门指南从安装到第一个图表小白也能10分钟上手 c3.js是一个基于D3.js的可复用图表库它让数据可视化变得简单直观即使是没有太多前端数据可视化Sigma.js 快速上手指南从 CDN 与 npm 安装到渲染第一张网络图Sigma.js 快速上手指南从 CDN 与 npm 安装到渲染第一张网络图 本指南以 packages/website/docs/quickstart.md数据可视化前端图形学5分钟快速上手Sigma.js从零渲染你的第一张图可视化5分钟快速上手Sigma.js从零渲染你的第一张图可视化 Sigma.js 是一款基于 WebGL 的开源 JavaScript 图可视化库专为渲染数千个节数据可视化前端图形学创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考