Salt wireframes

简介 / Introduction

A wireframe is the low-fidelity sketch used early in product design to describe “which blocks exist on the screen and how they are arranged”. It does not care about colors or fonts, only structure. PlantUML ships the salt engine: @startsalt declares widgets (inputs, text, buttons) and {} groups them into screen areas, and the result renders as an actual UI sketch. Mermaid has no widget concept, but a flowchart with subgraphs expresses the equivalent “screen → region → control” hierarchy.

PlantUML 版

salt uses { to open a screen and {+Name to open a named region (a panel), } to close a region and the trailing } to close the screen. The control type comes from the suffix: plain text for labels, | for input fields, [ ... ] for buttons:

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

A few rules worth remembering: the region name follows {+, and each line inside the region is one control; in label | "value" the text before | is the label and the text after it is the default content; [Button] renders with a border. Nesting is expressed by braces, and salt does not care where you place a panel — the engine computes the layout.

Mermaid 版

Mermaid expresses the same hierarchy with a flowchart: a subgraph maps to a salt region, nodes map to controls, and node shapes carry the control semantics (a rectangle is a button, a rounded box is an input):

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

In Mermaid you have to make the button/input distinction explicitly through shape: give Cancel and Sign in a ["..."] label so they read as clickable, and use User{{"User"}} or User[/User/] for input fields so they look different from buttons.

对比 / Side-by-side

小结 / Wrap-up

salt’s advantage is that it knows what a button looks like — one line of [Sign in] produces a real button, so a wireframe reads much more like a UI than a grid of plain rectangles. Mermaid’s advantage is that it can carry the interaction flow in the same figure, showing both what the screen contains and where a click leads. A natural workflow is to nail the layout in salt first, then translate to a Mermaid flowchart to add the navigation arrows.