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

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

#PlantUML

#JSON

#YAML

#可視化

#VSCode（Visual Studio Code）

藤川

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}

やり方

共通

VSCodeでJSON（または、YAML）形式のファイルを開きます。

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