コピペで1分！ブラウザを大きなシーケンス図をいい感じに見える簡易ビューアにする方法

初めに

大きなシーケンス図を見る時、スクロールしてると上部のタスクが隠れて何のタスクの処理かわからなくなった経験ないですか？

僕は通信ログからPlantumlでシーケンス図に変換して解析したりするんですが、結構あります。

例えばこんなシーケンス図を見てると、何のタスクの処理を自分が見てるかわからなくなっちゃうので、ブラウザで簡易ビューア作ってみました。

実践

論より証拠ということで、こんな感じ。

単純に上部のタスク部だけ固定しました。

See the Pen
Untitled by hoge hoge (@hoge-hoge-the-bashful)
on CodePen.

技術解説

というほどでもないんですが、簡単に説明します。

行数も少ないので、html分かる人なら一瞬で分かる程度かもしれません。

同じ画像を2枚表示する

スクロール出来ない上部のタスク部分とスクロールしたいそれ以外の部分をCSSで設定して切り分けて同じ画像を2枚表示してます。

    <div class="unscrollable">
        <img src="http://tech-rays.com/wp-content/uploads/2025/02/sampleSequence.png">
    </div>

    <div class="scrollable">
        <img src="http://tech-rays.com/wp-content/uploads/2025/02/sampleSequence.png">
    </div>

ajaxで横スクロールに対応

タスク数が少ない場合は特になくても問題ないんですが、横にもサイズが大きいシーケンスのために横スクロールされたときに、上部のタスク表示部も追従して動くようになっています。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
...
    <script>
        (window).on("scroll", function(){("#unscrollable, img").css("left", -$(window).scrollLeft());
        });
    </script>

終わりに

数行のhtmlとcssだけで最低限使えるビューアになったんじゃないでしょうか。

html内に画像のパスを直接貼ってるので、画像の切り替えめんどくさい場合は、選択した画像を表示すると使い勝手がいいかもしれません。

僕はhtmlコーダーではないので、もっと良い書き方や汎用性の上げ方はあるかもしれないですが、とりあえず問題なく動いてるということで！