Salt 线框图

简介 / Introduction

线框图（wireframe）是产品设计早期用来描述”界面上有哪些块、块之间怎么排”的低保真草图。它不关心颜色和字体，只关心结构。PlantUML 内置了 salt 引擎，可以用 @startsalt 声明一堆 widget（输入框、文本、按钮），再用 {} 划分屏幕区域，渲染出来的就是一张真正的界面草图。Mermaid 没有 widget 概念，但用 flowchart 加 subgraph 可以表达完全等价的”屏幕 → 区域 → 控件”层次。

PlantUML 版

salt 用 { 声明一个屏幕，{+ 声明一个命名的区域（相当于一个面板），} 结束区域，结尾的 } 结束整个屏幕。控件类型由后缀决定：| 是输入框，无后缀是文本，[ ... ] 是按钮：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@startsalt
{
  {+Login
    User | "admin"
    Password | "*****"
    [Cancel] | [Sign in]
  }
  {+Sidebar
    Dashboard
    Reports
    Settings
  }
}
@endsalt

几个常用规则：区域名写在 {+名称 后面，区域内每行一个控件；| 左边是控件标签，右边是默认内容；[按钮名] 会画成带边框的按钮。区域之间靠缩进和花括号嵌套表达从属关系，salt 不关心你把面板摆在哪——布局由引擎自动计算。

Mermaid 版

Mermaid 用 flowchart 表达同样的层次：subgraph 对应 salt 的区域，节点对应控件，节点形状承载控件语义（矩形是按钮，圆角是输入框）：

1
2
3
4
5
6
7
8
9
10
11
12

flowchart TB
  subgraph Login["Login screen"]
    User["User"]
    Password["Password"]
    Cancel["Cancel"]
    SignIn["Sign in"]
  end
  subgraph Sidebar["Sidebar"]
    Dashboard["Dashboard"]
    Reports["Reports"]
    Settings["Settings"]
  end

在 Mermaid 里按钮和输入框的区别要靠形状显式表达：Cancel 和 Sign in 加 ["..."] 标签，与普通文本节点区分开；User / Password 这种输入项可以写成 User{{"User"}} 这样的六边形或用 User[/User/] 平行四边形，与按钮在视觉上分开。

对比 / Side-by-side

小结 / Wrap-up

salt 的强项是”它知道什么长得像按钮”，一行 [Sign in] 就画出一个按钮，线框图的可信度比纯矩形高很多；Mermaid 的强项是能顺手把交互流程连起来，一个图同时说明”界面长什么样”和”点了会去哪”。原型阶段先用 salt 确认布局，定稿后翻译成 Mermaid flowchart 补上流程连线，是很顺的一条路。