Sep 22

Create Diagrams Inside PhpStorm with PlantUML

Thu, 09/22/2016 - 20:35 — peter

Diagramming in PhpStorm (or any other JetBrains IDE)

A picture is worth a thousand words, and a well-constructed diagram is worth many pictures! And if it is super-simple to create these useful diagrams, why not, right? This quick post will guide you (and future me) on the steps necessary to get PlantUML - a diagramming library - setup in JetBrains PhpStorm.

@startuml
(*) --> "check input"
If "input is verbose" then
--> [Yes] "turn on verbosity"
--> "run command"
else
--> "run command"
Endif
-->(*)
@enduml

1 - IDE Setup

This guide follows PhpStorm 2016.2.1, but it should hold pretty similar across different versions of PhpStorm. Assuming you already have PhpStorm or your favorite JetBrains IDE installed, head to the settings page, then to plugins and click on "browse repositories", then type plantuml in the search box, click install and restart PhpStorm when prompted. This will get PhpStorm prepared to understand uml files, but we are not quite done yet...

2 - GraphViz

In order for PhpStorm to render your diagrams, it needs GraphViz available in the system. This can be accomplished in several ways. If you have homebrew, mac ports, or another package manager in your system, then most likely there is a pre-packaged version of GraphViz already available for you. If you are on Windows or if you don't want to use a package manager, you can visit GraphiViz' Download Page to grab a copy of the binaries. You know the drill: choose your preferred method and install GraphViz on your workstation!

3 - Get your IDE to know about GraphViz

Once GraphViz is installed and PhpStorm is restarted, head back to the settings screen, and, under Other Settings => PlantUML you will find a box for you to type the path to the GraphViz dot executable. Again, that will vary depending on how you got GraphViz into your system. It could be on /usr/local/bin/dot or on /opt/local/bin/dot, or, if you are on Windows, on C:\Program Files (x86)\Graphviz2.xx\bin\dot.exe.

Confirm the binary location and get out of the settings screen. You are done!

Wait, now what?!

Now you are ready to create a series of diagram types to help you develop better code! Head over to the PlantUML site for a few examples.