Create Sequence Diagrams - PlantUML- How?
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:
skinparam SequenceMessageAlignment center
User -> WebPortal: login
WebPortal -> Backend:POST request with username and password
Backend ->Backend:Validation.Generate JWT token.
Backend -->WebPortal:Return JWT token
WebPortal ->WebPortal:Store JWT token
User -> WebPortal:Get list of articles
WebPortal ->Backend:GET /article(send JWT token at header)
Backend ->Backend:Validate JWT token
Backend-->WebPortal:Return the Response
- 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".