Salt e wireframes

Um wireframe é o esqueleto de uma tela: mostra onde ficam os campos, botões e listas, sem se preocupar com cores, fontes ou imagens. Ele serve para discutir a estrutura de uma interface cedo, quando mudar ainda é barato. ^[4]

Depois do wireframe costumam vir o mockup, uma versão visual com cores e imagens reais, e o protótipo, que já pode ser navegado e clicado. ^{[5] [6]}

O Salt é a parte do PlantUML que desenha wireframes a partir de texto. Você descreve a tela com símbolos simples, como [OK] para um botão ou [X] para uma caixa marcada, e o PlantUML gera a imagem. Como tudo é texto, o wireframe cabe no controle de versão, ao lado do código e da documentação. ^{[2] [3]}

O que é preciso

• Java e o arquivo plantuml.jar, ou uma extensão de editor, como a do VS Code, ou o servidor on-line do PlantUML. ^{[7] [8]}
• A sintaxe Creole, que o PlantUML usa para formatar textos (como <b> para negrito), e os comandos comuns, como scale. ^{[10] [11]}
• O texto original também lista o Graphviz, mas ele só é usado por diagramas UML como os de classe e de componentes; o Salt funciona sem ele. ^[9]

Todos os exemplos deste tutorial foram testados no PlantUML 1.2026.8, e as figuras com fundo branco foram geradas por ele. O texto original foi escrito para a versão 1.2020.23; as diferenças encontradas estão indicadas ao longo do texto. ^[1]

Estrutura de um arquivo

Um wireframe fica entre @startsalt e @endsalt e tem um bloco principal entre chaves. Dentro dele, cada linha é uma linha da tela, e a barra vertical | separa as colunas. ^[2]

@startsalt
{
  Usuário | "MeuNome   "
  Senha | "****      "
  [Cancelar] | [  OK  ]
}
@endsalt

Linhas que começam com aspa simples (') são comentários e não aparecem no desenho.

Comandos comuns do PlantUML também valem aqui; o mais útil é scale, que aumenta a imagem (scale 1.5). A forma antiga, @startuml seguido de uma linha com salt, gera erro nas versões atuais: use sempre @startsalt. ^[11]

Widgets básicos

Widgets são os controles de uma interface: botões, campos, listas. No Salt, cada um tem uma marcação curta. ^[12]

O texto original descreve a lista suspensa como “create a input box representation”, a mesma frase do campo de texto; é só um erro de cópia. A lista aberta não aparece no original, mas é útil para mostrar as opções disponíveis. ^{[1] [2]}

@startsalt
{
  Texto simples | [Botão]
  () Opção desmarcada | (X) Opção marcada
  [] Caixa desmarcada | [X] Caixa marcada
  "Digite aqui    " | ^Lista suspensa^
  . | ^Modo inteligente^Original^Ajustar à tela^
  .
  .
  .
}
@endsalt

Grades e linhas

Toda chave abre uma grade (uma tabela invisível que alinha os elementos), e o caractere logo depois da chave muda o tipo do bloco. A figura resume as dez variações que este tutorial cobre.

Nas grades, três símbolos controlam as linhas desenhadas: ^[2]

Dentro de uma grade, um ponto (.) cria uma célula vazia, útil para deixar margens ou pular colunas. Em tabelas, um asterisco (*) faz a célula da esquerda se estender por cima da atual, como veremos adiante.

Grupos, rolagem e separadores

Caixa de grupo

{^"Título" desenha uma moldura com um título, para reunir controles relacionados.

Barras de rolagem

{S cria uma área com as duas barras de rolagem; {SI, só a vertical (é um I maiúsculo, de uma barra em pé); e {S-, só a horizontal.

{^"Meu grupo"
  Usuário  | "MeuNome   "
  [Cancelar] | [ OK ]
}

{SI
  Mensagem
  .
  .
}

Separadores

Uma linha contendo só dois caracteres repetidos desenha um separador horizontal:

Árvores e tabelas

Árvore

{T cria uma árvore. Cada linha começa com sinais de mais, e a quantidade de + indica o nível: + é a raiz, ++ um filho, +++ um neto.

Árvore com colunas

Somando | às linhas, a árvore ganha colunas, como uma tabela. A primeira linha pode servir de cabeçalho, e os mesmos símbolos das grades definem as linhas: {T!, {T-, {T+ e {T#.

{T#
  +Região     | População
  + Mundo     | 8,2 bilhões
  ++ América  | 1,0 bilhão
  +++ Brasil  | 212 milhões
  ++ Europa   | 745 milhões
}

No exemplo original, a coluna “Age” tem o valor 30 em todas as linhas; é um dado de preenchimento. Aqui usamos populações aproximadas de 2025. ^[1]

Tabela avançada

Em uma tabela {#, o ponto deixa uma célula vazia e o asterisco estende a célula da esquerda:

{#
  .       | Coluna 2         | Coluna 3
  Linha 1 | valor 1          | valor 2
  Linha 2 | Uma célula longa | *
}

Blocos dentro de blocos

Qualquer célula pode abrir uma nova chave. Assim se alinham vários controles na mesma célula, como no exemplo do original, que imita a janela de criar uma classe Java:

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

Abas e menus

Abas

{/ cria uma barra de abas, separadas por |. Para destacar a aba ativa, use negrito do Creole: <b>Geral. ^[10]

Para abas verticais, coloque uma aba por linha e termine o bloco com } |: a barra vertical depois da chave põe o conteúdo seguinte ao lado das abas, e não abaixo. O original repete aqui a mesma descrição das abas horizontais, sem mencionar esse detalhe. ^[1]

{+
  {/ <b>Geral
     Tela cheia
     Comportamento
     Salvar } |
  {
    { Abrir imagem em: | ^Modo inteligente^ }
    [X] Suavizar imagens ampliadas
    [X] Confirmar exclusão
    [] Mostrar imagens ocultas
  }
  [Fechar]
}

Menus

{* cria uma barra de menus. Uma segunda linha mostra um menu aberto: ela começa com o nome do item e lista as opções, e um hífen isolado (-) vira um separador.

{* Arquivo | Editar | Código | Refatorar
   Arquivo | Novo | Abrir arquivo | - | Fechar | Fechar todos }

Ícones e pseudo-sprites

Open Iconic

O PlantUML inclui o conjunto de ícones livres Open Iconic. Para usar um, escreva <&nome-do-ícone> em qualquer texto, como <&person> ou <&key>. Para ver a lista completa, gere um diagrama com o comando listopeniconic. ^{[13] [14]}

@startuml
listopeniconic
@enduml

Pseudo-sprites

Um pseudo-sprite é um pequeno desenho feito de texto: entre <<nome e >>, cada X vira um pixel preto e cada ponto um pixel vazio. Depois, basta escrever <<nome>> para repetir o desenho. ^[2]

Dois detalhes testados: só o X é desenhado (qualquer outro caractere fica em branco), e <<nome>> precisa estar sozinho na célula; no meio de um texto, ele aparece como «nome». Para pôr um rótulo ao lado, use uma coluna: <<pasta>> | Documentos.

De imagem para sprite

O original propõe um roteiro para transformar uma imagem em pseudo-sprite: ^[1]

1. Converter a imagem para preto e branco e reduzir a largura à metade (os caracteres são mais altos que largos).
2. Enviá-la a um conversor de ASCII art, como o Convert Images to ASCII Art, com largura de até 200 caracteres. O endereço no original tem um erro de digitação (“onvert”); o correto está nas referências. ^{[16] [17]}
3. No texto baixado, trocar todo caractere que não seja espaço por X e todo espaço por ponto.
4. Colar o resultado entre <<nome e >>.

Para diagramas UML, o PlantUML também tem sprites de verdade, em tons de cinza, definidos com sprite $nome e gerados a partir de imagens com java -jar plantuml.jar -encodesprite. ^[15]

Salt dentro de outros diagramas

Um wireframe pode aparecer dentro de outro diagrama, em uma nota, uma legenda ou o rótulo de um elemento. Basta colocá-lo entre {{salt e }}. ^[2]

@startuml
class Login
note right of Login
{{salt
{
  Usuário | "MeuNome   "
  Senha | "****      "
  [Cancelar] | [  OK  ]
}
}}
end note
@enduml

Exemplo completo

O exemplo final do original junta quase tudo numa só tela: menu, abas, campos, lista suspensa, caixa de grupo, botões de opção, lista com rolagem, tabela, árvore e botões com ícones. Os rótulos misturam inglês e português, como no original. ^[1]

@startsalt
'skinparam BackgroundColor lightblue
{+
    |area1|area2|area3|area4|area5|area6|area7
    |.|{* File | Edit | Source | ?
    '  File | New | Open File | - | Close | Close All | - | Exit
      ? | About}|*|*|*|*
    |.
    |.|{/ <b>General | Fullscreen | Behavior | Saving }|*|*|*|*
    |.
    |.|Login    |"MyName          "|.
    |.|Password |"****            "|.
    |.
    |.|Open image in|{ ^Smart Mode^ }|{^Options
                                        [X] Smooth images when zoomed
                                        [X] Confirm image deletion
                                        [ ] Show hidden images
                                       }
    |.|Sexo|{(X) Masculino
             () Feminino}
    |.
    |.|Estado|{SI 
                Acre
                Amapa
                Amazonas
              }|{^"Privacy" | (X) public | () default | () private} |*|*
    |.
    |.|{#
        .     | Column 2  | Column 3 | Column 4 | Column 5
        Row 1 | value 1   | value 2  | value 3  | value 4
        Row 2 | long cell | *        | *        | *
       }|*|*|{+{T
              + World
              ++ Europe
              +++ Italy
              +++ Germany
              ++++ Berlin
              ++ Africa
             }}|*
    |.
    |.|.|.|.|[  OK<&account-login>   ]|[Cancel<&circle-x>]
    |.
}
@endsalt

O truque de layout está na primeira linha: |area1|area2|…|area7 cria sete colunas com rótulos, e as linhas seguintes começam com |. para deixar a primeira coluna vazia, como uma margem. Os asteriscos (|*|*) fazem o menu, as abas e a tabela ocuparem várias colunas. Numa tela real, a linha de rótulos seria apagada depois de ajustar o layout.

Referência rápida

Revisão rápida

Tente responder antes de abrir cada pergunta.

Referências

1. Giovani Perotto Mesquita, “Building Mockups with PlantUML”, GitHub, texto original deste tutorial, github.com/GiovaniPM/MyCourses/blob/master/PlantUML/Course Salt.md.
2. PlantUML, “Salt (Wireframe)”, acesso em 25/09/2026, plantuml.com/salt.
3. PlantUML, site oficial, acesso em 25/09/2026, plantuml.com.
4. Wikipedia (em inglês), “Website wireframe”, acesso em 25/09/2026, en.wikipedia.org/wiki/Website_wireframe.
5. Wikipedia (em inglês), “Mockup”, acesso em 25/09/2026, en.wikipedia.org/wiki/Mockup.
6. Wikipedia (em inglês), “Software prototyping”, acesso em 25/09/2026, en.wikipedia.org/wiki/Software_prototyping.
7. PlantUML, “Download”, acesso em 25/09/2026, plantuml.com/download.
8. Visual Studio Marketplace, “PlantUML” (jebbs), acesso em 25/09/2026, marketplace.visualstudio.com/items?itemName=jebbs.plantuml.
9. Graphviz, site oficial, acesso em 25/09/2026, graphviz.org.
10. PlantUML, “Creole”, acesso em 25/09/2026, plantuml.com/creole.
11. PlantUML, “Common commands”, acesso em 25/09/2026, plantuml.com/commons.
12. Wikipedia (em inglês), “Graphical widget”, acesso em 25/09/2026, en.wikipedia.org/wiki/Graphical_widget.
13. PlantUML, “Open Iconic”, acesso em 25/09/2026, plantuml.com/openiconic.
14. Iconic, “Open Iconic”, repositório no GitHub, acesso em 25/09/2026, github.com/iconic/open-iconic.
15. PlantUML, “Sprite”, acesso em 25/09/2026, plantuml.com/sprite.
16. ManyTools, “Convert Images to ASCII Art”, acesso em 25/09/2026, manytools.org/hacker-tools/convert-images-to-ascii-art.
17. Wikipedia (em inglês), “ASCII art”, acesso em 25/09/2026, en.wikipedia.org/wiki/ASCII_art.

Salt and wireframes

A wireframe is the skeleton of a screen: it shows where fields, buttons and lists go, without worrying about colours, fonts or images. It is used to discuss the structure of an interface early, while changes are still cheap. ^[4]

A wireframe is usually followed by a mockup, a visual version with real colours and images, and then a prototype, which can already be navigated and clicked. ^{[5] [6]}

Salt is the part of PlantUML that draws wireframes from text. You describe the screen with simple symbols, such as [OK] for a button or [X] for a checked box, and PlantUML produces the image. Because it is all text, the wireframe lives in version control next to the code and the documentation. ^{[2] [3]}

What you need

• Java and the plantuml.jar file, or an editor extension such as the one for VS Code, or PlantUML’s online server. ^{[7] [8]}
• The Creole syntax, which PlantUML uses to format text (such as <b> for bold), and the common commands, such as scale. ^{[10] [11]}
• The original text also lists Graphviz, but it is only used by UML diagrams such as class and component diagrams; Salt works without it. ^[9]

Every example in this tutorial was tested on PlantUML 1.2026.8, and the figures with a white background were rendered by it. The original text was written for version 1.2020.23; the differences found are pointed out along the way. ^[1]

Structure of a file

A wireframe sits between @startsalt and @endsalt and has one main block in braces. Inside it, each line is a row of the screen, and the vertical bar | separates the columns. ^[2]

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

Lines starting with a single quote (') are comments and are not drawn.

PlantUML’s common commands also work here; the most useful is scale, which enlarges the image (scale 1.5). The old form, @startuml followed by a line with salt, raises an error in current versions: always use @startsalt. ^[11]

Basic widgets

Widgets are the controls of an interface: buttons, fields, lists. In Salt, each has a short markup. ^[12]

The original text describes the drop-down list as “create a input box representation”, the same sentence used for the input field; it is just a copy slip. The open list does not appear in the original, but it is useful for showing the available options. ^{[1] [2]}

@startsalt
{
  Plain text | [Button]
  () Unchecked option | (X) Checked option
  [] Unchecked box | [X] Checked box
  "Type here       " | ^Drop-down list^
  . | ^Smart mode^Original^Fit to screen^
  .
  .
  .
}
@endsalt

Grids and lines

Every brace opens a grid (an invisible table that aligns elements), and the character right after the brace changes the kind of block. The figure sums up the ten variations covered in this tutorial.

In grids, three symbols control which lines are drawn: ^[2]

Inside a grid, a dot (.) creates an empty cell, useful for margins or skipping columns. In tables, an asterisk (*) makes the cell on the left span over the current one, as shown later.

Groups, scrolling and separators

Group box

{^"Title" draws a frame with a title, to gather related controls.

Scroll bars

{S creates an area with both scroll bars; {SI, the vertical one only (a capital I, like an upright bar); and {S-, the horizontal one only.

{^"My group"
  Login  | "MyName    "
  [Cancel] | [ OK ]
}

{SI
  Message
  .
  .
}

Separators

A line containing just two repeated characters draws a horizontal separator:

Trees and tables

Tree

{T creates a tree. Each line starts with plus signs, and the number of + gives the level: + is the root, ++ a child, +++ a grandchild.

Tree with columns

Adding | to the lines gives the tree columns, like a table. The first line can act as a header, and the grid symbols set the lines: {T!, {T-, {T+ and {T#.

{T#
  +Region     | Population
  + World     | 8.2 billion
  ++ America  | 1.0 billion
  +++ Brazil  | 212 million
  ++ Europe   | 745 million
}

In the original example, the “Age” column is 30 on every row; it is filler data. Here we use approximate 2025 populations. ^[1]

Advanced table

In a {# table, a dot leaves a cell empty and an asterisk extends the cell on the left:

{#
  .     | Column 2    | Column 3
  Row 1 | value 1     | value 2
  Row 2 | A long cell | *
}

Blocks inside blocks

Any cell can open a new brace. That is how several controls line up in one cell, as in the original’s example, which mimics the “new Java class” dialog:

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

Tabs and menus

Tabs

{/ creates a tab bar, with tabs separated by |. To highlight the active tab, use Creole bold: <b>General. ^[10]

For vertical tabs, put one tab per line and close the block with } |: the bar after the brace places the next content beside the tabs, not below them. The original repeats the horizontal-tab description here, without mentioning this detail. ^[1]

{+
  {/ <b>General
     Fullscreen
     Behavior
     Saving } |
  {
    { Open image in: | ^Smart mode^ }
    [X] Smooth images when zoomed
    [X] Confirm image deletion
    [] Show hidden images
  }
  [Close]
}

Menus

{* creates a menu bar. A second line shows an open menu: it starts with the item name and lists the options, and a lone hyphen (-) becomes a separator.

{* File | Edit | Source | Refactor
   File | New | Open file | - | Close | Close all }

Icons and pseudo-sprites

Open Iconic

PlantUML ships the free Open Iconic icon set. To use one, write <&icon-name> in any text, such as <&person> or <&key>. To see the full list, render a diagram with the listopeniconic command. ^{[13] [14]}

@startuml
listopeniconic
@enduml

Pseudo-sprites

A pseudo-sprite is a small drawing made of text: between <<name and >>, each X becomes a black pixel and each dot an empty one. Afterwards, writing <<name>> repeats the drawing. ^[2]

Two tested details: only X is drawn (any other character is left blank), and <<name>> must be alone in its cell; in the middle of text it shows up as «name». To put a label next to it, use a column: <<folder>> | Documents.

From image to sprite

The original suggests a routine to turn an image into a pseudo-sprite: ^[1]

1. Convert the image to black and white and halve its width (characters are taller than they are wide).
2. Feed it to an ASCII art converter, such as Convert Images to ASCII Art, with a width of up to 200 characters. The address in the original has a typo (“onvert”); the correct one is in the references. ^{[16] [17]}
3. In the downloaded text, replace every non-space character with X and every space with a dot.
4. Paste the result between <<name and >>.

For UML diagrams, PlantUML also has real sprites, in shades of grey, defined with sprite $name and generated from images with java -jar plantuml.jar -encodesprite. ^[15]

Salt inside other diagrams

A wireframe can appear inside another diagram, in a note, a legend or an element’s label. Just put it between {{salt and }}. ^[2]

@startuml
class Login
note right of Login
{{salt
{
  Login | "MyName    "
  Password | "****      "
  [Cancel] | [  OK  ]
}
}}
end note
@enduml

Complete example

The original’s final example puts almost everything on one screen: menu, tabs, fields, drop-down list, group box, radio buttons, scrolling list, table, tree and buttons with icons. Some labels are in Portuguese, as in the original. ^[1]

@startsalt
'skinparam BackgroundColor lightblue
{+
    |area1|area2|area3|area4|area5|area6|area7
    |.|{* File | Edit | Source | ?
    '  File | New | Open File | - | Close | Close All | - | Exit
      ? | About}|*|*|*|*
    |.
    |.|{/ <b>General | Fullscreen | Behavior | Saving }|*|*|*|*
    |.
    |.|Login    |"MyName          "|.
    |.|Password |"****            "|.
    |.
    |.|Open image in|{ ^Smart Mode^ }|{^Options
                                        [X] Smooth images when zoomed
                                        [X] Confirm image deletion
                                        [ ] Show hidden images
                                       }
    |.|Sexo|{(X) Masculino
             () Feminino}
    |.
    |.|Estado|{SI 
                Acre
                Amapa
                Amazonas
              }|{^"Privacy" | (X) public | () default | () private} |*|*
    |.
    |.|{#
        .     | Column 2  | Column 3 | Column 4 | Column 5
        Row 1 | value 1   | value 2  | value 3  | value 4
        Row 2 | long cell | *        | *        | *
       }|*|*|{+{T
              + World
              ++ Europe
              +++ Italy
              +++ Germany
              ++++ Berlin
              ++ Africa
             }}|*
    |.
    |.|.|.|.|[  OK<&account-login>   ]|[Cancel<&circle-x>]
    |.
}
@endsalt

The layout trick is in the first line: |area1|area2|…|area7 creates seven labelled columns, and the following lines start with |. to leave the first column empty, as a margin. The asterisks (|*|*) make the menu, the tabs and the table span several columns. On a real screen, the label row would be deleted once the layout is settled.

Quick reference

Quick review

Try to answer before opening each question.

References

1. Giovani Perotto Mesquita, “Building Mockups with PlantUML”, GitHub, original text of this tutorial, github.com/GiovaniPM/MyCourses/blob/master/PlantUML/Course Salt.md.
2. PlantUML, “Salt (Wireframe)”, accessed 25 September 2026, plantuml.com/salt.
3. PlantUML, official website, accessed 25 September 2026, plantuml.com.
4. Wikipedia, “Website wireframe”, accessed 25 September 2026, en.wikipedia.org/wiki/Website_wireframe.
5. Wikipedia, “Mockup”, accessed 25 September 2026, en.wikipedia.org/wiki/Mockup.
6. Wikipedia, “Software prototyping”, accessed 25 September 2026, en.wikipedia.org/wiki/Software_prototyping.
7. PlantUML, “Download”, accessed 25 September 2026, plantuml.com/download.
8. Visual Studio Marketplace, “PlantUML” (jebbs), accessed 25 September 2026, marketplace.visualstudio.com/items?itemName=jebbs.plantuml.
9. Graphviz, official website, accessed 25 September 2026, graphviz.org.
10. PlantUML, “Creole”, accessed 25 September 2026, plantuml.com/creole.
11. PlantUML, “Common commands”, accessed 25 September 2026, plantuml.com/commons.
12. Wikipedia, “Graphical widget”, accessed 25 September 2026, en.wikipedia.org/wiki/Graphical_widget.
13. PlantUML, “Open Iconic”, accessed 25 September 2026, plantuml.com/openiconic.
14. Iconic, “Open Iconic”, GitHub repository, accessed 25 September 2026, github.com/iconic/open-iconic.
15. PlantUML, “Sprite”, accessed 25 September 2026, plantuml.com/sprite.
16. ManyTools, “Convert Images to ASCII Art”, accessed 25 September 2026, manytools.org/hacker-tools/convert-images-to-ascii-art.
17. Wikipedia, “ASCII art”, accessed 25 September 2026, en.wikipedia.org/wiki/ASCII_art.

Salt e wireframe

Un wireframe è lo scheletro di una schermata: mostra dove stanno campi, pulsanti ed elenchi, senza preoccuparsi di colori, caratteri o immagini. Serve a discutere la struttura di un’interfaccia presto, quando cambiarla costa ancora poco. ^[4]

Dopo il wireframe di solito vengono il mockup, una versione visiva con colori e immagini reali, e il prototipo, che si può già navigare e cliccare. ^{[5] [6]}

Salt è la parte di PlantUML che disegna wireframe a partire dal testo. Si descrive la schermata con simboli semplici, come [OK] per un pulsante o [X] per una casella spuntata, e PlantUML genera l’immagine. Poiché è tutto testo, il wireframe sta nel controllo di versione accanto al codice e alla documentazione. ^{[2] [3]}

Che cosa serve

• Java e il file plantuml.jar, oppure un’estensione dell’editor, come quella per VS Code, o il server online di PlantUML. ^{[7] [8]}
• La sintassi Creole, che PlantUML usa per formattare i testi (come <b> per il grassetto), e i comandi comuni, come scale. ^{[10] [11]}
• Il testo originale elenca anche Graphviz, ma è usato solo da diagrammi UML come quelli delle classi e dei componenti; Salt funziona senza. ^[9]

Tutti gli esempi di questo tutorial sono stati verificati con PlantUML 1.2026.8, e le figure con sfondo bianco sono state generate da esso. Il testo originale era scritto per la versione 1.2020.23; le differenze trovate sono segnalate lungo il testo. ^[1]

Struttura di un file

Un wireframe sta tra @startsalt e @endsalt e ha un blocco principale tra graffe. Al suo interno, ogni riga è una riga della schermata, e la barra verticale | separa le colonne. ^[2]

@startsalt
{
  Utente | "IlMioNome "
  Password | "****      "
  [Annulla] | [  OK  ]
}
@endsalt

Le righe che iniziano con un apice (') sono commenti e non vengono disegnate.

Anche i comandi comuni di PlantUML valgono qui; il più utile è scale, che ingrandisce l’immagine (scale 1.5). La forma vecchia, @startuml seguito da una riga con salt, dà errore nelle versioni attuali: usate sempre @startsalt. ^[11]

Widget di base

I widget sono i controlli di un’interfaccia: pulsanti, campi, elenchi. In Salt, ognuno ha una marcatura breve. ^[12]

Il testo originale descrive il menu a tendina come “create a input box representation”, la stessa frase del campo di testo; è solo un errore di copia. Il menu aperto non compare nell’originale, ma è utile per mostrare le opzioni disponibili. ^{[1] [2]}

@startsalt
{
  Testo semplice | [Pulsante]
  () Opzione non selezionata | (X) Opzione selezionata
  [] Casella vuota | [X] Casella spuntata
  "Scrivi qui      " | ^Menu a tendina^
  . | ^Modalità smart^Originale^Adatta allo schermo^
  .
  .
  .
}
@endsalt

Griglie e linee

Ogni graffa apre una griglia (una tabella invisibile che allinea gli elementi), e il carattere subito dopo la graffa cambia il tipo di blocco. La figura riassume le dieci varianti trattate in questo tutorial.

Nelle griglie, tre simboli controllano le linee disegnate: ^[2]

In una griglia, un punto (.) crea una cella vuota, utile per lasciare margini o saltare colonne. Nelle tabelle, un asterisco (*) fa estendere la cella di sinistra sopra quella corrente, come vedremo più avanti.

Gruppi, scorrimento e separatori

Riquadro di gruppo

{^"Titolo" disegna una cornice con un titolo, per riunire controlli correlati.

Barre di scorrimento

{S crea un’area con entrambe le barre di scorrimento; {SI, solo quella verticale (è una I maiuscola, come una barra in piedi); e {S-, solo quella orizzontale.

{^"Il mio gruppo"
  Utente  | "IlMioNome "
  [Annulla] | [ OK ]
}

{SI
  Messaggio
  .
  .
}

Separatori

Una riga che contiene solo due caratteri ripetuti disegna un separatore orizzontale:

Alberi e tabelle

Albero

{T crea un albero. Ogni riga inizia con dei segni più, e il numero di + indica il livello: + è la radice, ++ un figlio, +++ un nipote.

Albero con colonne

Aggiungendo | alle righe, l’albero acquista colonne, come una tabella. La prima riga può fare da intestazione, e gli stessi simboli delle griglie definiscono le linee: {T!, {T-, {T+ e {T#.

{T#
  +Regione     | Popolazione
  + Mondo      | 8,2 miliardi
  ++ America   | 1,0 miliardi
  +++ Brasile  | 212 milioni
  ++ Europa    | 745 milioni
}

Nell’esempio originale, la colonna “Age” vale 30 in tutte le righe; è un dato di riempimento. Qui usiamo popolazioni approssimative del 2025. ^[1]

Tabella avanzata

In una tabella {#, il punto lascia una cella vuota e l’asterisco estende la cella di sinistra:

{#
  .      | Colonna 2       | Colonna 3
  Riga 1 | valore 1        | valore 2
  Riga 2 | Una cella lunga | *
}

Blocchi dentro blocchi

Qualsiasi cella può aprire una nuova graffa. Così si allineano più controlli nella stessa cella, come nell’esempio dell’originale, che imita la finestra di creazione di una classe Java:

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

Schede e menu

Schede

{/ crea una barra di schede, separate da |. Per evidenziare la scheda attiva, usate il grassetto di Creole: <b>Generale. ^[10]

Per le schede verticali, mettete una scheda per riga e chiudete il blocco con } |: la barra dopo la graffa mette il contenuto successivo accanto alle schede, non sotto. L’originale qui ripete la descrizione delle schede orizzontali, senza citare questo dettaglio. ^[1]

{+
  {/ <b>Generale
     Schermo intero
     Comportamento
     Salvataggio } |
  {
    { Apri immagine in: | ^Modalità smart^ }
    [X] Ammorbidisci le immagini ingrandite
    [X] Conferma eliminazione
    [] Mostra immagini nascoste
  }
  [Chiudi]
}

Menu

{* crea una barra dei menu. Una seconda riga mostra un menu aperto: inizia con il nome della voce ed elenca le opzioni, e un trattino isolato (-) diventa un separatore.

{* File | Modifica | Sorgente | Refactoring
   File | Nuovo | Apri file | - | Chiudi | Chiudi tutto }

Icone e pseudo-sprite

Open Iconic

PlantUML include il set di icone libere Open Iconic. Per usarne una, scrivete <&nome-icona> in un testo qualsiasi, come <&person> o <&key>. Per vedere l’elenco completo, generate un diagramma con il comando listopeniconic. ^{[13] [14]}

@startuml
listopeniconic
@enduml

Pseudo-sprite

Uno pseudo-sprite è un piccolo disegno fatto di testo: tra <<nome e >>, ogni X diventa un pixel nero e ogni punto un pixel vuoto. Poi basta scrivere <<nome>> per ripetere il disegno. ^[2]

Due dettagli verificati: viene disegnata solo la X (ogni altro carattere resta vuoto), e <<nome>> deve stare da solo nella cella; in mezzo a un testo appare come «nome». Per mettergli accanto un’etichetta, usate una colonna: <<cartella>> | Documenti.

Dall’immagine allo sprite

L’originale propone una procedura per trasformare un’immagine in pseudo-sprite: ^[1]

1. Convertire l’immagine in bianco e nero e dimezzarne la larghezza (i caratteri sono più alti che larghi).
2. Passarla a un convertitore di ASCII art, come Convert Images to ASCII Art, con una larghezza fino a 200 caratteri. L’indirizzo nell’originale ha un refuso (“onvert”); quello corretto è nei riferimenti. ^{[16] [17]}
3. Nel testo scaricato, sostituire ogni carattere diverso dallo spazio con X e ogni spazio con un punto.
4. Incollare il risultato tra <<nome e >>.

Per i diagrammi UML, PlantUML ha anche sprite veri, in scala di grigi, definiti con sprite $nome e generati da immagini con java -jar plantuml.jar -encodesprite. ^[15]

Salt dentro altri diagrammi

Un wireframe può comparire dentro un altro diagramma, in una nota, una legenda o l’etichetta di un elemento. Basta metterlo tra {{salt e }}. ^[2]

@startuml
class Login
note right of Login
{{salt
{
  Utente | "IlMioNome "
  Password | "****      "
  [Annulla] | [  OK  ]
}
}}
end note
@enduml

Esempio completo

L’esempio finale dell’originale mette quasi tutto in una sola schermata: menu, schede, campi, menu a tendina, riquadro di gruppo, pulsanti di opzione, elenco con scorrimento, tabella, albero e pulsanti con icone. Le etichette mescolano inglese e portoghese, come nell’originale. ^[1]

@startsalt
'skinparam BackgroundColor lightblue
{+
    |area1|area2|area3|area4|area5|area6|area7
    |.|{* File | Edit | Source | ?
    '  File | New | Open File | - | Close | Close All | - | Exit
      ? | About}|*|*|*|*
    |.
    |.|{/ <b>General | Fullscreen | Behavior | Saving }|*|*|*|*
    |.
    |.|Login    |"MyName          "|.
    |.|Password |"****            "|.
    |.
    |.|Open image in|{ ^Smart Mode^ }|{^Options
                                        [X] Smooth images when zoomed
                                        [X] Confirm image deletion
                                        [ ] Show hidden images
                                       }
    |.|Sexo|{(X) Masculino
             () Feminino}
    |.
    |.|Estado|{SI 
                Acre
                Amapa
                Amazonas
              }|{^"Privacy" | (X) public | () default | () private} |*|*
    |.
    |.|{#
        .     | Column 2  | Column 3 | Column 4 | Column 5
        Row 1 | value 1   | value 2  | value 3  | value 4
        Row 2 | long cell | *        | *        | *
       }|*|*|{+{T
              + World
              ++ Europe
              +++ Italy
              +++ Germany
              ++++ Berlin
              ++ Africa
             }}|*
    |.
    |.|.|.|.|[  OK<&account-login>   ]|[Cancel<&circle-x>]
    |.
}
@endsalt

Il trucco di impaginazione sta nella prima riga: |area1|area2|…|area7 crea sette colonne con etichetta, e le righe seguenti iniziano con |. per lasciare vuota la prima colonna, come un margine. Gli asterischi (|*|*) fanno occupare più colonne al menu, alle schede e alla tabella. In una schermata vera, la riga delle etichette si cancellerebbe una volta sistemato il layout.

Riferimento rapido

Ripasso veloce

Provate a rispondere prima di aprire ogni domanda.

Riferimenti

1. Giovani Perotto Mesquita, “Building Mockups with PlantUML”, GitHub, testo originale di questo tutorial, github.com/GiovaniPM/MyCourses/blob/master/PlantUML/Course Salt.md.
2. PlantUML, “Salt (Wireframe)”, consultato il 25/09/2026, plantuml.com/salt.
3. PlantUML, sito ufficiale, consultato il 25/09/2026, plantuml.com.
4. Wikipedia (in inglese), “Website wireframe”, consultato il 25/09/2026, en.wikipedia.org/wiki/Website_wireframe.
5. Wikipedia (in inglese), “Mockup”, consultato il 25/09/2026, en.wikipedia.org/wiki/Mockup.
6. Wikipedia (in inglese), “Software prototyping”, consultato il 25/09/2026, en.wikipedia.org/wiki/Software_prototyping.
7. PlantUML, “Download”, consultato il 25/09/2026, plantuml.com/download.
8. Visual Studio Marketplace, “PlantUML” (jebbs), consultato il 25/09/2026, marketplace.visualstudio.com/items?itemName=jebbs.plantuml.
9. Graphviz, sito ufficiale, consultato il 25/09/2026, graphviz.org.
10. PlantUML, “Creole”, consultato il 25/09/2026, plantuml.com/creole.
11. PlantUML, “Common commands”, consultato il 25/09/2026, plantuml.com/commons.
12. Wikipedia (in inglese), “Graphical widget”, consultato il 25/09/2026, en.wikipedia.org/wiki/Graphical_widget.
13. PlantUML, “Open Iconic”, consultato il 25/09/2026, plantuml.com/openiconic.
14. Iconic, “Open Iconic”, repository su GitHub, consultato il 25/09/2026, github.com/iconic/open-iconic.
15. PlantUML, “Sprite”, consultato il 25/09/2026, plantuml.com/sprite.
16. ManyTools, “Convert Images to ASCII Art”, consultato il 25/09/2026, manytools.org/hacker-tools/convert-images-to-ascii-art.
17. Wikipedia (in inglese), “ASCII art”, consultato il 25/09/2026, en.wikipedia.org/wiki/ASCII_art.