Mermaid.js

source/_posts/2025/20250905a_Mermaid図の調整ツールで図をさらに見やすく！〜現場の課題を解決する自作ツール〜.md

@@ -0,0 +1,114 @@
+---
+title: "Mermaid図の調整ツールで図をさらに見やすく！〜現場の課題を解決する自作ツール〜"
+date: 2025/09/05 00:00:00
+postid: a
+tag:
+  - Mermaid.js
+  - OSS
+  - 便利ツール
+  - チーム開発
+category:
+  - Frontend
+thumbnail: /images/2025/20250905a/thumbnail.png
+author: 荒木昂平
+lede: "チーム開発でMermaid図を頻繁に利用している中で、「もっとこうなったら良いのに！」という現場の声を形にした自作ツールをご紹介します。特に、フローチャートやクラス図の矢印の長さ（ノード間の間隔）や垂直方向の間隔といった細かい調整に悩んでいる方には、きっと役立つはずです。"
+---
+
+こんにちは、[starswirl_k](https://github.com/starswirl)です。
+
+今回は、チーム開発でMermaid図を頻繁に利用している中で、「もっとこうなったら良いのに！」という現場の声を形にした自作ツールをご紹介します。
+
+特に、フローチャートやクラス図の**矢印の長さ（ノード間の間隔）や垂直方向の間隔**といった細かい調整に悩んでいる方には、きっと役立つはずです。
+
+<a href="https://starswirl.github.io/web-dev-utils/MermaidViewer.html">
+<img src="/images/2025/20250905a/作成したツール.png" alt="作成したツール" width="1010" height="835" loading="lazy">
+</a>
+
+ツールはこちら：[GitHub Pages/MermaidViewer.html](https://starswirl.github.io/web-dev-utils/MermaidViewer.html)
+
+# なぜこのツールを作ったのか？
+
+Mermaidは手軽に図を作成できる非常に便利なツールですが、デフォルトの設定では図の要素間の間隔が固定されているため、複雑な図になると**矢印が短く見づらかったり**、全体のレイアウトが窮屈に感じられることがありました。
+
+特に、以下のような課題がありました。
+
+* **矢印が短い**: 図の要素が増えると、関係を示す矢印が短くなり、どこからどこへ繋がっているのか視認性が悪くなる。
+* **レイアウト調整の難しさ**: ノードが増えると、図全体が小さくまとまりすぎてしまい、情報量が多くなると見づらい。
+
+<img src="/images/2025/20250905a/窮屈な図の例.png" alt="窮屈な図の例" width="1200" height="934" loading="lazy">
+
+これらの課題を解決し、より見やすいMermaid図を効率的に作成するために、この調整ツールを開発しました。
+
+# ツールの概要とできること
+
+このツールは、ブラウザ上で動作するHTMLファイルとして提供されており、ダウンロードしてクリックするだけで簡単に利用できます。ツールは [GitHub](https://github.com/starswirl/web-dev-utils/blob/main/MermaidViewer.html) で公開しています。
+
+主な機能は以下の通りです。
+
+1. **Mermaidコードのプレビュー**: 入力したMermaidコードがリアルタイムでレンダリングされ、すぐに図の見た目を確認できます。
+2. **ノード間隔（水平方向）の調整**: スライダーを動かすだけで、ノード間の水平方向の間隔を自由に調整できます（`flowchart.nodeSpacing`, `class.nodeSpacing`）。これにより、矢印の長さを適切に保ち、図全体の視認性を向上させることができます。
+
+<img src="/images/2025/20250905a/nodeSpacing.gif" alt="nodeSpacing.gif" width="1000" height="474" loading="lazy">
+
+3. **ランク間隔（垂直方向）の調整**: 同様に、スライダーで垂直方向の間隔も調整可能です（`flowchart.rankSpacing`, `class.rankSpacing`）。これにより、図の上下方向の広がりを調整し、よりゆとりのあるレイアウトを実現できます。
+4. **テーマの切り替え**: Mermaid標準で用意されているテーマ（`default`, `forest`, `dark`, `neutral`, `base`, `base-dark`）を簡単に切り替えることができます。これにより、図の雰囲気を変更し、ドキュメントの雰囲気に合わせたり、視認性を高めたりすることが可能です。
+
+<img src="/images/2025/20250905a/default.gif" alt="default.gif" width="1000" height="474" loading="lazy">
+
+5. **PDFダウンロード**: 作成したMermaid図をPDFとして出力できます。ドキュメントに添付したり、共有する際に便利です。
+
+# ツールの使い方
+
+1. **ツールにアクセス**:  [GitHub Pages](https://starswirl.github.io/web-dev-utils/MermaidViewer.html)にアクセスします。
+2. **Mermaidコードを入力**: 画面左側のテキストエリアにMermaidコードを入力します。入力と同時に右側のプレビューエリアに図が表示されます。
+3. **間隔を調整**: 「水平方向の間隔 (nodeSpacing)」と「垂直方向の間隔 (rankSpacing)」のスライダーを動かして、お好みのレイアウトに調整します。
+4. **テーマを変更**: 「テーマを選択」ドロップダウンから、好きなテーマを選んで図の見た目を変更します。
+5. **PDFをダウンロード**: 「PDFとしてダウンロード」ボタンをクリックすると、表示されているMermaid図がPDFファイルとして保存されます。
+
+# 開発のこだわりポイント
+
+## リアルタイムプレビューとスムーズな操作感
+
+スライダーによる間隔調整は、レンダリングの遅延を最小限に抑え、**リアルタイムに近い感覚でプレビュー**が更新されるように工夫しました。この実現のために、Mermaidコードの入力やスライダー操作時には`setTimeout`を活用しています。これにより、短い間隔での連続的な入力や操作があった場合でも、不要な再レンダリングを抑制し、パフォーマンスを維持しています。
+
+このように、ユーザーの操作に応じて適切なタイミングで再レンダリングを行うことで、スムーズな体験を提供しています。
+
+```js
+// Mermaidコード入力時のイベントリスナー
+inputElement.addEventListener('input', () => {
+    saveStateToSessionStorage();
+    clearTimeout(renderTimer); // 前のタイマーをクリア
+    renderTimer = setTimeout(renderMermaid, 500); // 500msの遅延後にレンダリング
+});
+
+// スライダー操作時のイベントリスナー（例: nodeSpacing）
+nodeSpacingSlider.addEventListener('input', () => {
+    saveStateToSessionStorage();
+    nodeSpacingValue.innerText = nodeSpacingSlider.value;
+    window.currentMermaidConfig.flowchart.nodeSpacing = parseInt(nodeSpacingSlider.value);
+    window.currentMermaidConfig.class.nodeSpacing = parseInt(nodeSpacingSlider.value);
+    window.mermaid.initialize(window.currentMermaidConfig);
+    clearTimeout(renderTimer);
+    renderTimer = setTimeout(renderMermaid, 200); // 200msの遅延後にレンダリング
+});
+```
+
+## 現場の声を反映した機能
+
+チームメンバーからの「矢印が短くて見づらい」という具体的なフィードバックから、`nodeSpacing`と`rankSpacing`の調整機能を優先的に実装しました。これにより、**現場で本当に求められていた課題**を解決できたと感じています。
+
+# 今後の展望
+
+このツールは、まだまだ発展途上です。今後、以下のような機能拡張も検討しています。
+
+* **カスタムテーマの保存機能**: 自分好みのテーマ設定を保存・ロードできるようにする
+* **SVG/PNGエクスポート**: PDFだけでなく、他の画像形式でのエクスポートオプションを追加
+* **より詳細なスタイル調整**: 特定の要素の色や線の太さなどをGUIで調整できるようにする
+
+もし、このツールを使ってみたい、あるいはこんな機能が欲しいという要望があれば、ぜひコメントやフィードバックをいただけると嬉しいです！
+
+# まとめ
+
+Mermaid図をより見やすくするために開発した、自作の調整ツールについてご紹介しました。シンプルなツールですが、日々のドキュメント作成の効率化と、より伝わりやすい図の作成に貢献できると信じています。
+
+ぜひ一度お試しいただき、ご自身のMermaid図作成に役立ててみてください！