企业官网建设流程全解析

• 开发工具
• CLI
• AI 技能

你是否也厌倦了画架构图时的痛苦？在 draw.io 里反复拖拽方框、对齐像素、手敲坐标，稍微改个名字整张图就得重排一遍。开源项目reladraw提供了一种全新的解法：它是一门文本绘图语言，用类英语的语法描述"谁在谁的右边、谁在谁的下面"，就能自动生成专业的 SVG 架构图。无需坐标、无需手动布局，5 行代码即可上手，还能直接嵌入网页、交给 AI Agent 自动画图。

先看看 reladraw 画出来的东西。下面这张是仓库示例 examples/arch.reladraw 的渲染结果：深色主题、图标徽章、带标签的曲线箭头，完全看不出背后只是一份纯文本。

🎯 5行代码画出第一张架构图：相对定位是核心

传统绘图工具让你说"方框放在 (120, 340)"，而 reladraw 让你说人话。下面的小例子一共 5 行（摘自 docs/llms.txt）：

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声明一个节点：前一个词是名字，引号里是显示文本
• below app.ui、right of app：用相对定位说明位置，而不是坐标
• level with app：与某个节点保持同一水平线
• edge ... from: right to: left：画一条从 app.api 右侧出发、进入 store 左侧的箭头，线上标注 "queries"

渲染命令只有一条：

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

整条链路就是：文本 → 布局引擎 → 独立 SVG（解析与渲染核心见 src/parser.ts、src/render.ts），零运行时依赖，输出文件可以直接丢进任何文档系统。

🧭 为什么选 reladraw：它填补了工具间的空白

市面上的绘图工具大致分两派：Mermaid、Graphviz、D2 属于"自动布局"，你声明框和线，位置由工具全权决定——如果你脑子里有明确画面，它们并不听话；draw.io、Excalidraw、Figma 属于"绝对定位"，自由度高，但代价是人手拖节点、Agent 重算坐标、还要编辑冗长的 XML。

reladraw 站在两者中间：位置由你声明，距离由它计算。你只需要表达"关系"，具体间距全部自动推导，这正是它的标语——placement is stated。

📏 间距自动推导：加个节点，布局自己让路

reladraw 里有个很妙的设计：间距（gap）是"最小距离"，不是精确值。这意味着你永远不会写死一个数字，然后某天文本变长就过期了。

仓库示例 examples/gaps.reladraw 演示了最典型的"走廊"用法：

node hub "Hub" node side "Side" left of hub node wedge "Wedged" right of side left of hub level with hub

hub 和 side 之间原本只有一个默认间距；把 wedge 塞进中间后，两者会被自动推开到"wedge 宽度 + 两边间距"。删掉 wedge，距离又自动收回。你从未填写任何一个数字，数字是从关系中推导出来的。

常用间距档位一目了然：none（紧贴）、tight（紧凑）、normal（默认）、wide（宽松），也可以直接写像素数。这些规则的完整讲解在语法规格的 SYNTAX.md 中。

🔗 连线也懂排版：箭头方向、自动绕框、永不重叠

边（edge）的写法同样贴近自然语言，支持四种基本形态：

edge a -> b // 箭头指向 b edge a <- b // 箭头指向 a edge a <-> b // 两端都有箭头 edge a -- b // 普通连线

三个让图"自动变专业"的机制：

• 文字自动占位：edge a -> b "queries"会加宽它穿过的间隙，保证标签不压在框上（源码 src/constrain.ts）
• 自动绕框：连线永远不会穿过任何节点，总能找到转角最少的最短绕行路径
• 默认不重叠：所有节点对默认互不压盖，冲突时工具会拒绝渲染并指名道姓地报错，而不是悄悄画出重叠的丑图（示例 examples/separation.reladraw）

from:和to:还能精确控制线条从哪个边出发、从哪个边进入，配合between a and b可以让线走两个节点之间的"走廊"——arch 示例里 rclone 的双线就是这么走位的。

🎨 一次定义风格：style 与主题让你告别逐框配色

大图中重复的视觉规则用style声明一次即可（见 examples/arch.reladraw）：

style synced fill: theme-primary-subtle border: theme-primary line: theme-primary style backup border: #d2904e line: #d2904e style dump fill: theme-secondary-subtle shape: document

节点上写style: synced就能整体套用。颜色还支持theme-*这类主题变量——换主题时不用逐个改色值。想换整体外观，一行就够：

diagram theme: solarized-dark background: #1e2229

内置的shape: document（折角文档形）、badge: database（图标徽章）、icon: cube（立方体图标）等让"什么东西"和"什么颜色"成为两个独立的表达通道，图表的信息量瞬间翻倍。

🌐 快速上手：CLI 渲染与网页嵌入两种方式

命令行（本地渲染）：装好 npm 包后，一条命令出图，方便放进 CI 或文档构建流程：

reladraw diagram.reladraw -o diagram.svg

网页嵌入（零构建）：引入一个脚本，就能把<reladraw-diagram>标签直接写进 HTML，标签内容会被替换成对应的 SVG；写错语法时会在原位置显示带行号的错误提示，调试体验友好（元素实现见 src/element.ts）：

<reladraw-diagram> node a "Parser" node b "Renderer" right of a edge a -> b </reladraw-diagram>

给 AI Agent 用：一条npx skills add reladraw/reladraw -g就能为 Claude Code、Cursor 等 Agent 安装绘图技能，让 AI 直接"画"出架构图——这也是 reladraw 对 AI 工作流最友好的地方。

✅ 总结：文本绘图语言的完整入门清单

最后给新手四点建议：

1. 从 examples/ 目录读起——20 多个.reladraw示例文件，一个文件对应一个语法特性，是最好的活教程
2. 语法规则看 SYNTAX.md，它解释了每个关键字的行为与错误信息；docs/llms.txt 则是面向 AI 助手的速查文档
3. 语言目前处于 0.16.0 早期版本，语法可能还会演进（版本信息见 package.json），写文件时以仓库文档为准
4. 布局引擎对"说不清的位置"会明确报错而不是瞎猜——读懂报错信息，改文件，再渲染，这就是使用 reladraw 的全部心法

用文字描述位置，让工具计算坐标。这就是 reladraw 给架构图带来的最大改变：图开始像代码一样可版本管理、可审查、可自动重建。

• 开发工具
• CLI
• AI 技能