Enabling PlantUML in Visual Studio Code

#tutorial #vscode #uml #productivity

PlantUML is a component that allows you to quickly write the following diagrams in plain and simple intuitive language - a.k.a. Diagram-As-Code.

Sequence diagram
Usecase diagram
Class diagram
Object diagram
Component diagram
Deployment diagram

There are many similar tools out there. PlantUML is free to use and was created using Java and GraphViz. A simple way of using it is to download the plantuml.jar and run it to open PlantUML's graphical user interface. There is no need to unpack or install anything.

Most developers use Visual Studio Code, why not install its plugin:

Browse the plugin and click install. After installing the plugin, there is a need to install GraphViz binary. You can follow the link to install it. For mac users, easy to run brew install graphviz.

When all done, create a test file test.puml and add the following code



@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, "Administrator")
System_Boundary(c1, "Sample System") {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml

Press Option + D in Mac or Alt-D for other OS's, should give the following output: