Creating Sequence Diagram using PlantUML
PlantUML is an open-source implement and syntax for engendering diagrams from plain-text definitions. We utilize simple text syntax to describe a type of diagram, as well as the elements which make up the diagram, and our away.
Utilizing this plain text syntax and a rendering server/plugin to convert our text into diagrams, we can draw near on any architectural diagram that we require when designing a system.
Here are just a few of the types of diagrams we can engender:
- Sequence diagram
- Usecase diagram
- Class diagram
- Object diagram
- Activity diagram
- Component diagram
- Deployment diagram
- State diagram
- Timing diagram
Steps to create sequence diagrams
Step 2: Add PlantUML extension for Visual Studio Code
Install the extension
Step 3: Create a text file with PlantUML commands, like this example called sequenceDiagram.txt:
@startumlskinparam SequenceMessageAlignment centeractor UserUser -> WebPortal: login WebPortal -> Backend:POST request with username and passwordBackend ->Backend:Validation.Generate JWT token.Backend -->WebPortal:Return JWT tokenWebPortal ->WebPortal:Store JWT tokenUser -> WebPortal:Get list of articlesWebPortal ->Backend:GET /article(send JWT token at header)Backend ->Backend:Validate JWT tokenBackend-->WebPortal:Return the Response@enduml
Run
- Open a PlantUML file in Visual Studio Code editor
- Right-click on the PlantUML file and select "Preview current PlantUML code". The diagram will open in a new tab.
- Shortcut keys: Click anywhere on the PlantUML file and use the following shortcut keys to view the PlantUML code:
CTRL + P (Windows/Linux)
CMD + P (Mac)
or We can export the diagram
Right-click on the PlantUML file and select "Export Current Diagram".