PlantUMLでJSONを可視化する

シンプルなテキストファイルで UML が書ける、オープンソースのツール

そのままです。結構衝撃でした。

f:id:ironoir:20210223150358p:plain

概要

「以下のような、UML以外の図もサポートしてます。」という下に一覧があるんですが、これUMLで書ける種類よりも多いんですよね（UMLは9種類）。

JSON data
YAML data
Network diagram (nwdiag)
ワイヤーフレーム（Salt）
アーキテクチャ図
仕様及び記述言語 (SDL)
Ditaa(DIagrams Through Ascii Art)
ガントチャート
マインドマップ
WBS図(作業分解図)
AsciiMath や JLaTeXMath による、数学的記法
ER図

なんじゃそりゃ。UML以外も書けるなら名前を変えた方がいいんじゃないですかと思いつつ、便利そうなので見ていきます。

まず、上記12種類の中には正式版ではないものが存在するみたいです。

提案段階

アーキテクチャ図

ベータ版

マインドマップ
WBS図(作業分解図)

別途インストールが必要な図

また、JLateXMathに関しては別途jarファイルをインストールする必要があるようです（AsciiMathは必要なし）。

仕様及び記述言語 (SDL)ってなんだ

ちなみに、「仕様及び記述言語 (SDL)」に関してはリンク先がアクティビティ図と同じになっています。これで正しいのかな。と思ったら下の方にSDL図というのがありました。ちなみに恥ずかしながらSDL図というタームを初めて知ったので調べたんですが、以下のような説明を見つけました。

仕様記述言語 (SDL) フローチャート: システム定義、ブロック、プロセスの3つの基本的な構成要素から構成され、コンピューターのアルゴリズムのブレインストーミングに用いるもの。

わたしが「仕様記述言語」だと思っていたものとはかなり開きがあったので勉強になりました。

ワイヤーフレーム（Salt）ってなんだ

GUIの雛形のことですね。SaltというのはPlantUMLのサブプロジェクトのことらしいです。ただまあ、できあがりのイメージを見る限りでは、ちょっと自分は使わないかな…という感じですね。

f:id:ironoir:20210223145720p:plain

JSONとYAMLに関して

で、本題。これは個人的には使えそうかな、と感じています。なにより、JSONやYAMLをほぼそのまま書くだけなので、新しい記法を覚える必要がありません。個人的には、データ構造とかを説明する時にめちゃめちゃ使えそうな気がします。というか書きづらいんだよな、そのレベルの詳細な図って。。。

f:id:ironoir:20210223150520p:plain

元々のJSONはこれ。前後を@startjsonと@endjsonで囲むだけです。

@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

というわけでよろしければぜひ。