diff --git "a/source/_posts/2025/20250905a_Mermaid\345\233\263\343\201\256\350\252\277\346\225\264\343\203\204\343\203\274\343\203\253\343\201\247\345\233\263\343\202\222\343\201\225\343\202\211\343\201\253\350\246\213\343\202\204\343\201\231\343\201\217\357\274\201\343\200\234\347\217\276\345\240\264\343\201\256\350\252\262\351\241\214\343\202\222\350\247\243\346\261\272\343\201\231\343\202\213\350\207\252\344\275\234\343\203\204\343\203\274\343\203\253\343\200\234.md" "b/source/_posts/2025/20250905a_Mermaid\345\233\263\343\201\256\350\252\277\346\225\264\343\203\204\343\203\274\343\203\253\343\201\247\345\233\263\343\202\222\343\201\225\343\202\211\343\201\253\350\246\213\343\202\204\343\201\231\343\201\217\357\274\201\343\200\234\347\217\276\345\240\264\343\201\256\350\252\262\351\241\214\343\202\222\350\247\243\346\261\272\343\201\231\343\202\213\350\207\252\344\275\234\343\203\204\343\203\274\343\203\253\343\200\234.md" new file mode 100644 index 00000000000..a8f3ece39bc --- /dev/null +++ "b/source/_posts/2025/20250905a_Mermaid\345\233\263\343\201\256\350\252\277\346\225\264\343\203\204\343\203\274\343\203\253\343\201\247\345\233\263\343\202\222\343\201\225\343\202\211\343\201\253\350\246\213\343\202\204\343\201\231\343\201\217\357\274\201\343\200\234\347\217\276\345\240\264\343\201\256\350\252\262\351\241\214\343\202\222\350\247\243\346\261\272\343\201\231\343\202\213\350\207\252\344\275\234\343\203\204\343\203\274\343\203\253\343\200\234.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図を頻繁に利用している中で、「もっとこうなったら良いのに！」という現場の声を形にした自作ツールをご紹介します。 + +特に、フローチャートやクラス図の**矢印の長さ（ノード間の間隔）や垂直方向の間隔**といった細かい調整に悩んでいる方には、きっと役立つはずです。 + + +作成したツール + + +ツールはこちら：[GitHub Pages/MermaidViewer.html](https://starswirl.github.io/web-dev-utils/MermaidViewer.html) + +# なぜこのツールを作ったのか？ + +Mermaidは手軽に図を作成できる非常に便利なツールですが、デフォルトの設定では図の要素間の間隔が固定されているため、複雑な図になると**矢印が短く見づらかったり**、全体のレイアウトが窮屈に感じられることがありました。 + +特に、以下のような課題がありました。 + +* **矢印が短い**: 図の要素が増えると、関係を示す矢印が短くなり、どこからどこへ繋がっているのか視認性が悪くなる。 +* **レイアウト調整の難しさ**: ノードが増えると、図全体が小さくまとまりすぎてしまい、情報量が多くなると見づらい。 + +窮屈な図の例 + +これらの課題を解決し、より見やすいMermaid図を効率的に作成するために、この調整ツールを開発しました。 + +# ツールの概要とできること + +このツールは、ブラウザ上で動作するHTMLファイルとして提供されており、ダウンロードしてクリックするだけで簡単に利用できます。ツールは [GitHub](https://github.com/starswirl/web-dev-utils/blob/main/MermaidViewer.html) で公開しています。 + +主な機能は以下の通りです。 + +1. **Mermaidコードのプレビュー**: 入力したMermaidコードがリアルタイムでレンダリングされ、すぐに図の見た目を確認できます。 +2. **ノード間隔（水平方向）の調整**: スライダーを動かすだけで、ノード間の水平方向の間隔を自由に調整できます（`flowchart.nodeSpacing`, `class.nodeSpacing`）。これにより、矢印の長さを適切に保ち、図全体の視認性を向上させることができます。 + +nodeSpacing.gif + +3. **ランク間隔（垂直方向）の調整**: 同様に、スライダーで垂直方向の間隔も調整可能です（`flowchart.rankSpacing`, `class.rankSpacing`）。これにより、図の上下方向の広がりを調整し、よりゆとりのあるレイアウトを実現できます。 +4. **テーマの切り替え**: Mermaid標準で用意されているテーマ（`default`, `forest`, `dark`, `neutral`, `base`, `base-dark`）を簡単に切り替えることができます。これにより、図の雰囲気を変更し、ドキュメントの雰囲気に合わせたり、視認性を高めたりすることが可能です。 + +default.gif + +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図作成に役立ててみてください！ diff --git a/source/images/2025/20250905a/default.gif b/source/images/2025/20250905a/default.gif new file mode 100644 index 00000000000..fbb2371f38f Binary files /dev/null and b/source/images/2025/20250905a/default.gif differ diff --git a/source/images/2025/20250905a/nodeSpacing.gif b/source/images/2025/20250905a/nodeSpacing.gif new file mode 100644 index 00000000000..cb74053c847 Binary files /dev/null and b/source/images/2025/20250905a/nodeSpacing.gif differ diff --git a/source/images/2025/20250905a/thumbnail.png b/source/images/2025/20250905a/thumbnail.png new file mode 100644 index 00000000000..73f76901c68 Binary files /dev/null and b/source/images/2025/20250905a/thumbnail.png differ diff --git "a/source/images/2025/20250905a/\344\275\234\346\210\220\343\201\227\343\201\237\343\203\204\343\203\274\343\203\253.png" "b/source/images/2025/20250905a/\344\275\234\346\210\220\343\201\227\343\201\237\343\203\204\343\203\274\343\203\253.png" new file mode 100644 index 00000000000..69c757932d3 Binary files /dev/null and "b/source/images/2025/20250905a/\344\275\234\346\210\220\343\201\227\343\201\237\343\203\204\343\203\274\343\203\253.png" differ diff --git "a/source/images/2025/20250905a/\347\252\256\345\261\210\343\201\252\345\233\263\343\201\256\344\276\213.png" "b/source/images/2025/20250905a/\347\252\256\345\261\210\343\201\252\345\233\263\343\201\256\344\276\213.png" new file mode 100644 index 00000000000..9d54ba218ee Binary files /dev/null and "b/source/images/2025/20250905a/\347\252\256\345\261\210\343\201\252\345\233\263\343\201\256\344\276\213.png" differ