Ballerina VSCode Plugin — Graphical Editor for Ballerina
Focus
During this post, we’ll be looking at what’s Graphical Editing for Ballerina and also will explore the various graphical editor features available in Ballerina VSCode Plugin.
At the early stages of Ballerina Graphical Editor, we shipped it as a standalone IDE called Ballerina Composer. With the evolution of Ballerina, we integrated the graphical editing features to the VSCode Plugin. If you are interested, you can have a look at the earlier graphical editor and capabilities under the following links,
Why Graphical Editor
In order to meet the expectation of an integration solution, there are three major phases which we follow. Design, Development and Representation are those phases. When it comes to the Design and Representation phases, graphical tools play a major role. As an example consider the architecture design phase where we use graphics to highlight various components in the solution and to represent the communication between these components. Same applies for the representation phase as well.
With Ballerina’s focus on text to visual parity, we have taken the integration development to the next level. You can use the Ballerina’s graphical syntax to design and represent your integration flow in a sequence diagrammatic manner. This allows you to visualize the parallel executions and endpoint interactions in your solution explicitly.
Now let’s have a look at how to use the Ballerina Graphical Editor effectively.
Launch Graphical Editor
Ballerina Graphical Editor is integrated into the Ballerina VSCode plugin. You can get the Plugin from VSCode marketplace and the installation instructions can be found here. After installation, open a ballerina source file to activate the plugin.
You can use either of the following two options to launch the graphical editor.
- Search for Ballerina: Show Diagram command in the command palette
- Quick Launch with the Design Icon switcher
Design Control Flow Graphically
As I mentioned earlier, you can design your control flow graphically. First, you have to switch to the Edit mode of the editor and this can be done by clicking on the green edit icon on the top left corner of the design view.
Add Definitions
In the edit mode you can see there appears green color plus signs in each scope. At the top, you can find a button with the text “Definitions” which allows you to add main top-level constructs, which are Functions and Services. If you look at the source view after adding any construct, you can see the respective text source has also been added at the same time. This represents the text to visual syntax parity of Ballerina.
Add Control Flow Constructs
Within the Scopes of each of the added construct, you can see green icons which allow you to add control flow constructs such as shown below.
Add Workers and Endpoints
When defining your control flow with parallel execution, you add workers and for external endpoint interactions, you use the endpoint constructs. You can add endpoints and workers within the constructs such as resource definitions and function definitions as shown below.
Bellow screen capture shows how Ballerina graphical syntax shows Parallel execution and worker interactions as well as endpoint interactions.
Jump to Source from Design
From design view you can jump to the respective source segment as shown bellow.
Expanded Diagram View
You can expand the Diagram view to show not only the control flow but also to show more fine grain statements among the constructs.
As shown above you can use the available set of features in order to enhance the Ballerina Development experience with the rich graphical syntax supported by the Ballerina Graphical Editor.
You can report any issues and add feature requests with a Github Issue in here under the label Component/Composer.
