PlantUMLLanguage specificationSalt

       

Salt（线框图） Edit in DokuwikiEdit in AsciidocEdit in Markdown Salt 是 PlantUML 下面的子项目用来帮助用户来设计图形界面或是网页线框图/页面简图。 本工具的目标是实现简单的示例窗口。 可以用@startsalt关键字，或者使用@startuml紧接着下一行使用salt关键字. 基本部件 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 这个工具是用来讨论简单的示例窗口。 Text area Edit in DokuwikiEdit in AsciidocEdit in Markdown Here is an attempt to create a text area: 🎉 Copied! @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! @startsalt {SI This is a long text in a textarea . " " } @endsalt 🎉 Copied! @startsalt {S- This is a long text in a textarea . " " } @endsalt Open, close droplist Edit in DokuwikiEdit in AsciidocEdit in Markdown You can open a droplist, by adding values enclosed by ^, as: 🎉 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 在启用关键词后，你可以使用以下字符来绘制表格中的线及列 : Symbol Result # 显示所有垂直水平线 ! 显示所有垂直线 - 显示所有水平线 + 显示外框线 🎉 Copied! @startsalt {+ Login | "MyName " Password | "**** " [Cancel] | [ OK ] } @endsalt WARNING  This translation need to be updated.  WARNING 分组框 Edit in DokuwikiEdit in AsciidocEdit in Markdown 🎉 Copied! @startsalt {^"我的分组框" 用户名 | "MyName " 密码 | "**** " [取消] | [确认] } @endsalt [参见 QA-5840] 使用分隔符 Edit in DokuwikiEdit in AsciidocEdit in Markdown 你可以使用几条横线表示分隔符 🎉 Copied! @startuml salt { Text1 .. "Some field" == Note on usage ~~ Another text -- [Ok] } @enduml 树形外挂 Edit in DokuwikiEdit in AsciidocEdit in Markdown 使用树结构，你必须要 以 {T 进行起始，然后使用 + 定义层次。 🎉 Copied! @startsalt { {T + World ++ America +++ Canada +++ USA ++++ New York ++++ Boston +++ Mexico ++ Europe +++ Italy +++ Germany ++++ Berlin ++ Africa } } @endsalt Tree table [T] Edit in DokuwikiEdit in AsciidocEdit in Markdown You can combine trees with tables. 🎉 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 And add lines. 🎉 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] Enclosing brackets [{, }] Edit in DokuwikiEdit in AsciidocEdit in Markdown You can define subelements by opening a new opening bracket. 🎉 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 *[Ref. [QA-4184](https://forum.plantuml.net/4184)]* WARNING  This translation need to be updated.  WARNING 高级表格 Edit in DokuwikiEdit in AsciidocEdit in Markdown 对于表格有两种特殊的标记 : * 单元格同时具备 span 和 left 两个属性 . 是空白单元格 🎉 Copied! @startsalt {# . | Column 2 | Column 3 Row header 1 | value 1 | value 2 Row header 2 | A long cell | * } @endsalt Scroll Bars [S, SI, S-] Edit in DokuwikiEdit in AsciidocEdit in Markdown You can use {S notation for scroll bar like in following examples: {S: for horizontal and vertical scrollbars 🎉 Copied! @startsalt {S Message . . . . } @endsalt {SI : for vertical scrollbar only 🎉 Copied! @startsalt {SI Message . . . . } @endsalt {S- : for horizontal scrollbar only 🎉 Copied! @startsalt {S- Message . . . . } @endsalt Colors Edit in DokuwikiEdit in AsciidocEdit in Markdown It is possible to change text color of widget. 🎉 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 on Salt Edit in DokuwikiEdit in AsciidocEdit in Markdown You can use Creole or HTML Creole on salt: 🎉 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 Pseudo sprite [<<, >>] Edit in DokuwikiEdit in AsciidocEdit in Markdown Using << and >> you can define a pseudo-sprite or sprite-like drawing and reusing it latter. 🎉 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 Edit in DokuwikiEdit in AsciidocEdit in Markdown 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>. 🎉 Copied! @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! @startuml listopeniconic @enduml Add title, header, footer, caption or legend 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 (See also: Common commands) Zoom, DPI Edit in DokuwikiEdit in AsciidocEdit in Markdown Whitout zoom (by default) 🎉 Copied! @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! @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 dpicommand to zoom the generated image. 🎉 Copied! @startsalt skinparam dpi 200 { <&person> Login | "MyName " <&key> Password | "**** " [<&circle-x> Cancel ] | [ <&account-login> OK ] } @endsalt Include Salt "on activity diagram" Edit in DokuwikiEdit in AsciidocEdit in Markdown You can read the following explanation. 🎉 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 It can also be combined with define macro. 🎉 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 Include salt "on while condition of activity diagram" Edit in DokuwikiEdit in AsciidocEdit in Markdown You can include salt on while condition of activity diagram. 🎉 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] Include salt "on repeat while condition of activity diagram" Edit in DokuwikiEdit in AsciidocEdit in Markdown You can include salt on 'repeat while' condition of activity diagram. 🎉 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 Edit in DokuwikiEdit in AsciidocEdit in Markdown You can use [only] some skinparam command to change the skin of the drawing. Some example: 🎉 Copied! @startsalt skinparam Backgroundcolor palegreen {+ Login | "MyName " Password | "**** " [Cancel] | [ OK ] } @endsalt 🎉 Copied! @startsalt skinparam handwritten true {+ Login | "MyName " Password | "**** " [Cancel] | [ OK ] } @endsalt FIXME 🚩 FYI, some other skinparam does not work with salt, as: 🎉 Copied! @startsalt skinparam defaultFontName monospaced {+ Login | "MyName " Password | "**** " [Cancel] | [ OK ] } @endsalt Style Edit in DokuwikiEdit in AsciidocEdit in Markdown You can use [only] some style command to change the skin of the drawing. Some example: 🎉 Copied! @startsalt <style> saltDiagram { BackgroundColor palegreen } </style> {+ Login | "MyName " Password | "**** " [Cancel] | [ OK ] } @endsalt FIXME 🚩 FYI, some other style does not work with salt, as: 🎉 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]

基本部件 Text area Open, close droplist 使用表格 分组框 使用分隔符 树形外挂 Tree table [T] Enclosing brackets [{, }] 添加选项卡 使用菜单 高级表格 Scroll Bars [S, SI, S-] Colors Creole on Salt Pseudo sprite [<<,>>] OpenIconic Add title, header, footer, caption or legend Zoom, DPI Include Salt "on activity diagram" Include salt "on while condition of activity diagram" Include salt "on repeat while condition of activity diagram" Skinparam Style