Back to VS Code home
The visual representation provided by the Ballerina VS Code extension has its roots in sequence diagrams. They can capture how the logic of your program flows, how the concurrent execution flow works, which remote endpoints are involved, and how those endpoints interact with the different workers in the program.
Access the Sequence Diagram View
There are two methods for switching to the graphical mode and accessing the Sequence Diagram View using the VS Code extension as shown below.
Via the CodeLens
Click the Visualize CodeLens that appears in the editor.
Via the editor group button
Click the Show Diagram button in the editor group.
Shown below is the code editor and graphical editor in the split view. The graphical mode is focused on the main function.
Graphical representation of code
Ballerina code can be represented graphically in the following ways.
Graphical representations of functions are based on sequence diagrams. Each function has a lifeline with a start and end, and this lifeline represents the flow of the function logic.
Concurrent executions are supported in Ballerina through workers. Each worker has a lifeline that runs parallel to the lifeline of the main function body. The diagram also captures asynchronous messaging between workers.
The following example shows how asynchronous messaging is represented in the diagram.
Remote endpoints and clients
Ballerina specifies interactions with remote endpoints through its syntax. These interactions are presented graphically in the diagram view by giving each endpoint a lifeline. This endpoint lifeline represents the messages that the endpoint can receive.
The following code shows an HTTP client that is used for the
POST requests sent to a remote endpoint.
Develop programs in graphical mode
You can interact with the diagram using the
plus icons placed in the lifeline. Click Add to add a statement at the function execution.