【Asciidoc】ダイアグラム ー PlantUMLを使ってみる ＋ 文字化け回避 ー

今回は「PlantUML」を利用してみます。

まず、ダイアグラムブロックの書き方

[ダイアグラムの形式, target=出力ファイル名, format=出力ファイル形式]   
.... 
ダイアグラムを記述
....

と言う形になります（基本形）。
「PlantUML」の場合、

[plantuml,test,svg]
....
@startuml
:利用者: --> (Use)
"管理者" as Admin
"ユーザー用画面" as (Use)
Admin --> (管理者画面)
@enduml
....

これは「SVG」で出力する例です。ファイル名はベース名だけでOK。拡張子は自動的に付加されます。

[plantuml,test,png]
--
@startuml
:利用者: --> (Use)
"管理者" as Admin
"ユーザー用画面" as (Use)
Admin --> (管理者画面)
@enduml
--

これは「PNG」に変換する例です。
ブロック区切りは
　逐語形式(…​.)ピリオド×４
　リスト形式(----)ハイフン×４
　オープン形式（--）ハイフン×２
が利用できます。
作成されたイメージはイメージディレクトリ属性で指定されたディレクトリに
　「test.png(svg)」
で保存されます。

これを、HTML変換

asciidoctor -r asciidoctor-diagram digsamp.adoc

この構文で下図のように変換できます。

digsamp.html

実際作成して拡大すると「PNG」の方の輪郭が滲むのを確認できたりします。

asciidoctor-pdf -r asciidoctor-diagram digsamp.adoc

で「PDF」変換すると

digsamp.pdf

「SVG」の方は見事！文字化けしてしまいました。（想定通り。。）

[plantuml,test,svg]
....
@startuml
skinparam defaultFontName VL Gothic

:利用者: --> (Use)
"管理者" as Admin
"ユーザー用画面" as (Use)
Admin --> (管理者画面)

@enduml
....

「skinparam」を加えて再び実行してみます。

digsamp.pdf

今度は上手く行きました。
「どんなもんだい！」・・・少し得意げ・・・ゴシックを指定したつもりが？？？？この辺りは・・・自分のオペミスだなあ。。。VLゴシックが無いからフォールバック・フォントを読み込んでる。orz
「PNG」の方は少しぼやけますね、やはり、「SVG」の方が自分の好みです。
日本語表示には苦労させられますが・・・、他に、よく使われている解決法を「@_Shallot_」さんが

asciidoctor-pdfで日本語を含むSVG画像を扱う - Qiita

で紹介してくれています。パラウィン（海老）処理の途中、
　「Win1252」⇒「特定のフォント」
で逃げるというやり方は色んな人が試行錯誤していますので暇が有ったら探してみてください。「SVG」全般に通用します。
まあしかし、「PNG」処理の方が楽なのですよね。

自分は「PlantUML」内のパラメータでこの問題を回避する方向で・・・
　しかし、
　　「skinparam」
　を利用しての文字化け回避や装飾の解説を殆ど見ないのだけど・・・
（「PlantUML」の公式サイトに少し載ってるだけ。。）
絶滅危惧種 ？ 稀少テクニックなのでしょうか？
「skinparam」に付いては今後ゆっくりと。。。

さて、今回はこのあたりまで・・・・・・

次回は「plantuml」を外出しに・・・。
…ではまた。

当Noteは下記の「AsciiDoc Language Documentation」の文法に従っています。

AsciiDoc - AsciiDoc Language Documentation