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

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

藤川

2022.03.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

データアナリティクス事業本部の藤川です。
簡単なデータ構造の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などがあります。MermaidもMarkdownに書けるのですが、Notionでも使えることから、最近は、UMLをMermaidで記述する機会が増えています。

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

あわせて読みたい

AWS