企业官网建设流程全解析

• 开发工具
• CLI
• AI 技能

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

逐行拆解：

几个新手容易踩的点：

• 全文只允许一个节点不定位，其余节点必须直接或间接相对它摆放；
• 注释用//，颜色值里的#不会触发注释（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/ 下每个文件只演示一种特性，改一行就能看效果；
• 浏览器 Playground：docs/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 入门的全部核心动作——剩下的，就是让你的想法逐行落进文件里。

• 开发工具
• CLI
• AI 技能