Plantuml Live Preview

Make diagrams with code and live preview in VSCode

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 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.


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

Aaron Addleman
Aaron Addleman
Principal Automation Engineer

Fun with programming and infrastructure