PlantUMLでJSONやYamlの構造を可視化する - TSUBOCK★LABO-ツボックラボ-

PlantUMLを使うとJSONやYamlを構造化して可視化できるという知見を得たので、試してみました。

事前準備

PlantUMLが使えること。VSCodeのPlantUML Extentionでもできます。私はJoplinで試してみました。

jsonを構造化してみる

ということで適当なjsonを引っ張って構造化してみました。

@startjson
{
    "year" : 2013,
    "title" : "Turn It Down, Or Else!",
    "info" : {
        "directors" : [
            "Alice Smith",
            "Bob Jones"
        ],
        "release_date" : "2013-01-18T00:00:00Z",
        "rating" : 6.2,
        "genres" : [
            "Comedy",
            "Drama"
        ],
        "image_url" : "http://ia.media-imdb.com/images/N/O9ERWAU7FS797AJ7LU8HN09AMUP908RLlo5JF90EWR7LJKQ7@@._V1_SX400_.jpg",
        "plot" : "A rock band plays their music at high volumes, annoying the neighbors.",
        "rank" : 11,
        "running_time_secs" : 5215,
        "actors" : [
            "David Matthewman",
            "Ann Thomas",
            "Jonathan G. Neff"
       ]
    }
}
@endjson

こんな感じでJSONデータが構造化されます。リスト型で複数値入るものやネストされるものも表現されています。

yamlを構造化してみる

お次はyaml形式、mysqlのdocker-compose.yamlを構造化してみました。

@startyaml
version: '2'
services:
  db:
    image: mysql
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
@endyaml