PlantUML、便利ですよね。はてなブログでも使いたいですよね。ということでやってみました。
まずエントリの最後にこのスニペットを置きます:
<script> var a = Array.from(document.querySelectorAll("pre.code")); a.forEach(function (pre) { if (pre.attributes['data-lang'].value) return; var xhr = new XMLHttpRequest(); xhr.open("POST", "https://plantuml-service.herokuapp.com/svg"); xhr.onload = function () { if (xhr.status === 200 && pre instanceof HTMLPreElement) { pre.parentNode.replaceChild(xhr.responseXML.documentElement, pre); } } xhr.send("@startuml\n" + pre.innerText + "\n@enduml"); }); </script>
tagomorisさんのコメントをうけて追記: plantuml-service.herokuapp.com というのはビットジャーニー社が用意しているPlantUML描画用のendpointです*1。
そうしたらこんな感じでPlantUML snippetを書きます（これはKibela Flavored Markdown 互換の記法です）。
```{plantuml}
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
```
すると出力はこんな感じになります。
Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response Alice -> Bob: Another authentication Request Alice <-- Bob: another authentication Response
本家PlantUML serverとちがって文字数に制限がないので安定して使えます。ただし、実際にはちょっとはてなブログの仕様上の制約があって {plantuml} というラベルを取れません。なので、 はてなブログのsyntax highlighterにとって有効な言語を指定していない code blocksをすべてPlantUMLとして処理してしまいます。まあ、そんなに大きな問題ではないでしょう。
*1:ソースはこちら: https://github.com/bitjourney/plantuml-service なお、このherokuにデプロイしてあるサービス自体は無保証、というかただのサンプルサービスなので、ずっと動いているという保証はありませんし、サーバーを増強する予定もありません。
