はじめに
筆者の過去記事において，JSON 形式のデータを図示しました。
当該記事の JSON 形式データをそのまま引用します。図番号（図３）もそのままです。
当初，図のタイトルを表示することができなかったものの，試行錯誤しているうちにタイトルを表示させる方法を発見しました。本記事は下記公式サイトで示されている案の別解（代案）となるものです。
なお，上記のフォーラムにおいて，JSON 形式図においてもタイトル表示をサポートする変更案（プルリクエスト）が提案されているようですが，少なくとも本記事を書いている2025年7月時点においては Qiita では未採用のようです。
順を追って説明する
それでは順を追って説明しましょう。なお，変更箇所が目立つように diff 形式で示します。自分でもコードを試してみたい場合，行頭がプラス記号 + から始まる場合はプラス記号 + のみを削除，マイナス記号 - から始まる場合は行全体を削除して使って下さい。
１）シンプルな JSON の例
まずはシンプルな JSON 形式の図を示します。@startjson ～ @endjson の間に JSON データをそのまま貼り付ければ良いので簡単ですね。
```plantuml
@startjson
{
"sampleData": []
}
@endjson
```
２）ハイライトをつける
強調させたい要素をハイライト表示したい場合があります。この場合は JSON データを定義する {...} の前に #highlight ステートメントを挿入します。
```plantuml
@startjson
+#highlight sampleData
{
"sampleData": []
}
@endjson
```
３）スタイルを変更
スタイルを変更したい場合があります。この場合も JSON データを定義する {...} の前にスタイルシートのブロック <style> ～ </style> を挿入します。
```plantuml
@startjson
+<style>
+root {
+ margin 0
+ padding 0
+}
+jsonDiagram {
+ roundCorner 0
+ fontStyle normal
+}
+</style>
#highlight sampleData
{
"sampleData": []
}
@endjson
```
４）タイトルを追加
ここからが本題です。
JSON 形式の図にタイトルを付けたいのですが，実は JSON 形式 @startjson ～ @endjson では図のタイトルを定義できません。title ステートメントもしくは title ～ end title ブロックを適当なところに挿入すれば実現できそうに見えますが，これらの指定は無効となります。タイトルを表示させるためにはベースを UML 形式 @startuml ～ @enduml に変更して，その中に JSON 形式のデータをインライン形式 {{json ～ }} で埋め込む必要があります。JSON 形式のデータを埋め込む場所は title ～ end title ブロックの中としました。タイトル文字列は caption ステートメントに記述します。タイトルを複数行にしたい場合は caption ～ end caption ブロックの中に記入します。他に footer に書くこともできます。
なお，説明を簡単にするため，スタイルシートはいったん削除します。
```plantuml
-@startjson
+@startuml
+title
+{{json
#highlight sampleData
{
"sampleData": []
}
+}}
+end title
+caption 図のタイトル（下）
-@endjson
+@enduml
```
５）スタイルを変更
さらにスタイルを変更したい場合，ちょっと面倒なことになります。スタイルシートのブロックを追加すべき場所は二つあります。一つはベースの UML 形式，すなわち図の全体に関わるところ，もう一つはインラインで埋め込んだ JSON 形式のブロック内に関わるところです。
なお，JSON 形式図とタイトルの間に絶妙な幅のスペースが入っていますが，これは最小幅であり，これより狭くすることはできません。広くすることはできます。
```plantuml
@startuml
+<style>
+root {
+ margin 0
+ padding 0
+}
+caption {
+ fontSize 16
+}
+</style>
title
{{json
+<style>
+root {
+ margin 0
+ padding 0
+}
+jsonDiagram {
+ roundCorner 0
+ fontStyle normal
+}
+</style>
#highlight sampleData
{
"sampleData": []
}
}}
end title
caption 図のタイトル（下）
@enduml
```
６）タイトル位置を上側にするとき
タイトル位置を上側にするときは header ステートメントに記入します。デフォルトでは右寄せになってしまうので，中央揃えにするためには center header とします。タイトルを複数行にしたい場合は header ～ end header ブロックの中に挿入します。
```plantuml
@startuml
<style>
root {
margin 0
padding 0
}
+header {
+ fontColor black
+ fontSize 16
+}
</style>
title
{{json
<style>
root {
margin 0
padding 0
}
jsonDiagram {
roundCorner 0
fontStyle normal
}
</style>
#highlight sampleData
{
"sampleData": []
}
}}
end title
+center header 図のタイトル（上）
@enduml
```
７）別解
いっそのこと title ～ end title ブロック内に全部まとめて書いてしまう方法もあります。
```plantuml
@startuml
<style>
root {
margin 0
padding 0
}
+title {
+ fontStyle normal
+ fontSize 16
+}
</style>
title
+図のタイトル（上）
{{json
<style>
root {
margin 0
padding 0
}
jsonDiagram {
roundCorner 0
fontStyle normal
}
</style>
#highlight sampleData
{
"sampleData": []
}
}}
+図のタイトル（下）
end title
@enduml
```
備考
某検索大手の「AI による概要」がデタラメなの，どうにかなりませんかね？
✦ AI による概要
PlantUMLでJSONのタイトルを表示するには、titleキーワードとend titleキーワードで囲んで記述します。タイトルは複数行にわたる場合、\nで改行できます。