As a developer, it feels awesome when we can write safe and secure code. To bring clarity and debug code better every part of the source code can be represented in the form of visual diagrams like flowcharts, graphs, and UML Diagrams to bring clarity to a team of developers building great products and services.

To solve this problem we will use VS Code extensions available for UML flow diagram generation.

In this blog, we will be discussing about the Solidity Visual developer Plugin, with installation and application.

This extension contributes security-centric syntax and semantic highlighting, a detailed class outline, specialized views, advanced Solidity code insights, and augmentation to Visual Studio Code.

This extension provides many features like:

UML : this is one of the most useful visualizing techniques and it is helpful for documenting the code.

2. Call graphs: it gives a nice dynamic view of the functions in the system and which ones call which.

3. Inheritance graphs: it is used to give an easy-to-read summary of class inheritances using the inheritance graph.

Let’s start with the installation of the Solidity Visual developer :

Open Visual Studio Code and click on the extensions section.

Then search for Solidity Visual Developer and click on the install button.

3. Now we are ready to use this extension. For this I’ve used the following source code :

v3-core/UniswapV3Pool.sol at main · Uniswap/v3-core

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…

github.com

4. Now after this, open the command palette (Ctrl+shift+P) and type “Surya”. You will get the following window. Select the option: Solidity Visual Developer: Surya — call graph for active editor (graph this).

Surya extension in VS Code

5. After this, the graph will be plotted automatically and you will get the following window.

Plotted Graph

Inheritance graph

6. The following figure shows the description of a particular graph.

The white arrow line is the external call

The green arrow line is the internal call

The defined contract is in blue box

Undefined contracts are shown in square

For any further Queries or anything related to Blockchain Development ,Coding, Blogging, Tech Documentation you can DM me on Linkedin or instagram id=acanubhav94.

Special credits to my team members: Shreyas and Anshika