PlantUML to write UML diagram by code

Posted: Friday November 12th, 2021/Under: News, General, IT technique/By: Akiyasu Maeda
PlantUML to write UML diagram by code

About PlantUML

There are many situations to explain requirements, configurations, and functions using UML diagrams in the software developments regardless of Waterfall or Agile model.
But the diagram documents are not created by text editors, by drawing applications so it is difficult to understand the gap in every version.
PlantUML helps us to create them by coding so it is easy to understand the differences by text. That is easy to manage versions.

Create Local Environment

Start PlantUML in local host

Explain the easy installation using Docker.

  1. Install Docker and start it.（Check here to install Docker.）
  2. Execute this command “docker run -d -p 8080:8080 plantuml/plantuml-server:jetty” and start the Docker container of PlantUML.
  3. Access to “http://localhost:8080/” in your browser. It success when it is shown like below’s screen.

Setting VScode

  1. Click Extension and、Install “PlantUML” plug-in.
  2. Open Extension setting of it and set it as below’s.
    • Plantuml: Render => PlantUMLServer
    • Plantuml: Server => http://localhost:8080

How to use

Show preview while editting

  1. Create an UML file, *****.uml, and copy below’s code and paste to the file.
    @startuml
    start
    repeat
    :Test something;
    if (Something went wrong?) then (no)
    #palegreen:OK;
    break
    endif
    ->NOK;
    :Alert "Error with long text";
    repeat while (Something went wrong with long text?) is (yes) not (no)
    ->//merged step//;
    :Alert "Success";
    stop
    @enduml
  2. Choose “PlantUML:Preview Current Diagram” on the command pannel.
  3. Show the preview window

Output diagram

  1. Choose “PlantUML: Export Current File Diagrams” on the command panel.
  2. Choose png.
  3. Created “out” folder and created the image file under this folder.

It is possible for us to create the Sequence diagram, the Use-case diagrams, the Class diagram, and etc besides the Activity diagram and the site has samples to create them so check up this site.

Create system configuration diagram using AWS services

Give us the icons of AWS for PlantUML on GitHub.

Previously, AWS-PlantUML was often used to. But recently it is not updated. For this reason I use aws-icons-for-plantuml as alternative.

The diagram using it is below’s.


@startuml aws-sample-system-diagram

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v11.1/dist
!includeurl AWSPuml/AWSCommon.puml
!includeurl AWSPuml/NetworkingContentDelivery/ElasticLoadBalancingApplicationLoadBalancer.puml
!includeurl AWSPuml/GroupIcons/Region.puml
!includeurl AWSPuml/NetworkingContentDelivery/Route53.puml
!includeurl AWSPuml/Compute/all.puml
!includeurl AWSPuml/Storage/SimpleStorageService.puml
!includeurl AWSPuml/Database/AuroraMySQLInstance.puml
!includeurl AWSPuml/Database/ElastiCacheElastiCacheforRedis.puml

left to right direction

actor "Person" as personAlias
Region(cloudArea, "Tokyo", "AWS", ""){
Route53(route53, "Sample.com", "Route53", "")
ElasticLoadBalancingApplicationLoadBalancer(elb, "Production-ALB", "ALB", "")
EC2Instance(desktopAlias, "Production-ec2", "EC2", "t3.micro \n amazon linux2")
SimpleStorageService(storageAlias, "Production-s3", "AmazonS3", "Host name \n public")
AuroraMySQLInstance(rds,"Database","RDS Mysql","Host name \n DB name")
ElastiCacheElastiCacheforRedis(redis,"Redis","Elastic Cache","Host name")
}

personAlias --> route53
route53 --> elb
elb --> desktopAlias
elb --> storageAlias
desktopAlias --> storageAlias
desktopAlias --> redis
rds <--> desktopAlias
@enduml

The icons you want to use besides are written AWSSymbols.md under the top folder.

Impression

Creating them by VScode causes no need to buy software licenses to create the diagrams and it is easy to work with others. And it is easy to manage the version also.

We can not adjust the position of diagrams. The setting of the position is only drawn from top to down or from left to right.
For that reason, it is better to avoid using it if the people who are got explanations can not be accepted.

But for me, It is possible to focus to create the diagrams efficiently by not mind adust the position in detail and writing only important things. I think.

Note

If you don’t want to create the local environment, try to use demo of PlantUML site.

And then you can use Preview of VScode without Docker when you set the URL of PlantUML to “Plantuml: Render”. But It is better to use it considering the documents that you create are confidential or not.

Refer to

PlantUML
Visual Studio Codeでプレビューを見ながらPlantUMLを書ける環境をDockerで作る
aws-icons-for-plantuml

Categories