PlantUML

Introdución

PlantUML é unha ferramenta popular de código aberto para crear diagramas UML e outros modelos visuais. Se es un desenvolvedor de software, pode que queiras usar PlantUML para crear diagramas na túa documentación de código ou noutros escritos técnicos. Por sorte, coa axuda de Visual Studio Code, configurar e executar PlantUML é doado.

Uso con Visual Studio Code

Extensión PlantUML

Aquí tes unha guía paso a paso para axudarche a comezar con PlantUML en Visual Studio Code.

Paso 1: Instalar a extensión PlantUML

O primeiro paso é instalar a extensión PlantUML en Visual Studio Code:

1. Abre a barra lateral Extensións facendo clic na icona Extensións na barra lateral esquerda ou premendo Ctrl+Maiús+X en Windows ou Cmd+Maiús+X en Mac.
2. Busca PlantUML no Mercado de extensións
3. Fai clic en "Instalar".

Paso 2: Configurar a extensión PlantUML

Configuración do servidor para PlantUML

1. Abre a Configuración de VS Code facendo clic na icona da engrenaxe na esquina inferior esquerda da xanela ou premendo Ctrl+ en Windows ou Cmd+ en Mac. A continuación, terás que configurar a extensión PlantUML.
2. Á esquerda, fai clic en extensións e abre configuracións de plantUML.
3. Despois, desprázate cara abaixo ata a opción Renderizar e selecciona PlantUMLServer no menú despregable e, dentro da opción do servidor, engade o enderezo oficial do servidor plantUML ().

NOTA. Este paso é opcional. Se non o facemos, resolverá en local se temos unha versión de JDK compatible; e tamén podes engadir a URL do noso servidor se queremos ter control dos datos

Paso 3: Crea un ficheiro PlantUML

Agora que tes a extensión instalada e configurada, podes crear o teu primeiro ficheiro PlantUML.

No explorador de ficheiros de VS Code, crea un novo ficheiro coas extensións ".wsd .pu .puml .plantuml .iuml". Isto garantirá que VS Code o recoñeza como un ficheiro PlantUML.

Paso 4: Escribe o código do teu diagrama

No teu novo ficheiro PlantUML, podes escribir o código do teu diagrama usando a sintaxe de PlantUML. Por exemplo, podes crear un diagrama de clases como este:

@startuml
class Coche {
-marca: string
-modelo: string
-año: int
+arrancar()
+apagar()
}
@enduml

Paso 5: Previsualiza o teu diagrama

Para previsualizar o teu diagrama de PlantUML, abre a paleta de comandos premendo Ctrl+Shift+P en Windows ou Cmd+Shift+P en Mac. Escribe "PlantUML" na barra de busca e, a seguir, selecciona "Previsualizar o diagrama actual" ou simplemente fai clic co botón dereito no código e selecciona o mesmo. Isto abrirá unha nova lapela en VS Code co teu diagrama renderizado como unha imaxe PNG.

Alt + D para previsualizar o diagrama

Paso 6: Exporta o teu diagrama

Unha vez que esteas satisfeito co teu diagrama, podes exportalo como un ficheiro de imaxe. Abre de novo a paleta de comandos e selecciona "Exportar diagrama actual". Escolle un formato de ficheiro (PNG, SVG ou PDF) e, a seguir, selecciona un cartafol de destino. O teu diagrama gardarase como un ficheiro de imaxe no cartafol seleccionado.

Con estes sinxelos pasos, podes configurar e executar PlantUML en Visual Studio Code para crear diagramas de aspecto profesional para a túa documentación de código e redacción técnica. Outra cousa interesante é que o diagrama se xenera mediante unha sintaxe... co que podes pedirlle a unha IA que che xenere ese código!

Referencias

• Configurando e execuntando PlantUML con VS Code
• Videotitorial paso a paso
• PlantUML online
• Guía