Plantuml Live Preview

Creating graphs and flow charts or sequence diagrams can go a long way, but making them can be a pain. Instance feedback allows us to lower the resistance of making more diagrams. I offten visit plantuml.com for suggestions and put up with the ads surrounding the examples.

But instead, I have decided to make my own library of examples and along the way share with you the setup I use with VSCode for makiing a live preview which makes for editing graphs much easier.

Install extension

To enable VSCode to do a live preview of your PlantUML graph I have been using the extension Markdown Preview Enhanced.

Once installed, you can open a Markdown file, and fill with code like the example below, the run use the command pallet Markdown: Markdown Preview Enhanced: Open preview to the side and you will have a new tab showing your finished work.

@startuml
start

if (Plantuml installed?) then (yes)
  :process all\ndiagrams;
else (no)
  :process only
  __sequence__ and __activity__ diagrams;
endif

stop
@enduml