DEV Community

Rodel Talampas
Rodel Talampas

Posted on • Edited on

59

Enabling PlantUML in Visual Studio Code

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:

Image description

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


Enter fullscreen mode Exit fullscreen mode

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

Image description

Please leave your appreciation by commenting on this post!

It takes one minute and is worth it for your career.

Get started

Top comments (1)

Collapse
 
carloswm85 profile image
Carlos

Amazing. Thanks for the little tutorial.

I'd suggest anyone in Windows system to install graphviz by using the chocolaey command:
choco install graphviz

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay