企业官网建设流程全解析

• 开发工具
• CLI
• AI 技能

reladraw 是一款文本绘图语言：用node声明元素，用edge声明连线，再用right of、below这样的相对定位描述布局，工具自行求解坐标并输出独立 SVG。你既不用手填 x/y 坐标，也不受"黑盒自动布局"摆布——你描述的排布就是最终画面。本教程围绕node、edge、相对定位三条主线，整理出 10 个核心概念，带你写出第一张架构图。

🧭 为什么选 reladraw：介于自动布局与绝对定位之间

常见的画图工具各有痛点：

• 自动布局类（Mermaid、Graphviz、D2）：只写框和连线，排布由算法决定，心里有明确画面时往往控制不住结果；
• 绝对定位类（draw.io、Excalidraw、Figma）：摆放自由，但全是像素级手工，内容一变就得重新拖。

reladraw 走中间路线：placement is stated——你只说明"谁在谁的哪一侧"，距离交给工具计算。

⚡ 5 分钟上手

npm install -g reladraw reladraw diagram.reladraw -o diagram.svg

最小完整示例（摘自 README.md）：

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 可以不声明位置（作为锚点），其余都相对它定位；
• 语句从行首开始，缩进行是上一条语句的续行；//是注释，#是十六进制颜色；
• 模糊即拒绝，绝不猜测：报错会指出具体行号，甚至告诉你漏了哪根轴。

📋 10 个核心概念清单

1. node：名字 + 文本，最小单元

node app "Web app" // 名字 app，显示文本 Web app node parser // 省略文本时显示名字本身

• 名字全局唯一，不能含:或;；
• 文本用/（两侧带空格）换行，TCP/IP这种无空格斜杠原样保留；
• 带点号的名字（app.ui）表示容器层级，见概念 6。

2. edge：四种箭头 + 文本标签

edge a -> b // 单向箭头 edge a <- b // 反向写法，画面同 b -> a edge a <-> b // 双向 edge a -- b // 无箭头直线 edge a -> b "query" // 附带文字标签

行里第一个名字是"主语"，可以按阅读习惯选择书写顺序；from:/to:永远对应第一、第二个名字所在的一侧，与箭头方向无关。

3. 八向相对定位：核心中的核心

above X below X left of X right of X above-left of X above-right of X below-left of X below-right of X

没有坐标，只有相对关系。只写一个方向（如right of docker）时，另一轴自动对目标居中；若在同一轴写了两个方向（如right of a left of b），必须补上level with或below说明另一轴，否则报错——工具不会替你猜。

4. level with：对齐与四边对齐

node store "Database" right of app level with app // 垂直居中 node drive "External HD" left of server top level with server // 顶边对齐

level with让两节点共享中心线，是唯一"固定距离"的定位；前置top/bottom/left/right则改为对齐对应边。画"整齐架构图"时它出场率最高。

5. gap：间距四档（最小距离，而非精确距离）

node b "B" right of a (gap: tight) // 括号内：只作用于该次定位 node c "C" below a gap: wide // 节点默认值：影响它的所有关系

关键机制：gap 是最小距离。把节点塞进两个盒子之间的走廊，会把两侧自动推开——这就是画"走廊""堆叠"的底层原理。

6. 容器：点号命名，子节点自动堆叠

node server "Home Server" left of cluster node server.mirror "shared folder" node server.deploy "deploy dir" below server.mirror

• 父节点必须先于子节点声明；
• 子节点没有自己的定位时，按书写顺序垂直堆叠；容器按内容撑大小；
• contents: (widths: match)可让所有子节点等宽，参考 examples/arch.reladraw。

7. 多目标区域：right of a and b

node c "C" below a and b // 落在 A、B 围成的区域正下方 node note "备注" right of a and c gap: wide shape: none

目标可以用and连接多个节点，工具以包围它们的最小矩形为定位参照——不用声明分组也能对齐一个"区域"。经典用法是上排 3 个、下排 2 个，让下排每个节点居中落进上排两节点之间的缝隙。

8. from: / to:：让连线从指定侧面进出

edge desktop1.files <-> hub from: right to: top

• 只声明"哪一侧"，不声明"哪个点"：同一侧面有多条线时会自动均匀排开；
• 线永不穿盒：被挡时工具自动绕开盒子走最短路径，等长时优先走上方；
• between a and b让线走两节点之间的走廊，below c让它贴着某节点指定一侧经过。

9. shape、icon、badge：节点的三种身体

node dump "db dump" shape: document // 折角矩形 = "产物" node svc icon: cube // 整节点画成图标，无框 node drive "External HD" badge: disk // 文本旁的小图标 node note "备注文字" shape: none // 无框纯文本 = 注释

shape:（rectangle / document / circle / none）声明外框；icon:（cube、disk、database、desktop、laptop、package 等）声明整节点即图标；badge:在文本旁挂一个小图标。一个节点只有一个身体，shape:与icon:同时写会报错。

10. style 与 theme：一处声明，处处复用

style synced fill: theme-primary-subtle border: theme-primary node laptop1 "Laptop 1" style: synced diagram theme: nord

• style定义命名的外观包，用style: 名字复用；语句自身写的属性优先于 style；
• diagram theme:可在 14 套主题（dark、light、nord、dracula、solarized、gruvbox 等）中一键换配色；theme-*颜色名会跟随主题切换；
• 命令行也支持reladraw file.reladraw --theme light，同一份源文件换肤不改代码。

🖼️ 实战：渲染一张完整架构图

仓库中的 examples/arch.reladraw 是一张从 draw.io 手工绘制转写而来的"家庭备份系统"图，这是 draw.io 里的原版：

下面是同一张图用 reladraw 文本绘制后的渲染结果——注意概念 5 的走廊技巧：dumps 节点 没有任何宽度声明，插进服务端与设备群之间后自动把两侧推开；between让 rclone 连线从走廊正中穿过：

🛠️ 新手避坑三习惯

1. 报错就改文件：reladraw 不会静默做错事，错误信息会点名行号并给出可执行的修改建议；
2. 只写关系，少写数字：优先用命名 gap（tight/wide），文本变长时图面会自动伸缩；
3. 重复外观进 style：同类盒子、同类连线各声明一次 style，图面即模板。

整条管线只有四步——词法分析、解析、约束求解、SVG 渲染，零运行时依赖，想深挖可以看 src/lexer.ts、src/parser.ts、src/constrain.ts、src/render.ts。

📚 延伸阅读

• 完整语法参考（含逐版本变更日志）：SYNTAX.md
• 26 个示例图，每个文件演示一个概念：examples/
• 本地浏览器在线 Playground：tools/playground.html
• 项目介绍与安装：README.md

• 开发工具
• CLI
• AI 技能