WordPressの記事に直接フローチャートを埋め込もう

はじめに

WordPressで技術系サイトを運用していると「記事にフローチャートを配置したい。でも画像を画像をアップロードするほどでもない」ということがよくあると思います。

かくいう私もそう思った人です。そんな時、SVG画像を記事に埋め込めばいいじゃないか…！と思い立ちました。

今回は、フローチャートの作成からSVG画像生成、記事への埋め込みを備忘録的に書いておこうと思います。

今回はPlantUMLを使用しますが、SVG画像が生成できればdraw.ioなどを使っても問題ありません。その場合は記事に埋め込むだけなのでPlantUMLの導入等は読み飛ばせます。

エンジニア備忘録ためインストール等の操作方法は省略しています。悪しからず…

VSCodeの拡張機能から「PlantUML」を検索してインストールします。基本的には導入が簡単なplantuml公式のサーバの利用で問題ないと思います。以下の設定に変更します。

Plantuml: Server=https://www.plantuml.com/plantuml
Plantuml: Render=PlantUMLServer

もし、機密情報などがある場合にはGraphVisなどを設定するかローカルでサーバを立てます。サーバ使うときはDocker使えると楽ちんです…

拡張子「.puml」のファイルを作成してPlantUMLの記法に従って記載していきます。VSCodeのプレビュー機能でリアルタイムに描画を確認することが可能です。

作成については以下の記事で触れていますので参考にしてみてください。

VSCodeのコマンドラインで以下のコマンドを実行します。

>PlantUML: Export Current Diagram

画像の保存形式が表示されるので「SVG」を選択することで保存ができます。画像は、ファイルと同じ場所に保存されます。

SVG画像をテキストエディタで開いて中身をコピーします。コピーした内容は、Wordpressの「カスタムHTML」ブロックにそのまま貼り付けます。完了です。

埋め込み例を以下に提示します。

@startuml
start
:卵売り場へ行く;
if (卵はあるか？) then (はい)
  - 牛乳を6本買う
else (いいえ)
  - 牛乳を1本買う
endif
stop
@enduml