PlantUMLLanguage specificationSalt

Donate274Patreon130

Salt (Каркасная схема) Edit in DokuwikiEdit in AsciidocEdit in Markdown Salt - это подпроект, включенный в PlantUML и призванный помочь вам проектировать графический интерфейс или иначе - Каркасную, Контурную, Проволочную схему (диаграмму). Вы можете использовать ключевое слово @startsalt или @startuml, после которого с новой строки стоит ключевое слово salt. Простые виджеты Edit in DokuwikiEdit in AsciidocEdit in Markdown Окно должно начинаться и заканчиваться скобками. Вы можете определить: Кнопку, используя [ и ]. Radio button (переключатель), используя ( и ). Checkbox (флажок), используя [ и ]. Поле ввода текста, используя ". Раскрывающийся список (Droplist), используя ^. 🎉 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 {^"My group box" Login | "MyName " Password | "**** " [Cancel] | [ OK ] } @endsalt Использование разделителя 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 и использовать + чтобы определять иерархию. 🎉 Copied! @startsalt { {T + World ++ America +++ Canada +++ USA ++++ New York ++++ Boston +++ Mexico ++ Europe +++ Italy +++ Germany ++++ Berlin ++ Africa } } @endsalt Таблица дерева иерархии Edit in DokuwikiEdit in AsciidocEdit in Markdown Возможно придание таблицам древовидной (иерархической) структуры. 🎉 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 Таблица может не иметь границ, как в примере выше, либо иметь только вертикальные (T!), только горизонтальные (T-), внешние границы (T+) или все границы (T#). Используйте указанные параметры сразу после открывающей скобки {. 🎉 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 *[Ref. [QA-4184](https://forum.plantuml.net/4184)]* WARNING  This translation need to be updated.  WARNING Продвинутая таблица Edit in DokuwikiEdit in AsciidocEdit in Markdown Вы можете использовать две специальные нотации для таблиц : * чтобы показать что ячейка должна быть объединена с левой . чобы обозначить пустую ячейку 🎉 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 Изменяйте цвет текста в виджетах по аналогии с другими диаграммами. Для этого поставьте код <color:ваш_цвет> перед текстом виджета. 🎉 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 Спрайты Edit in DokuwikiEdit in AsciidocEdit in Markdown Используя << и >> вы можете определить псевдо-графическое изображение (спрайт) и задать его имя, с помощью которого переиспользовать его в дальнейшем. Спрайт представляет собой текстовое поле рамером 10 строк на 12 колонок, состоящее их пустых пикселей, задаваемых точкой (.), и заполненных пикселей, задаваемых сиволом X. 🎉 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 Использование сетки Группа Использование разделителя Древовидный виджет Таблица дерева иерархии Окружающие скобки Добавление вкладок Использование меню Продвинутая таблица Полосы прокрутки Цвет элементов Creole on Salt Спрайты 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