はてなブログのエントリにPlantUMLを埋め込む方法

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にデプロイしてあるサービス自体は無保証、というかただのサンプルサービスなので、ずっと動いているという保証はありませんし、サーバーを増強する予定もありません。