Multilingual Wiki Documentation

You are currently using syntax.
In an attempt to improve PlantUML documentation...
Please do not use this website for your own diagrams.
You can click here and use the online server here for your own documentation.

Wiki Toc    Recent changes    View page history    Add new chapter    Reorder page    Raw


Salt (Wireframe)

Salt est un sous projet inclus dans PlantUML qui peut vous aider à modeler une interface graphique ou une maquette fonctionnelle ou un Wireframe (en anglais).

Le but de cet outil est de pouvoir contruire, échanger et discuter facilement sur des échantillons de fenêtres simples.

Vous pouvez utiliser soit le mot clé @startsalt, ou bien @startuml suivi par une ligne avec le mot clé salt.

Salt (Wireframe)

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

The goal of this tool is to discuss about simple and sample windows.

You can use either @startsalt keyword, or @startuml followed by a line with salt keyword.

Composants de base

Une fenêtre doit commencer et finir par une accolade.

Vous pouvez ensuite définir :
  • un bouton en utilisant [ et ],
  • un bouton radio en utilisant ( et ),
  • une case à cocher en utilisant [ et ],
  • une zone de texte utilisateur en utilisant ",
  • une liste déroulante en utilisant ^.

@startsalt
{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}
@endsalt

Basic widgets

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 ^.

@startsalt
{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}
@endsalt

Utilisation de grille

Un tableau est créé automatiquement en utilisant une accolade ouvrante {.

Il faut utiliser | pour séparer les colomnes.

Par exemple:

@startsalt
{
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

Tout de suite après l'accolade ouvrante, vous pouvez utiliser un caractère pour définir si vous voulez dessiner les lignes ou les colonnes de la grille :

Symbol Result
# Pour afficher toutes les lignes verticales et horizontales
! Pour afficher toutes les lignes verticales
- Pour afficher toutes les lignes horizontales
+ Pour afficher les lignes extérieurs

@startsalt
{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

Using grid [|]

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

For example:

@startsalt
{
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

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

@startsalt
{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

Regroupement de champs

Plus d'information ici

@startsalt
{^"My group box"
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

Group box [^]

@startsalt
{^"My group box"
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

[Ref. QA-5840]

Utilisation des séparateurs

Vous pouvez utiliser de nombreuses lignes horizontales en tant que séparateur.

@startsalt
{
  Text1
  ..
  "Some field"
  ==
  Note on usage
  ~~
  Another text
  --
  [Ok]
}
@endsalt

Using separator [.., ==, ~~, --]

You can use several horizontal lines as separator.

@startsalt
{
  Text1
  ..
  "Some field"
  ==
  Note on usage
  ~~
  Another text
  --
  [Ok]
}
@endsalt

Arbre (structure arborescente) [T]

Pour faire un arbre ou une structure arborescente, vous devez commencer avec {T et utiliser + pour signaler la hiérarchie.

@startsalt
{
{T
 + World
 ++ America
 +++ Canada
 +++ USA
 ++++ New York
 ++++ Boston
 +++ Mexico
 ++ Europe
 +++ Italy
 +++ Germany
 ++++ Berlin
 ++ Africa
}
}
@endsalt

Tree widget [T]

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

@startsalt
{
{T
 + World
 ++ America
 +++ Canada
 +++ USA
 ++++ New York
 ++++ Boston
 +++ Mexico
 ++ Europe
 +++ Italy
 +++ Germany
 ++++ Berlin
 ++ Africa
}
}
@endsalt

Tree table [T]

You can combine trees with tables.

@startsalt
{
{T
+Region        | Population    | Age
+ World        | 7.13 billion  | 30
++ America     | 964 million   | 30
+++ Canada     | 35 million    | 30
+++ USA        | 319 million   | 30
++++ NYC       | 8 million     | 30
++++ Boston    | 617 thousand  | 30
+++ Mexico     | 117 million   | 30
++ Europe      | 601 million   | 30
+++ Italy      | 61 million    | 30
+++ Germany    | 82 million    | 30
++++ Berlin    | 3 million     | 30
++ Africa      | 1 billion     | 30
}
}
@endsalt

And add lines.

@startsalt
{
..
== with T!
{T!
+Region        | Population    | Age
+ World        | 7.13 billion  | 30
++ America     | 964 million   | 30
}
..
== with T-
{T-
+Region        | Population    | Age
+ World        | 7.13 billion  | 30
++ America     | 964 million   | 30
}
..
== with T+
{T+
+Region        | Population    | Age
+ World        | 7.13 billion  | 30
++ America     | 964 million   | 30
}
..
== with T#
{T#
+Region        | Population    | Age
+ World        | 7.13 billion  | 30
++ America     | 964 million   | 30
}
..
}
@endsalt

[Ref. QA-1265]

Accolades délimitantes [{, }]

Vous pouvez définir des sous-éléments en créant une accolade ouvrante.

@startsalt
{
Name         | "                 "
Modifiers:   | { (X) public | () default | () private | () protected
                [] abstract | [] final   | [] static }
Superclass:  | { "java.lang.Object " | [Browse...] }
}
@endsalt

Enclosing brackets [{, }]

You can define subelements by opening a new opening bracket.

@startsalt
{
Name         | "                 "
Modifiers:   | { (X) public | () default | () private | () protected
                [] abstract | [] final   | [] static }
Superclass:  | { "java.lang.Object " | [Browse...] }
}
@endsalt

Ajout d'onglet [/]

Vous pouvez ajouter des onglets avec la notation {/. Notez que vous pouvez utiliser du code HTML pour avoir un texte en gras.

@startsalt
{+
{/ <b>General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt

Les onglets peuvent également être orientés verticalement:

@startsalt
{+
{/ <b>General
Fullscreen
Behavior
Saving } |
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
[Close]
}
}
@endsalt

Adding tabs [/]

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

@startsalt
{+
{/ <b>General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt

Tab could also be vertically oriented:

@startsalt
{+
{/ <b>General
Fullscreen
Behavior
Saving } |
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
[Close]
}
}
@endsalt

Utiliser les menus [*]

Vous pouvez ajouter un menu en utilisant la notation {*.

@startsalt
{+
{* File | Edit | Source | Refactor }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt

Il est également possible d'ouvrir un menu:

@startsalt
{+
{* File | Edit | Source | Refactor
 Refactor | New | Open File | - | Close | Close All }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt

Using menu [*]

You can add a menu by using {* notation.

@startsalt
{+
{* File | Edit | Source | Refactor }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt

It is also possible to open a menu:

@startsalt
{+
{* File | Edit | Source | Refactor
 Refactor | New | Open File | - | Close | Close All }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt

Tableaux avancés

Vous pouvez utiliser deux notations spéciales pour les tableaux :
  • * pour indiquer que la cellule de gauche peut s'étendre sur l'actuelle
  • . pour indiquer une cellule vide

@startsalt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
@endsalt

Advanced table

You can use two special notations for table :
  • * to indicate that a cell with span with left
  • . to denotate an empty cell

@startsalt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
@endsalt

Barres de défilement [S, SI, S-]

Vous pouvez utiliser la commande {S pour afficher les barres de défilement comme dans les exemples suivants :

  • {S : barres de défilement verticale et horizontale

@startsalt
{S
Message
.
.
.
.
}
@endsalt

  • {SI : barre de défilement verticale seulement

@startsalt
{SI
Message
.
.
.
.
}
@endsalt

  • {S- : barre de défilement horizontale seulement

@startsalt
{S-
Message
.
.
.
.
}
@endsalt

Scroll Bars [S, SI, S-]

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

  • {S: for horizontal and vertical scrollbars

@startsalt
{S
Message
.
.
.
.
}
@endsalt

  • {SI : for vertical scrollbar only

@startsalt
{SI
Message
.
.
.
.
}
@endsalt

  • {S- : for horizontal scrollbar only

@startsalt
{S-
Message
.
.
.
.
}
@endsalt

Colors

It is possible to change text color of widget.

@startsalt
{
  <color:Blue>Just plain text
  [This is my default button]
  [<color:green>This is my green button]
  [<color:#9a9a9a>This is my disabled button]
  []  <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

[Ref. QA-12177]

Pseudo sprite [<<, >>]

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

@startsalt
 {
 [X] checkbox|[] checkbox
 () radio | (X) radio
 This is a text|[This is my button]|This is another text
 "A field"|"Another long Field"|[A button]
 <<folder
 ............
 .XXXXX......
 .X...X......
 .XXXXXXXXXX.
 .X........X.
 .X........X.
 .X........X.
 .X........X.
 .XXXXXXXXXX.
 ............
 >>|<color:blue>other folder|<<folder>>
^Droplist^
}
@endsalt

[Ref. QA-5849]

OpenIconic

OpenIconic is an 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>.

@startsalt
{
  Login<&person> | "MyName   "
  Password<&key> | "****     "
  [Cancel <&circle-x>] | [OK <&account-login>]
}
@endsalt

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

@startuml
listopeniconic
@enduml

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>.

@startsalt
{
  Login<&person> | "MyName   "
  Password<&key> | "****     "
  [Cancel <&circle-x>] | [OK <&account-login>]
}
@endsalt

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

@startuml
listopeniconic
@enduml

Include Salt "on activity diagram"

You can read the following explanation.

@startuml
(*) --> "
{{
salt
{+
<b>an example
choose one option
()one
()two
[ok]
}
}}
" as choose

choose -right-> "
{{
salt
{+
<b>please wait
operation in progress
<&clock>
[cancel]
}
}}
" as wait
wait -right-> "
{{
salt
{+
<b>success
congratulations!
[ok]
}
}}
" as success

wait -down-> "
{{
salt
{+
<b>error
failed, sorry
[ok]
}
}}
"
@enduml

It can also be combined with define macro.

@startuml
!unquoted procedure SALT($x)
"{{
salt
%invoke_procedure("_"+$x)
}}" as $x
!endprocedure

!procedure _choose()
{+
<b>an example
choose one option
()one
()two
[ok]
}
!endprocedure

!procedure _wait()
{+
<b>please wait
operation in progress
<&clock>
[cancel]
}
!endprocedure

!procedure _success()
{+
<b>success
congratulations!
[ok]
}
!endprocedure

!procedure _error()
{+
<b>error
failed, sorry
[ok]
}
!endprocedure

(*) --> SALT(choose)
-right-> SALT(wait)
wait -right-> SALT(success)
wait -down-> SALT(error)
@enduml

Include salt "on while condition of activity diagram"

You can include salt on while condition of activity diagram.

@startuml
start
while (\n{{\nsalt\n{+\nPassword | "****     "\n[Cancel] | [  OK   ]}\n}}\n) is (Incorrect)
  :log attempt;
  :attempt_count++;
  if (attempt_count > 4) then (yes)
    :increase delay timer;
    :wait for timer to expire;
  else (no)
  endif
endwhile (correct)
:log request;
:disable service;
@enduml

[Ref. QA-8547]


Please report any bugs to plantuml@gmail.com or here.
This website is still in beta testing.