Desenhando fluxos de uma maneira programática com o PlantUML · jsfelipearaujo

PlantUML

Recentemente precisei desenhar um fluxo para uma nova aplicação e queria de alguma maneira manter o desenho atualizado via algum gerenciador de arquivos (GitHub, Bitbucket, etc) para facilitar a manutenção e contribuíção dos colegas de equipe.

Foi ai que surgiu o PlantUML.

O PlantUML é uma ferramenta que possibilita que rapidamente possamos escrever:

Diagramas de sequência
Diagramas de caso de uso
Diagramas de estado
E muitos outros

Para podermos sair usando a ferramenta é necessário instalar alguns componentes. Abaixo segue o passo-a-passo para instalar no Ubuntu (também funciona no WSL2):

1 - Atualize as dependências e instale o curl:

apt-get update && apt-get install -y curl

2 - Execute o script para instalar as dependências do PlantUML e o próprio PlantUML:

sudo bash -c "curl -L https://raw.githubusercontent.com/jfelipearaujo/plantuml-install/main/plantuml-install-ubuntu.sh | bash"

Atenção: O script acima consegue realizar tanto a instalação quanto a atualização do PlantUML!

Feito isso, agora é hora de partirmos para o código!

Mas você pode estar se perguntando, como conseguirei vizualizar o desenho?

Bom, existem algumas possibilidades, entre elas visualizar online através do site oficial do PlantUML ou também através de uma extensão no VS Code (que por sinal é minha escolha =D).

Escrevendo o código

Para darmos sequência neste artigo, entenderei que você também seguirá utilizando a extensão que sugeri pois existem alguns atalhos bem específicos que utilizarei mais para frente.

Abra o VS Code, crie um arquivo novo com a extensão .puml ou .plantuml.

Escreva o código abaixo:

@startuml my-first-uml
participant Participant as Foo
actor       Actor       as Foo1
boundary    Boundary    as Foo2
control     Control     as Foo3
entity      Entity      as Foo4
database    Database    as Foo5
collections Collections as Foo6
queue       Queue       as Foo7
Foo -> Foo1 : To actor 
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
@enduml

Salve o arquivo e utilize os atalhos Alt+D para abrir o preview automático!

Se tudo der certo você conseguirá ver ao lado do seu código um preview com o fluxo que você desenhou:

my-first-uml

Com a extensão também é possível exportar o desenho para .png, por exemplo, caso você queira compartilhar em algum outro site ou para algum colega.

Para isso utilize o atalho Ctrl+Shift+P, busque por PlantUML: Export Current Diagram, escolha o formato e feito!

Ah e eu sugiro dar uma fuçada nas configurações da extensão para modificar o comportamento dela na exportação da imagem e também uma extensão padrão.

Vale ressaltar que o site oficial possui vários exemplos de inúmeros diagramas, todos bem explicados e fáceis de entender e replicar.

Espero que esse artigo tenha ajudado você que assim como eu sempre quis uma maneira mais prática e fácil de "codificar" desenhos :)

Um abraço!