Setting Up an Environment for Diagram Creation
About Visual Studio Code (VS Code)
Visual Studio Code, or VS Code, is a free and open source editor maintained by Microsoft and primarily developed by Microsoft. It is clear that Microsoft has committed considerable resources to its development and maintenance with no indication that it plans to reduce that commitment any time soon. VS Code is widely used by developers and others around the world using a variety of programming languages and data formats.
Note that Visual Studio Code is different from Visual Studio. Visual Studio is Microsoft’s flagship integrated development environment (IDE). It is not open source. Microsoft offers a free community edition, but other editions are not free.
Download and Install VS Code
In your browser navigate to the Visual Studio Code Download page.
Download the appropriate version and install it.
Install PlantUML Extension
Launch VS Code.
In VS Code’s menu, click on
View | Extensions
.In the Extensions search box, type
PlantUML
.Click on the search result
PlantUML
byjebbs
.Click on the green
Install
button.Close the
Extension: PlantUML
tab by clicking on thex
.
Note that the PlantUML page shown in the right panel contains useful information about using the PlantUML extension for VS Code. You can always go back to it by repeating steps 1-4 above.
Open Folder in VS Code and Create File
Create a folder in your file system called
diagrams
. (You are welcome to call the folder something different, but this documentation will use “diagrams.”)In VS Code’s menu, click on
File | Add Folders to Workspace…
and then select the folder you created in the previous step.Create a new file with the filename
first_diagram.pu
by hovering overUNTITLED (WORKSPACE)
and clicking on the file icon.