こんにちは、starswirl_kです。

今回は、チーム開発でMermaid図を頻繁に利用している中で、「もっとこうなったら良いのに！」という現場の声を形にした自作ツールをご紹介します。

特に、フローチャートやクラス図の矢印の長さ（ノード間の間隔）や垂直方向の間隔といった細かい調整に悩んでいる方には、きっと役立つはずです。

ツールはこちら：GitHub Pages/MermaidViewer.html

なぜこのツールを作ったのか？

Mermaidは手軽に図を作成できる非常に便利なツールですが、デフォルトの設定では図の要素間の間隔が固定されているため、複雑な図になると矢印が短く見づらかったり、全体のレイアウトが窮屈に感じられることがありました。

特に、以下のような課題がありました。

矢印が短い: 図の要素が増えると、関係を示す矢印が短くなり、どこからどこへ繋がっているのか視認性が悪くなる。
レイアウト調整の難しさ: ノードが増えると、図全体が小さくまとまりすぎてしまい、情報量が多くなると見づらい。

これらの課題を解決し、より見やすいMermaid図を効率的に作成するために、この調整ツールを開発しました。

ツールの概要とできること

このツールは、ブラウザ上で動作するHTMLファイルとして提供されており、ダウンロードしてクリックするだけで簡単に利用できます。ツールは GitHub で公開しています。

主な機能は以下の通りです。

Mermaidコードのプレビュー: 入力したMermaidコードがリアルタイムでレンダリングされ、すぐに図の見た目を確認できます。
ノード間隔（水平方向）の調整: スライダーを動かすだけで、ノード間の水平方向の間隔を自由に調整できます（flowchart.nodeSpacing, class.nodeSpacing）。これにより、矢印の長さを適切に保ち、図全体の視認性を向上させることができます。

ランク間隔（垂直方向）の調整: 同様に、スライダーで垂直方向の間隔も調整可能です（flowchart.rankSpacing, class.rankSpacing）。これにより、図の上下方向の広がりを調整し、よりゆとりのあるレイアウトを実現できます。
テーマの切り替え: Mermaid標準で用意されているテーマ（default, forest, dark, neutral, base, base-dark）を簡単に切り替えることができます。これにより、図の雰囲気を変更し、ドキュメントの雰囲気に合わせたり、視認性を高めたりすることが可能です。

PDFダウンロード: 作成したMermaid図をPDFとして出力できます。ドキュメントに添付したり、共有する際に便利です。

ツールの使い方

ツールにアクセス: GitHub Pagesにアクセスします。
Mermaidコードを入力: 画面左側のテキストエリアにMermaidコードを入力します。入力と同時に右側のプレビューエリアに図が表示されます。
間隔を調整: 「水平方向の間隔 (nodeSpacing)」と「垂直方向の間隔 (rankSpacing)」のスライダーを動かして、お好みのレイアウトに調整します。
テーマを変更: 「テーマを選択」ドロップダウンから、好きなテーマを選んで図の見た目を変更します。
PDFをダウンロード: 「PDFとしてダウンロード」ボタンをクリックすると、表示されているMermaid図がPDFファイルとして保存されます。

開発のこだわりポイント

リアルタイムプレビューとスムーズな操作感

スライダーによる間隔調整は、レンダリングの遅延を最小限に抑え、リアルタイムに近い感覚でプレビューが更新されるように工夫しました。この実現のために、Mermaidコードの入力やスライダー操作時にはsetTimeoutを活用しています。これにより、短い間隔での連続的な入力や操作があった場合でも、不要な再レンダリングを抑制し、パフォーマンスを維持しています。

このように、ユーザーの操作に応じて適切なタイミングで再レンダリングを行うことで、スムーズな体験を提供しています。

// 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図作成に役立ててみてください！

Mermaid図の調整ツールで図をさらに見やすく！〜現場の課題を解決する自作ツール〜