Plant UML

Software designers sometimes need to present UML sequence diagrams like this one.

PlantUML Syntax:</p>
<p>@startuml<br />
skinparam monochrome true<br />
autonumber<br />
hide footbox<br />
actor User<br />
participant Browser<br />
participant Website<br />
database Database<br />
User->Browser: Select bookmark<br />
Browser->Website: Request page<br />
Website–>Database: Look up information<br />
Database–>Website: Return information<br />
Website->Browser: Return page<br />
Browser->Website: Request assets<br />
note over Browser, Website: Images, CSS, Javascript<br />
Website->Browser: Return assets<br />
Browser->Browser: Render page<br />
Browser->User: Read page<br />
User->User: Think<br />
@enduml</p>
<p>

This kind of thing is absurdly fiddly to draw with most graphics packages. But there’s a language called PlantUML that allows us to write them as text and render them in various software tools, including WordPress with the plugin called PlantUML Renderer.

The text for this example is this:

@startuml
skinparam monochrome true
autonumber
hide footbox
actor User
participant Browser
participant Website
database Database
User->Browser: Select bookmark
Browser->Website: Request page
Website-->Database: Look up information
Database-->Website: Return information
Website->Browser: Return page
Browser->Website: Request assets
note over Browser, Website: Images, CSS, Javascript
Website->Browser: Return assets
Browser->Browser: Render page
Browser->User: Read page
User->User: Think
@enduml

Leave a Comment