Create Sequence Diagrams using PlantUML

by Anurag Srivastava,Jun 27, 2021, 12:50:31 PM | 5 minutes |

In this blog, I am going to explain how you can create a sequence diagram using PlantUML. You may have used different applications to create a sequence diagram like paint tool, ppt, Google Slides, Draw.io, or maybe Google Drawing tool. Even I have also used many of these tools to create the sequence diagrams. But once I used Plantuml it has solved all my problems related to the sequence diagram. Using this tool we can easily configure the components and can connect them also if we want to do any modification then that can easily be done by changing the line of code instead of modifying the diagram. But before moving forward let's understand what is a sequence diagram.

A sequence diagram is a sort of interaction diagram that depicts how a set of items interacts and in what order. Software engineers and business experts use these diagrams to better understand the requirements for the system.

PlantUML is an open-source tool that allows users to generate diagrams using just text. PlantUML supports a variety of different software development-related formats, as well as the visualization of JSON and YAML files, in addition to UML diagrams.

Enough discussion on Plantuml now let's jump to the practical thing and see how you can quickly create the sequence diagrams using PlantUML. You can use the PlantUML website to create the code and diagram or you can install the PlantUML plugin to your IDE like VSCode. I have chosen the second option where I have installed the PlantUML plugin on VSCode. Once you install the plugin, you can start creating the sequence diagrams by creating and saving a file with the .puml extension. To create your first sequence diagram using PlanyUML you can do the following:

- Create a file as intropuml.puml and open it in VSCode.

- Start the code with a startuml marker and give the name of the diagram. Refer to the below command:

@startuml client-server

- Here we want to create two boxes for the client and server to show the interaction between the two. So first we need to add those as participants, refer to the below command:

participant Client
participant Server

- Now to show the interaction between the client and server we can mention them using an arrow and can add the connection message after a colon sign. We can use activate to add the block for the component, like if we request to a server then the server should activate. Refer to the below code:

Client -> Server : Request
activate Server
Server -> Client : Response

- Once you are done then end the puml script using the below command:

@enduml

To summarize the above commands, we need to write the following in the intropuml.puml file:

@startuml client-server

participant Client
participant Server

Client -> Server : Request
activate Server
Server -> Client : Response

@enduml

Once you are done with the code you can display the diagram by clicking on the "Preview Current Diagram" after the right click on the code of the file. You can also use the shortcut "Alt + D" to display the diagram. On the preview you can see the following diagram:

Now take the second example where we want to show the interaction between frontend application, API Gateway, Lambda, and database. Refer to the following code:

@startuml get-user-list

participant "Frontend App" as app
participant "API Gateway" as gateway
participant "Lambda" as lambda
participant "DB" as db

title sequence diagram for user get request

app -> gateway: (GET /users)\nGet user request \nfrom application
activate gateway
return

activate lambda
gateway -> lambda: Hit the listusers \nLambda API with person Id

lambda -> db: Fetch list of User Names \nfrom 'users' table
activate db
return

lambda -> lambda: Transform List of users \nas a response object.
gateway <-- lambda: Return response.
app <-- gateway: Return response.
destroy lambda

@enduml

In the above code, we have started the UML code and then added the participants for Frontend App, API Gateway, Lambda, and DB. Then we are adding the title for the diagram as "Sequence diagram for user get request". After the title, we can see the interactions between the components. We can use the "<--" double dots to depict the dotted lines for return. We can get the following image by previewing the above code:

Now, let's take one more example to understand some formatting options. Please refer to the below code:

@startuml testanurag
actor Users #Yellow
activate frontend #LightBlue
activate  APIGateway #LightCoral
activate  Lambda #LightSalmon
database DynamoDB #grey

Users -> frontend : interact
frontend -> APIGateway : GET /user
APIGateway-> Lambda : getUsers()
Lambda -> DynamoDB : fetch user from\n users table
DynamoDB -[#Gray]-> Lambda: Return 

APIGateway <-[#Gray]- Lambda  : return

APIGateway -[#Gray]-> frontend : return the response
frontend -[#Gray]-> Users : Response
@enduml

In the above code we are using the actor also that is a user. Also, the color of different components is configured by providing the color name along with activate code. During the interaction, the color of lines can also be changed. By previewing the above code, we can get the following diagram:

So this way we can easily create a sequence diagram using the PlantUML library. It saves a lot of time as we can use the same code and by doing minor changes we can create other diagrams. If you have any queries or suggestions then leave your comment.

Anurag Srivastava

3 likes | 6189 views | 0 comments | bookmark |

Create Sequence Diagrams using PlantUML

Comments (0)

Leave a comment

Related Blogs

Introduction to Kibana

Bucket Aggregation in Elasticsearch

Metrics Aggregations in Elasticsearch

Introduction to Elasticsearch Aggregations

Wildcard and Boolean Search in Elasticsearch

Basics of Data Search in Elasticsearch

Top Blogs

Wildcard and Boolean Search in Elasticsearch

Elasticsearch REST APIs

How to count number of words in a HTML string and find Read time in Python 3

Create a Chess board in PHP

Bucket Aggregation in Elasticsearch

Metrics Aggregations in Elasticsearch

Categories