この記事は公開から2年以上経過しています。
今回は、SEやPGであれば一度はお世話になっているであろう、みんな大好きPlantUML拡張を、ソフトウェア設計時のデータ構造設計に利用する方法を紹介します。
PlantUMLといえば、言わずと知れたクラス図、アクティビティ図、シーケンス図などのUMLダイアグラムをマークアップで書ける、仕様書作成には必須ともいえるマルチプラットフォームの便利ツールですが、UMLダイアグラム以外にも、UIのモックアップなど色々なダイアグラムを書くことができます。
導入
上記マーケットプレースリンクを開き、Installを押下して、拡張のインストールを行います。
VSCodeで直接リンクが開ける環境ではクリックするだけでインストールできますが、vsixファイルをダウンロードしてからインストールすることも可能です。
使い方
使い方は簡単で、拡張インストール後にドキュメントの言語モードをPlant UMLに設定して、エディタ上にPlantUMLのマークアップを記述するだけです。
エディタ上で右クリックメニューを表示してPreview current diagramを選択すると、エディタが左右分割されて右側部分に現在編集しているマークアップのダイアグラムのプレビューが、リアルタイムで表示されます。
プレビュー下部に表示されるツールバーを使い、プレビューの拡大縮小を行なったり、ダイアグラムを画像としてクリップボードにコピーすることができます。
それでは早速ですが、今回おすすめしたい、データ設計で便利なPlantUML機能について、2つ紹介します。
1つ目は、Jsonデータ表示です。
以下のように、@startjson ~ @endjsonで囲まれた範囲にJsonデータを記述すると、
@startjson
{
"person":[
{
"name": "Foo",
"age": 20,
"preferred language": [
"Japanese",
"English"
]
},
{
"name": "Bar",
"age": 30,
"preferred language": [
"Japanese"
]
}
]
}
@endjson下図のように、現在のJsonデータ構造をグラフとして表示することができます。
本来の使い方としては、WebAPIなどの既存データを解析する用途が多いかと思いますが、ゼロからデータ構造を組み上げる場合も、データ構造を視覚化しながら検討するとイメージが掴みやすく、第三者に説明する場合にも理解して貰いやすくなります。
そして、2つ目が、マインドマップです。
以下のように@startmindmap ~ @endmindmapで囲まれた範囲にマークダウンのリスト形式データを記述すると、
@startmindmap
<style>
mindmapDiagram {
.directory {
BackgroundColor LightSkyBlue
}
.file {
BackgroundColor WhiteSmoke
}
}
</style>
* parent <<directory>>
* child1 <<directory>>
* grandchild1 <<file>>
* child2 <<directory>>
* grandchild2 <<file>>
* grandchild3 <<file>>
@endmindmap下図のように、リスト階層をマインドマップ化して表示することができます。
マインドマップと聞くと、ロジカルシンキングや要求分析のような情報をブレイクダウンする用途として利用するイメージが強いかもしれませんが、ファイルシステム構造のような階層型データを罫線を駆使して階層を表現することもなく視覚化することができます。
以上です。