PlantUML

PlantUML es una aplicación que permite escribir rápidamente diferentes tipos de diagramas (UML y no UML).

En base a unas instrucciones, puedes crear y exportar diagramas a diferentes formatos (png, SVG, etc). Echa un vistazo a la guía online para descubrir diferentes opciones para crear diagramas.

Me encanta la extensión de PlantUML para VSCode, puesto que me permite generar diagramas sin salir del editor.

Es posible instalar la extensión y utilizar el servicio online para crear diagramas, pero por motivos de privacidad, recomendaría instalar el servidor local.

Ejecutar servidor local para PlantUML

Para poder ejecutar el servidor es necesario seguir los siguientes pasos:

1. Descargar e instalar Java.

2. Instalar Graphviz, necesario para diagramas complejos.

   brew install graphviz
   

3. Descarga el fichero plantuml.jar desde la página oficial de Plantum o desde github releases.

Con eso estaría todo. Simplemente ejecuta el siguiente comando en tu consola para tener listo el servidor local:

java -jar plantuml.jar -picoweb:8000

Ejecutar PlantUML con imagen Docker

Otra alternativa es obtener una imagen de Docker en lugar de instalar localmente.

1. Ejecuta Docker y descarga la imagen de PlantUML. Puedes hacer pull ejecutando:

   docker pull plantuml/plantuml-server
   

2. Ejecuta la imagen, por defecto el contenedor ejecuta el servidor en el puerto 8080. Podrías cambiar al 8000 por ejemplo con el siguiente comando:

   docker run -d -p 8000:8080 plantuml/plantuml-server
   

PlantUML VSCode settings

Éstas son las settings relativas a la extensión PlantUML:

{
  "plantuml.server": "http://localhost:8000",
  "plantuml.render": "PlantUMLServer",
  "plantuml.diagramsRoot": "docs/diagrams/src",
  "plantuml.exportOutDir": "docs/diagrams/out",
  "plantuml.exportSubFolder": false
}

Creando diagramas desde VSCode

Ejecuta el servidor de PlantUML y crea un fichero en docs/diagrams/src, hello.puml por ejemplo, con este contenido:

@startuml hello
Alice -> Bob: test
@enduml

Escribe PlantUml en la paleta de comandos de VSCode y selecciona PlantUML: Preview Current Diagram (o usa el shortcut Option + D).

Si todo está funcionando correctamente, deberías de ser capaz de visualizar la vista previa para el diagrama.

Ahora, escribe y selecciona en la paleta de comandos PlantUML: Export Current File Diagrams y exporta el diagrama a png, SVG o txt.