Mermaid.js Zoom & Pan

D3.js を使って移動とズームをできるようにするサンプル

by zu_min_com

HTML

<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
<div class="mermaid" style="max-height: 350px;">
sequenceDiagram
    participant ユーザー
    participant アプリ
    participant 認証システム
    ユーザー->>アプリ: ログイン試行
    アプリ->>認証システム: 認証依頼
    認証システム->>ユーザー: ログイン要求
    ユーザー->>認証システム: ID、パスワード
    認証システム->>ユーザー: 認証結果表示
    ユーザー->>アプリ: 認証結果提供
    アプリ->>認証システム: 認証結果検証
    認証システム->>アプリ: 検証結果
</div>

CSS

.mermaid {
  overflow: hidden;
}

JavaScript

window.addEventListener('load', function () {
  var svgs = d3.selectAll(".mermaid svg");
  svgs.each(function() {
    var svg = d3.select(this);
    svg.html("<g>" + svg.html() + "</g>");
    var inner = svg.select("g");
    var zoom = d3.zoom().on("zoom", function(event) {
      inner.attr("transform", event.transform);
    });
    svg.call(zoom);
  });
});