Salt はグラフィカルインタフェースの設計（ウェブサイトワイヤーフレーム、ページの大まかな設計）を助ける PlantUML のサブプロジェクトです。 このツールの用途は、簡単なサンプルのウィンドウについて議論することです。 キーワード @startsalt、または、@startuml と次の行に続くキーワード salt の、いずれかを使用することができます。 ウィンドウは中括弧で始めて中括弧で閉じなければなりません。 次のように定義できます。 - ボタンは
[ と ] で括ります。 - ラジオボタンは
( と ) で括ります。 - チェックボックスは
[ と ] で括ります。 - テキスト領域は
" で括ります。 - ドロップリストは
^ で括ります。
🎉 Copied!  | @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
|
次のように、テキストエリアを表現することができます: 🎉 Copied! | @startsalt
{+
This is a long
text in a textarea
.
" "
}
@endsalt
|
注意 - ドット(
.)によって、縦方向のスペースを埋めています - 最後の行のスペース(
" ")によって、領域の幅を広げています
[Ref. QA-14765] これに、スクロールバーを追加できます: 🎉 Copied! | @startsalt
{SI
This is a long
text in a textarea
.
" "
}
@endsalt
|
🎉 Copied! | @startsalt
{S-
This is a long
text in a textarea
.
" "
}
@endsalt
|
^で挟まれた値を追加することで、ドロップリストを開いた状態にすることができます: 🎉 Copied! | @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! | @startsalt
{
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
行や列の罫線を表示したいときは、括弧で開始した直後に、以下のように定義された1文字を使用してください。： | 文字 | 結果 | # | 全ての縦横の罫線を表示する | ! | 全ての縦線を表示する | - | 全ての横線を表示する | + | 外枠を表示する |
🎉 Copied! | @startsalt
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
🎉 Copied! | @startsalt
{^"My group box"
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
[Ref. QA-5840] いくつかの横線をセパレータとして使用することができます。 🎉 Copied! | @startsalt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
@endsalt
|
木構造を作るには、{T で開始して階層を示すために + を使用する必要があります。 🎉 Copied! | @startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
|
木構造と表を組み合わせることができます。 🎉 Copied! | @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
|
罫線を追加すると次のようになります。 🎉 Copied! | @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] 定義中に、新しい括弧で括ることによりサブ要素を定義することができます。 🎉 Copied! | @startsalt
{
Name | " "
Modifiers: | { (X) public | () default | () private | () protected
[] abstract | [] final | [] static }
Superclass: | { "java.lang.Object " | [Browse...] }
}
@endsalt
|
{/ 表記を使用してタブを追加することができます。 HTML コードを使用してテキストを太字にできることに注意してください。 🎉 Copied! | @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
|
タブは垂直方向にも配向できます： 🎉 Copied! | @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
|
{* 表記でメニューを追加することができます。 🎉 Copied! | @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
|
メニューを開くことも可能です： 🎉 Copied! | @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
|
ドロップリストを開くことも可能です： 🎉 Copied! | @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] テーブルのための2つの特別な表記を使用することができます。 * は左のセルとの結合となります. は空のセルとなります
🎉 Copied! | @startsalt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
@endsalt
|
次の例のように、{Sでスクロールバーを使用できます： 🎉 Copied! | @startsalt
{S
Message
.
.
.
.
}
@endsalt
|
🎉 Copied! | @startsalt
{SI
Message
.
.
.
.
}
@endsalt
|
🎉 Copied! | @startsalt
{S-
Message
.
.
.
.
}
@endsalt
|
ウィジェットのテキストの色を変えることができます。 🎉 Copied! | @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]CreoleまたはHTML Creole記法を使用することができます: 🎉 Copied! | @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:http://plantuml.com/logo3.png>
}|
{^<b>HTML Creole
This is <b>bold</b>
This is <i>italics</i>
This is <font:monospaced>monospaced</font>
This is <s>stroked</s>
This is <u>underlined</u>
This is <w>waved</w>
This is <s:green>stroked</s>
This is <u:red>underlined</u>
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]
[<b><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^
^<b><color:red>This is a red droplist^
}}
@endsalt
 |
<<と>>を使って疑似スプライト（スプライトのような画像）を定義し、それ以降で画像を使用することができます。 🎉 Copied! | @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 はとても素晴らしいオープンソースのアイコンセットです。 これらのアイコンは、creole parserに統合されていますので、簡単に使うことができます。 このような構文で使用できます。: <&ICON_NAME> 🎉 Copied! | @startsalt
{
Login<&person> | "MyName "
Password<&key> | "**** "
[Cancel <&circle-x>] | [OK <&account-login>]
}
@endsalt
|
全アイコンのリストはOpenIconic Websiteにあります。もしくは、次の特別なダイアグラムを使用してください： 🎉 Copied! | @startuml
listopeniconic
@enduml
|
🎉 Copied! | @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
|
(参照: 共通コマンド)拡大なし(デフォルト) 🎉 Copied! | @startsalt
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
|
scalescaleコマンドを使って、生成する画像を拡大できます。 小数または分数で拡大率を指定できます。 ピクセル単位でwidth（幅）またはheight（高さ）を指定することもできます。 幅と高さの両方を指定することもできます。この場合は、指定したサイズの内側に収まるように調整されます。 🎉 Copied! | @startsalt
scale 2
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
|
(参照: 共通コマンドの拡大)DPIskinparam dpiコマンドを使って、生成する画像を拡大することもできます。 🎉 Copied! | @startsalt
skinparam dpi 200
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
|
こちらの説明を参照してください。 🎉 Copied! | @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
|
マクロ定義と組み合わせることもできます。 🎉 Copied! | @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
|
saltをアクティビティ図の繰り返し条件(前判定)の上に表示することができます。 🎉 Copied! | @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]saltをアクティビティ図の繰り返し条件(後判定)の上に表示することができます。 🎉 Copied! | @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] 一部のskinparamコマンドを使用して、見た目を変更することができます。 例: 🎉 Copied! | @startsalt
skinparam Backgroundcolor palegreen
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
🎉 Copied! | @startsalt
skinparam handwritten true
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
FIXME 🚩 skinparamには、saltでは使えないものもあります: 🎉 Copied! | @startsalt
skinparam defaultFontName monospaced
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
一部のスタイルコマンドを使用して、見た目を変更することができます。 例: 🎉 Copied! | @startsalt
<style>
saltDiagram {
BackgroundColor palegreen
}
</style>
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
FIXME 🚩 スタイルには、saltでは使えないものもあります: 🎉 Copied! | @startsalt
<style>
saltDiagram {
Fontname Monospaced
FontSize 10
FontStyle italic
LineThickness 0.5
LineColor red
}
</style>
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
[Ref. QA-13460] | |
テキストエリア
Edit in Dokuwiki
Edit in Asciidoc
Edit in Markdown
