シーケンス図 ユースケース図 クラス図 アクティビティ図 コンポーネント図 状態図 オブジェクト図 配置図 タイミング図 Regex Network Wireframe Archimate Gantt MindMap WBS EBNF JSON YAML
PlantUML Language specification Salt

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Salt (Wireframe)

Saltは PlantUML のサブプロジェクトで、グラフィカルなインターフェイスや ウェブサイトワイヤーフレーム、ページ概略図、画面青写真

グラフィカルなインターフェイス、回路図、青写真を作るのにとても便利です。概念的な構造を 視覚的なデザインと整合させ、美しさよりも機能性を強調するのに役立ちます。

開発者、デザイナー、ユーザーエクスペリエンスの専門家は、インターフェイス要素、ナビゲーションシステムを視覚化し、コラボレーションを促進するためにワイヤーフレームを使用します。プロトタイピングや 反復デザインに重要な、詳細度の低いスケッチから詳細度の高い表現まで、忠実度はさまざまです。このコラボレーション・プロセスは、ビジネス分析から ユーザー・リサーチまで、さまざまな専門知識を統合し、最終的なデザインがビジネスと ユーザーの両方の要件に合致することを保証します。

Edit in DokuwikiEdit in AsciidocEdit in Markdown
基本のウィジェット

ウィンドウは中括弧で始めて中括弧で閉じなければなりません。

次のように定義できます。

🎉 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

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
テキストエリア

次のように、テキストエリアを表現することができます:

🎉 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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
ドロップリストの開閉

^で挟まれた値を追加することで、ドロップリストを開いた状態にすることができます:

🎉 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]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
罫線の使用 [|、#、!、-、+]

表は括弧 { で開始すれば自動的に作成されます。 そして、列を分割するには | を使う必要があります。

例：

🎉 Copied! 

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

行や列の罫線を表示したいときは、括弧で開始した直後に、以下のように定義された1文字を使用してください。：

文字 結果
# 全ての縦横の罫線を表示する
! 全ての縦線を表示する
- 全ての横線を表示する
+ 外枠を表示する

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
グループボックス [^]

🎉 Copied! 

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

[Ref. QA-5840]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
セパレータの使用 [..、==、~~、--]

いくつかの横線をセパレータとして使用することができます。

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
木構造ウィジェット [T]

木構造を作るには、{T で開始して階層を示すために + を使用する必要があります。

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
木構造と表 [T]

木構造と表を組み合わせることができます。

🎉 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]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
括弧で括る [{、}]

定義中に、新しい括弧で括ることによりサブ要素を定義することができます。

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
タブの追加 [/]

{/ 表記を使用してタブを追加することができます。 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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
メニューの使用 [*]

{* 表記でメニューを追加することができます。

🎉 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]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
テーブル（上級）

テーブルのための2つの特別な表記を使用することができます。

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
スクロールバー [S、SI、S-]

次の例のように、{Sでスクロールバーを使用できます：

🎉 Copied! 

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

🎉 Copied! 

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

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
色

ウィジェットのテキストの色を変えることができます。

🎉 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]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
SaltでのCreoleの使用

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

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
疑似スプライト [<<、>>]

<<と>>を使って疑似スプライト（スプライトのような画像）を定義し、それ以降で画像を使用することができます。

🎉 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]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
OpenIconic

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
タイトル、ヘッダ、フッタ、キャプション、凡例を追加する

🎉 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

(参照: 共通コマンド)

Edit in DokuwikiEdit in AsciidocEdit in Markdown
拡大、DPI

拡大なし(デフォルト)

🎉 Copied! 

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

scale

scaleコマンドを使って、生成する画像を拡大できます。

小数または分数で拡大率を指定できます。 ピクセル単位でwidth（幅）またはheight（高さ）を指定することもできます。 幅と高さの両方を指定することもできます。この場合は、指定したサイズの内側に収まるように調整されます。

🎉 Copied! 

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

(参照: 共通コマンドの拡大)

DPI

skinparam dpiコマンドを使って、生成する画像を拡大することもできます。

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Saltをアクティビティ図の上に表示する

こちらの説明を参照してください。

🎉 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

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Saltをアクティビティ図の繰り返し条件(前判定)の上に表示する

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]

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Saltをアクティビティ図の繰り返し条件(後判定)の上に表示する

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]

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
skinparam

一部の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

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
スタイル

一部のスタイルコマンドを使用して、見た目を変更することができます。

例:

🎉 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]