Wireframe (PlantUML)

Salt is PlantUML's wireframing syntax. It is not going to win a design award, and it is remarkably quick for sketching a form or a dialog inside a specification.

#What this example shows

• Salt syntax, with braces defining the layout grid.

• Form controls: fields, checkboxes, radio buttons and buttons.

• A tabbed layout, built with two nested blocks.

#A worked example

Open it, edit it, or copy the source below.

The source, which you can paste into a new diagram and edit:

@startsalt
{+
  <b>Create a diagram
  ..
  {/ <b>Details | Advanced }
  {
    Title           | "Order flow        "
    Language        | ^Mermaid^
    Display mode    | ^Auto^
    [ ] Show border
    [X] Inherit dark mode
  }
  ..
  { Cancel | <b>Create }
}
@endsalt

#Making it your own

• The braces define the grid; a pipe starts a new column.

• ^Value^ renders a dropdown, "text" renders an input, [ ] a checkbox.

• For anything a stakeholder will react to, use Excalidraw or draw.io instead.

#Related

Verbose, stable, and it draws almost everything.