dotfiles/website/content/notes/plantuml.md

+++ title = "PlantUML" author = ["Christopher James Hayward"] lastmod = 2021-02-04T14:39:22-05:00 draft = false +++

As described by the webiste¹:

PlantUML is a component that allows you to quickly write UML and other data diagrams, using a simple and intuitive language.

Display JSON data

You can use the JSON format with PlantUML to visualize your data, to activate the feature the diagram must use the @startjson and @endjson tags, respectively².

@startjson
"Hello world!"
@endjson

{{< figure src="/ox-hugo/plantuml-display-json-data.png" >}}

Simple example

Here's an example of a user object, with an accompanying address and list of phone numbers:

@startjson
{
  "name": "Bob",
  "email": "bob@bob.com",
  "phone": [
    { "type": "work", "number": "555-1234" },
    { "type": "mobile", "number": "555-4321" }
  ],
  "address": {

  }
}
@endjson

{{< figure src="/ox-hugo/plantuml-display-json-data-simple-example.png" >}}

Complex example

Here is the example of a complex data structure², which comes from the Wikipedia page for JSON³:

@startjson
{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 27,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    }
  ],
  "children": [],
  "spouse": null
}
@endjson

{{< figure src="/ox-hugo/plantuml-display-json-data-complex-example.png" >}}

Display YAML data

Much like JSON, PlantUML can visualize YAML data using the @startyaml, and @endyaml keywords⁴:

@startyaml
fruit: Apple
size: Large
@endyaml

{{< figure src="/ox-hugo/plantuml-display-yaml-data.png" >}}

Docker example

Here's an example docker compose file running with a simple application structure⁵:

@startyaml
version: "3.9"

services:
  db:
    image: postgres
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
  web:
    build: .
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db
@endyaml

{{< figure src="/ox-hugo/plantuml-display-yaml-data-docker-example.png" >}}

Sequence Diagram

Here's the complete example⁶ showing many participants.

@startuml
/'
 ' Define the participant(s).
 '/
participant participant as 1
actor actor as 2
boundary boundary as 3
control control as 4
entity entity as 5
database database as 6
collections collections as 7
queue queue as 8
/'
 ' Draw a line to each participant(s).
 '/
1 -> 2 : To actor
1 -> 3 : To boundary
1 -> 4 : To control
1 -> 5 : To entity
1 -> 6 : To database
1 -> 7 : To collection
1 -> 8 : To queue
@enduml

{{< figure src="/ox-hugo/plantuml-sequence-diagram.png" >}}

Here's a list of all the available keywords:

• actor
• boundary
• control
• entity
• database
• collections
• queue

Resources

---

1. PlantUML Website https://plantuml.com ↩︎

2. PlantUML JSON Data https://plantuml.com/json ↩︎

3. Wikipedia entry for JSON https://en.wikipedia.org/wiki/JSON ↩︎

4. PlantUML YAML Data https://plantuml.com/yaml ↩︎

5. Docker compose documentation https://docs.docker.com/compose/django/ ↩︎

6. PlantUML Sequence Diagrams https://plantuml.com/sequence-diagram ↩︎