Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Salt (Wireframe)

Salt is a subproject of PlantUML that may help you to design graphical interface or Website Wireframe or Page Schematic or Screen Blueprint.

It is very useful in crafting graphical interfaces, schematics, and blueprints. It aids in aligning conceptual structures with visual design, emphasizing functionality over aesthetics. Wireframes, central to this process, are used across various disciplines.

Developers, designers, and user experience professionals employ them to visualize interface elements, navigational systems, and to facilitate collaboration. They vary in fidelity, from low-detail sketches to high-detail representations, crucial for prototyping and iterative design. This collaborative process integrates different expertise, from business analysis to user research, ensuring that the end design aligns with both business and user requirements.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Basic widgets

You must use @startsalt keyword.

A window must start and end with brackets. You can then define:

Button using [ and ].
Radio button using ( and ).
Checkbox using [ and ].
User text area using ".
Droplist using ^.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Text area

Here is an attempt to create a text area:

Note:

the dot (.) to fill up vertical space;
the last line of space (" ") to make the area wider.

[Ref. QA-14765]

Then you can add scroll bar:

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Open, close droplist

You can open a droplist, by adding values enclosed by ^, as:

[Ref. QA-4184]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Using grid [| and #, !, -, +]

A table is automatically created when you use an opening bracket {. And you have to use | to separate columns.

For example:

Just after the opening bracket, you can use a character to define if you want to draw lines or columns of the grid :

Symbol	Result
`#`	To display all vertical and horizontal lines
`!`	To display all vertical lines
`-`	To display all horizontal lines
`+`	To display external lines

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Group box [^]

[Ref. QA-5840]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Using separator [.., ==, ~~, --]

You can use several horizontal lines as separator.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Tree widget [T]

To have a Tree, you have to start with {T and to use + to denote hierarchy.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Tree table [T]

You can combine trees with tables.

And add lines.

[Ref. QA-1265]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Enclosing brackets [{, }]

You can define subelements by opening a new opening bracket.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Adding tabs [/]

You can add tabs using {/ notation. Note that you can use HTML code to have bold text.

Tab could also be vertically oriented:

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Using menu [*]

You can add a menu by using {* notation.

It is also possible to open a menu:

Like it is possible to open a droplist:

[Ref. QA-4184]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Advanced table

You can use two special notations for table :

* to indicate that a cell with span with left
. to denotate an empty cell

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Scroll Bars [S, SI, S-]

You can use {S notation for scroll bar like in following examples:

{S: for horizontal and vertical scrollbars

{SI : for vertical scrollbar only

{S- : for horizontal scrollbar only

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Colors

It is possible to change text color of widget.

[Ref. QA-12177]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Creole on Salt

You can use Creole or HTML Creole on salt:

@startsalt
{{^==Creole
 This is **bold**
 This is //italics//
 This is ""monospaced""
 This is --stricken-out--
 This is __underlined__
 This is ~~wave-underlined~~
 --test Unicode and icons--
 This is <U+221E> long
 This is a <&code> icon
 Use image : <img:https://plantuml.com/logo3.png>
}|
{^HTML Creole 
 This is bold
 This is italics
 This is <font:monospaced>monospaced
 This is <s>stroked</s>
 This is underlined
 This is <w>waved</w>
 This is <s:green>stroked</s>
 This is <u:red>underlined
 This is <w:#0000FF>waved</w>
 -- other examples --
 This is <color:blue>Blue</color>
 This is <back:orange>Orange background</back>
 This is <size:20>big</size>
}|
{^Creole line
You can have horizontal line
----
Or double line
====
Or strong line
____
Or dotted line
..My title..
Or dotted title
//and title... //
==Title==
Or double-line title
--Another title--
Or single-line title
Enjoy!
}|
{^Creole list item
**test list 1**
* Bullet list
* Second item
** Sub item
*** Sub sub item
* Third item
----
**test list 2**
# Numbered list
# Second item
## Sub item
## Another sub item
# Third item
}|
{^Mix on salt
 ==<color:Blue>Just plain text
 [This is my default button]
 [<color:green>This is my green button]
 [ ---<color:#9a9a9a>This is my disabled button-- ]
 [] <size:20><color:red>Unchecked box
 [X] <color:green>Checked box
 "//Enter text here// "
 ^This is a droplist^
 ^<color:#9a9a9a>This is a disabled droplist^
 ^<color:red>This is a red droplist^
}}
@endsalt

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Pseudo sprite [<<, >>]

Using << and >> you can define a pseudo-sprite or sprite-like drawing and reusing it latter.

[Ref. QA-5849]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
OpenIconic

OpenIconic is a very nice open source icon set. Those icons have been integrated into the creole parser, so you can use them out-of-the-box. You can use the following syntax: <&ICON_NAME>.

The complete list is available on OpenIconic Website, or you can use the following special diagram:

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Add title, header, footer, caption or legend

(See also: Common commands)

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Zoom, DPI

Whitout zoom (by default)

Scale

You can use the scale command to zoom the generated image.

You can use either a number or a fraction to define the scale factor. You can also specify either width or height (in pixel). And you can also give both width and height: the image is scaled to fit inside the specified dimension.

(See also: Zoom on Common commands)

DPI

You can also use the skinparam dpicommand to zoom the generated image.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Include Salt "on activity diagram"

You can read the following explanation.

It can also be combined with define macro.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Include salt "on while condition of activity diagram"

You can include salt on while condition of activity diagram.

[Ref. QA-8547]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Include salt "on repeat while condition of activity diagram"

You can include salt on 'repeat while' condition of activity diagram.

[Ref. QA-14287]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Skinparam

You can use [only] some skinparam command to change the skin of the drawing.

Some example:

FIXME

🚩 FYI, some other skinparam does not work with salt, as:

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Style

You can use [only] some style command to change the skin of the drawing.

Some example:

FIXME

🚩 FYI, some other style does not work with salt, as:

[Ref. QA-13460]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownSalt (Wireframe)

Edit in DokuwikiEdit in AsciidocEdit in MarkdownBasic widgets

Edit in DokuwikiEdit in AsciidocEdit in MarkdownText area

Edit in DokuwikiEdit in AsciidocEdit in MarkdownOpen, close droplist

Edit in DokuwikiEdit in AsciidocEdit in MarkdownUsing grid [| and #, !, -, +]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownGroup box [^]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownUsing separator [.., ==, ~~, --]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownTree widget [T]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownTree table [T]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownEnclosing brackets [{, }]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownAdding tabs [/]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownUsing menu [*]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownAdvanced table

Edit in DokuwikiEdit in AsciidocEdit in MarkdownScroll Bars [S, SI, S-]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownColors

Edit in DokuwikiEdit in AsciidocEdit in MarkdownCreole on Salt

Edit in DokuwikiEdit in AsciidocEdit in MarkdownPseudo sprite [<<, >>]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownOpenIconic

Edit in DokuwikiEdit in AsciidocEdit in MarkdownAdd title, header, footer, caption or legend

Edit in DokuwikiEdit in AsciidocEdit in MarkdownZoom, DPI