Salt 그래픽 인터페이스 디자인을 위한 서브 프로젝트이다.
@startsalt
키워드를 사용하거나,
@startuml
아래에 salt 키워드를 사용할 수 있다.
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.
WARNING
This translation need to be updated. WARNING
윈도우는 반드시 브라킷({, })으로 감싸야 한다. 그리고 아래의 형식으로 사용한다.:
- 버튼(Button)은
[
와 ]
. - 라디오 버튼(Radio button)은
(
와 )
. - 체크박스(Checkbox)는
[
와 ]
. - 인풋박스(User text area)는
"
.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
이 툴은 단순한 샘플 윈도우에 대한 토론을 위해 사용된다.
WARNING
This translation need to be updated. WARNING
Here is an attempt to create a
text area:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
This is a long
text in a textarea
.
" "
}
@endsalt
|
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:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{SI
This is a long
text in a textarea
.
" "
}
@endsalt
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{S-
This is a long
text in a textarea
.
" "
}
@endsalt
|
You can open a droplist, by adding values enclosed by
^
, as:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
^This is a closed droplist^ |
^This is an open droplist^^ item 1^^ item 2^ |
^This is another open droplist^ item 1^ item 2^
}
@endsalt
|
[Ref. QA-4184] 테이블은
{
를 사용할 때 자동 생성된다. 그리고 컬럼을 구분하기 위해선
|
를 사용해야한다.
예시:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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 |
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
WARNING
This translation need to be updated. WARNING
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{^"My group box"
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
[Ref. QA-5840] You can use several horizontal lines as separator.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
@endsalt
|
To have a Tree, you have to start with
{T
and to use
+
to denote hierarchy.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
|
You can combine trees with tables.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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] You can define subelements by opening a new opening bracket.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
Name | " "
Modifiers: | { (X) public | () default | () private | () protected
[] abstract | [] final | [] static }
Superclass: | { "java.lang.Object " | [Browse...] }
}
@endsalt
|
You can add tabs using
{/
notation. Note that you can use HTML code to have bold text.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
You can add a menu by using
{*
notation.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
Like it is possible to open a droplist:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
{* File | Edit | Source | Refactor }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^^Normal Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt
|
[Ref. QA-4184]
You can use two special notations for table :
*
to indicate that a cell with span with left.
to denotate an empty cell
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
@endsalt
|
You can use
{S
notation for
scroll bar like in following examples:
{S
: for horizontal and vertical scrollbars
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{S
Message
.
.
.
.
}
@endsalt
|
{SI
: for vertical scrollbar only
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{SI
Message
.
.
.
.
}
@endsalt
|
{S-
: for horizontal scrollbar only
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{S-
Message
.
.
.
.
}
@endsalt
|
It is possible to change text
color of widget.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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] You can use
Creole or HTML Creole on salt:
Using
<<
and
>>
you can define a pseudo-sprite or sprite-like drawing and reusing it latter.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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 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>
.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
listopeniconic
@enduml
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
title My title
header some header
footer some footer
caption This is caption
legend
The legend
end legend
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
(See also: Common commands)Whitout zoom (by default)
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
|
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.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
scale 2
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
|
(See also: Zoom on Common commands)DPI
You can also use the
skinparam dpi
command to zoom the generated image.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
skinparam dpi 200
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
|
You can
read the following explanation.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
You can include
salt
on while condition of activity diagram.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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] You can include
salt
on 'repeat while' condition of activity diagram.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
start
repeat :read data;
:generate diagrams;
repeat while (\n{{\nsalt\n{^"Next step"\n Do you want to continue? \n[Yes]|[No]\n}\n}}\n)
stop
@enduml
|
[Ref. QA-14287] You can use
[only] some
skinparam command to change the skin of the drawing.
Some example:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
skinparam Backgroundcolor palegreen
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
skinparam handwritten true
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
FIXME
🚩 FYI, some other skinparam does not work with salt, as:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
skinparam defaultFontName monospaced
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
You can use
[only] some
style command to change the skin of the drawing.
Some example:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
<style>
saltDiagram {
BackgroundColor palegreen
}
</style>
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
FIXME
🚩 FYI, some other style does not work with salt, as:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
<style>
saltDiagram {
Fontname Monospaced
FontSize 10
FontStyle italic
LineThickness 0.5
LineColor red
}
</style>
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
[Ref. QA-13460]