PlantUMLでJSONとYAMLのデータ構造を可視化してみた

Visual Studio CodeのPlantUML拡張機能で、JSONとYAMLのデータ構造を可視化する方法をご紹介します。JSONまたはYAMLのデータがあれば2行追加するだけで可視化できます。是非お試しください。
2022.03.09

はじめに

データアナリティクス事業本部の藤川です。
簡単なデータ構造のJSONであれば、Pretty表記にするだけで、頭の中で理解することができます。しかしながら、巨大なJSONからデータ構造をイメージするのは非常に困難です。YAMLも同様です。

PlantUMLをご存じでしょうか。UMLのダイアグラムをテキストベースで記述できるコンポーネントですが、UMLのダイアグラムを描けるだけではありませんでした。

ここでは、Visual Studio Code(以下、VSCode)のPlantUML拡張機能で、JSONとYAMLのデータ構造を可視化する方法をご紹介します。また、SVGファイルにダウンロードできるので、複雑で巨大なJSONであっても、自由に拡縮表示できて、非常に便利です。

JSONまたはYAMLのデータがあれば2行追加するだけで可視化できます。是非お試しください。

準備

次の2点を準備します。VSCodeを起動し、拡張機能PlantUMLをインストールするだけです。

  • Visual Studio Code(Web版は非対応)
  • PlantUML(VSCodeの拡張機能)

JSON(または、YAML)形式のデータを用意

ここでは、OpenWeatherMap APIで取得したJSONデータを可視化してみます。OpenWeatherMapにサインインし、APIキーを取得してください。また、{city name}には都市名を指定してください。

https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

次のURLの場合、以下のようなJSONデータが得られます。

https://api.openweathermap.org/data/2.5/weather?q=tokyo,jp&appid={API key}
{"coord":{"lon":139.6917,"lat":35.6895},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02n"}],"base":"stations","main":{"temp":276.51,"feels_like":273.62,"temp_min":271.77,"temp_max":279.57,"pressure":1019,"humidity":74},"visibility":10000,"wind":{"speed":3.09,"deg":20},"clouds":{"all":20},"dt":1644850930,"sys":{"type":2,"id":2038398,"country":"JP","sunrise":1644874135,"sunset":1644913327},"timezone":32400,"id":1850144,"name":"Tokyo","cod":200}

やり方

共通

  1. VSCodeでJSON(または、YAML)形式のファイルを開きます。
  2. JSON形式の場合は、前後に@startjson行と@endjson行を付け加えます。
    @startjson
    {
        ... JSON Data ...
    }
    @endjson
    @startjson
    {"coord":{"lon":139.6917,"lat":35.6895},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02n"}],"base":"stations","main":{"temp":276.51,"feels_like":273.62,"temp_min":271.77,"temp_max":279.57,"pressure":1019,"humidity":74},"visibility":10000,"wind":{"speed":3.09,"deg":20},"clouds":{"all":20},"dt":1644850930,"sys":{"type":2,"id":2038398,"country":"JP","sunrise":1644874135,"sunset":1644913327},"timezone":32400,"id":1850144,"name":"Tokyo","cod":200}
    @endjson
  3. 同様に、YAML形式の場合は、前後に@startyaml行と@endyaml行を付け加えます。
    @startyaml
    {
        ... YAML Data ...
    }
    @endyaml

プレビュー

  1. [Ctrl] + [Shift] + [P](macOSでは、[Command] + [Shift] + [P])を押下し、コマンドパレットを開きます。
  2. PlantUML: Preview Current Diagramsカーソル位置のダイアグラムをプレビュー)をクリックします。
  3. 右側のペインにJSONデータが可視化されます。

VSCode+PlantUML+JSON or YAML

画像ファイルにエクスポート

  1. [Ctrl] + [Shift] + [P](macOSでは、[Command] + [Shift] + [P])を押下し、コマンドパレットを開きます。
  2. PlantUML: Export Current File Diagramsファイル内のダイアグラムをエクスポート)をクリックします。
  3. svgを選択します。
  4. SVGファイルをダウンロードします。
  5. ダウンロードしたSVGファイルをブラウザにドロップし、表示します。

さいごに

UMLのダイアグラムをテキストベースで記述できるコンポーネントには、PlantUMLの他にMermaidなどがあります。MermaidMarkdownに書けるのですが、Notionでも使えることから、最近は、UMLをMermaidで記述する機会が増えています。

PlantUMLMermaidもそれぞれ一長一短があるので、しばらくは併用が続きそうです。

あわせて読みたい