【ITニュース解説】mermaid-isomorphic in mcp-mermaid codebase.

この記事は、開発者がテキストを使って簡単に図を作成できる「Mermaid」というツールと、それをさらに柔軟に使えるようにする「mermaid-isomorphic」というライブラリについて解説している。システムエンジニアを目指す上で、このような図形描画ツールは、システムの設計や構造を視覚的に表現する際に非常に役立つものだ。

まず、Mermaidとは、JavaScriptを基盤とした図形描画ツールである。これは、Markdownという、インターネット上でよく使われるシンプルなテキスト形式に似た書き方で図の定義を記述すると、そのテキストから自動的にフローチャート、シーケンス図、ガントチャートなどの図を生成してくれる。例えば、「AからBへ矢印を引く」という指示をテキストで書けば、実際にAとBの間に矢印が描かれた図ができあがる。この特徴は、プログラミングコードと一緒に図の定義をバージョン管理したり、コードレビューのように図の変更点を確認したりするのに非常に便利だ。手書きや専用の描画ツールを使うよりも効率的で、テキストなので修正も容易なため、多くの開発現場で利用されている。

次に、この記事の主要なテーマである「mermaid-isomorphic」について見ていこう。通常のMermaidは、主にウェブブラウザ上でJavaScriptを使って図をレンダリングする。つまり、ウェブページを開いたときにブラウザがテキストから図を描画する形だ。しかし、システム開発の現場では、ブラウザだけでなく、サーバーサイドの環境（Node.jsなど）で図を生成したい場面も出てくる。例えば、ドキュメントを自動生成する際に図を組み込んだり、CI/CD（継続的インテグレーション／継続的デリバリー）パイプラインの中で図の画像を生成して成果物として保存したり、サーバーサイドレンダリング（SSR）を行うウェブアプリケーションで図を事前に準備したりといったケースが考えられる。

ここで「isomorphic（アイソモーフィック）」という言葉が登場する。これは「同形」や「同質」といった意味合いを持つが、プログラミングの世界では「同じコードがブラウザ環境とサーバー（Node.js）環境の両方で動作する」という意味で使われることが多い。mermaid-isomorphicはまさにこの特性を持っており、Mermaidの図のレンダリングをブラウザでもNode.jsでも実行できるようにする。これにより、開発者は環境に依存せず、Mermaidの描画機能を柔軟に利用できるようになる。ブラウザでの直接的な描画には通常のmermaidパッケージを、Node.jsを含むより幅広い環境での利用にはmermaid-isomorphicを使うのが適切だと記事は説明している。

mermaid-isomorphicの導入は非常に簡単である。Node.jsのパッケージマネージャーであるnpmを使って、npm install mermaid-isomorphicというコマンドを実行するだけでプロジェクトに追加できる。

具体的な使用方法としては、まずmermaid-isomorphicからcreateMermaidRendererという関数をインポートする。この関数を実行すると、Mermaidの図をレンダリングするための特別なオブジェクト（レンダラー）が生成される。次に、描画したいMermaidの図の定義をバッククォート（`）で囲んだ文字列として用意する。この文字列が、Mermaidが解釈して図にする元のテキストとなる。例えば、graph TD; A-->B;という文字列は、「上から下へのグラフで、AからBへ矢印を引く」という意味の図を定義している。そして、このレンダラーオブジェクトのメソッドを呼び出し、図の定義文字列を渡すことで、実際に図のレンダリングが実行される。レンダリングは非同期で行われるため、結果を受け取るにはawaitキーワードを使って処理の完了を待つ必要がある。レンダリングが完了すると、図の画像データやSVG（Scalable Vector Graphics）データといった形式で結果が返される。

記事の後半では、「mcp-mermaid」というプロジェクトでのmermaid-isomorphicの具体的な利用例が示されている。このプロジェクトでは、src/utils/render.tsというファイルの中でmermaid-isomorphicがインポートされ、createMermaidRenderer関数が利用されている。

特に注目すべきはrenderMermaidという非同期関数である。この関数は、Mermaidの図の定義文字列だけでなく、図の見た目を決める「テーマ」（デフォルトやダークなど）や「背景色」といったオプションも引数として受け取る。関数内部では、まずレンダラーがまだ作成されていなければcreateMermaidRendererを呼び出して初期化する。次に、指定された背景色を適用するために、一時的にCSS（カスケーディングスタイルシート）ファイルを作成し、そのファイルパスをレンダリングオプションとして渡している。CSSはウェブページの見た目を定義する言語であり、ここでは生成されるSVG図の背景色を設定するために使われている。レンダリング処理では、図の画像（スクリーンショット）が必要であることや、先ほど作成したCSSファイルのパス、そしてMermaid自体の設定（テーマなど）も渡される。レンダリングの結果はPromiseSettledResultという形で返される。これは、複数の非同期処理が一括で実行された際に、それぞれが成功したか失敗したか、そしてその結果が何であったかを詳細に通知するための仕組みである。renderMermaid関数では、この結果をチェックし、成功した場合はその値を返し、失敗した場合はエラーを返すという丁寧な処理を行っている。

このように、mermaid-isomorphicはMermaidの強力な図形描画機能を、ブラウザとNode.jsの両方の環境で一貫して利用できるようにする重要なライブラリである。システムエンジニアにとって、テキストから図を自動生成する能力は、ドキュメンテーションの自動化、設計の一貫性の維持、開発プロセスの効率化において非常に価値がある。そして、mermaid-isomorphicはその能力をさらに広げ、サーバーサイドの処理やビルドプロセスにも組み込めるようにすることで、より柔軟な開発ワークフローを可能にしていると言える。