Backlog で PlantUML をプレビューする環境

今携わっているプロジェクトは、プロジェクト管理もコード管理も Backlog を利用しています。

Online Project Management Software for Developers | Backlog

当然ドキュメントも Backlog の Wiki に書くんですが、微妙にかゆいところに手が届かない。日常的には Scrapbox や Kibela を使ってるんですが、いい感じのリンク機能もなければ、素敵な描画機能も無いので、苦心しながら使っている状態です。

未だに backlog 記法の wiki が大半を占めていて、backlog 記法は近年アップデートも感じられないし、syntax highlight も微妙だし、、、辛い。

PlantUML をプレビューしたい

Backlog の公式から Backlog Power Ups が出ていて、そこに PlanUML のプレビュー機能もあります。

ただ、コードを見てもらうとわかりますが、PlanUML の画像生成は公式のサーバーに投げることで実現しています。

backlog-power-ups/plantuml.js at master · nulab/backlog-power-ups · GitHub

    const convertToImage = (elem) => {
        const $elem = $(elem);
        const text = $elem.text();
        const data = compress(text);
        const url = `https://www.plantuml.com/plantuml/png/${data}`;
        $elem.replaceWith($("<img>").attr("src", url));
    }

当然といえば当然ですが、内部の Wiki に書く情報なので、外部のサーバーにぶん投げるとなると、、、いろいろあります。