💨
MCPサーバーを使ってmermaidでジョジョの相関図を作る

2025/06/29に公開
 はじめにこの記事はMCPサーバーを使ってmermaidでジョジョの相関図を作る記事です。最近遅まきながらMCPサーバーの勉強をしています。前回はDockerDesktopMCPServerを使ってみました。次はMCPサーバーの実装をしようと思って調査を始めました。

 背景今までclineを使っていてmermaidの図の変更がうまくできないことがよくありました。LLMとしてはmermaid記法を理解したつもりでコードを作るのですが、LLMからは問題が起きた時の問題点がわからず、結果も確認できないので、問題発生時にはmmdcで問題点を調査してLLMに伝えたり、描画された図をキャプチャして渡したりするなどの手間が発生していました。
上記面倒事に対応するため、MCPサーバーからmermaidで作られた図を返せるようにしようと考えました、が、すでに実装されたものがありました！まだ世に出ていない事をやるのは難しいですね😅
で、今回は実装済みのmermaidのMCPサーバを使ってジョジョの相関図を作ってみます。cline + geminiでどの程度mermaidダイアグラムをいい感じでかけるようになるかを見てみたいと思います。

 環境MacBook Pro
14 インチ 2021
チップ：Apple M1 Pro
メモリ：32GB
macOS：15.5（24F74）
コーディングエージェント : Cline
LLM : gemini-2.5-flash

 ジョジョの相関図を作るまずベースとなる相関図を作ってもらいます。ある程度複雑であれば何でもいいのですが、clineに以下の依頼を出しました。
「ジョジョの奇妙な冒険」**第1部（ファントムブラッド）〜第3部（スターダストクルセイダース）**までをまとめた、複雑な相関図をmermaidで作成してください。
以下の回答を得られました。なかなかいいですね！特に矢印といっしょに関係性が記載されているのが素晴らしいです。
しかしところどころ間違いがありそうです。例えば「ストレイツォ」と「Will A ツェペリ」は師弟関係ではないです。「ジョナサン」は「ジョセフ」の祖父であることはわかっていますが「ジョセフ」を「承太郎」の父だと思っているようです。やはり、ハルシネーションは避けられませんね。まず事実関係を修正していきましょう。「ジョナサン」-「ジョセフ」の間の人と「ジョセフ」-「承太郎」の間の人の名前も追加してもらいましょう。
「ストレイツォ」と「Will A ツェペリ」は師弟関係ではなく同門の仲間です。「ジョセフ」は「承太郎」の父ではなく祖父です。「ジョセフ」-「承太郎」の間の親子関係と「ジョナサン」-「ジョセフ」の間の親子関係を追加してください。
だめでした。「ジョナサン」「ジョセフ」「承太郎」の間の人物を探して補完してほしかったのですが、「ジョナサン」-「ジョセフ」、「ジョセフ」-「承太郎」を親子としてつなげてしまったようです。今回はプロンプトがいまいちでした。再度プロンプトを変更して試してみます。

「ジョナサン」-「ジョセフ」間の親子関係を追加。

「ジョナサン」と「ジョセフ」の間にはもうひとりいます。その人は「ジョナサン」の子どもであり「ジョセフ」の父です。調べて追加してください。
「ジョセフ」-「承太郎」間の親子関係を追加。

「ジョナサン」と「ジョセフ」の間にはもうひとりいます。その人は「ジョナサン」の子どもであり「ジョセフ」の父です。調べて追加してください。

以下の回答とともに図が提示されました。
ユーザーから再度mermaid図の修正依頼がありました。 前回の修正で「ジョナサン」と「ジョセフ」の間に直接「子」の関係を追加しましたが、ユーザーのフィードバックによると、その間に別の人物（ジョナサンの子でありジョセフの父）が存在するとのことです。
この人物はジョージ・ジョースターII世です。 以下の点を修正します。
「ジョナサン」の子として「ジョージ・ジョースターII世」を追加し、「ジョージ・ジョースターII世」の子として「ジョセフ」を追加します。
「ジョセフ」と「承太郎」の間の親子関係は、ホリィ・ジョースターを介して表現されているため、このままで問題ないと考えます。
「ジョナサン」と「ジョセフ」の間は「ジョージ・ジョースター」だったんですね。そして。直系という意味では「空条貞夫」は不要で「ホリィ」さんで良かったですね。失礼しましたgeminiさん。
1部の情報がちょっと寂しいので追加します。
ベースとしてはこんなものでしょうか。しかしだいぶ矢印が入り乱れて見づらくなっています。

これをcline + geminiに修正してもらいます。ここからが本番です。

 ジョジョの相関図を整理する以下の依頼をしました。
ありがとうございます！だいぶ整理されてきました。しかし図が見づらいです。以下の要領で整理してください。
1部２部３部は上から下に向かって並べてください。
多数の矢印がある場合は、グループ化するなどで整理してください。
矢印の向きはできるだけ見やすくシンプルになるようにしてください。
以下の回答が返りました。ここでcline + geminiの回答が壊れ始めます。回答結果はmermaidの構文を守っていないために表示できません。
ユーザーからmermaid図の見やすさに関する改善要望がありました。 具体的には、以下の点を修正します。

部の配置: 1部、2部、3部を上から下へ垂直に配置する。

矢印の整理: 多数の矢印がある場合はグループ化を検討する。

矢印の向き: 矢印の向きを見やすくシンプルにする。
これらの要望を踏まえ、mermaid図を再構成します。特に、矢印の向きとグル>ープ化については、関係性を損なわずに簡潔に表現する方法を検討します。
改善案として、以下のようなmermaid記法を使用することを検討します。

TB (Top to Bottom) レイアウトを使用し、部の配置を垂直にする。

linkStyle を使用して、特定の関係性を持つ矢印のスタイルを統一する。
必要に応じて、subgraph 内でさらに subgraph を使用し、関係性をグループ化する。
これらの改善を反映したmermaid図を作成し、plan_mode_respondツー>ルで提示します。
承知いたしました。図が見づらいとのことですので、以下の点を修正します。
1部、2部、3部を上から下へ垂直に配置します。
多数の矢印がある場合は、グループ化するなどして整理します。
矢印の向きはできるだけ見やすくシンプルになるようにします。
これらの修正を反映したmermaid図を以下に示します。
graph TB subgraph 第1部 ファントムブラッド J1[ジョナサン・ジョースター] E[エリナ・ペンドルトン] Z[ウィル・A・ツェペリ] Str[ストレイツォ] S[ロバート・E・O・スピードワゴン] DIO[DIO(1部)] Da[ダリオ・ブランドー] Wc[ワンチェン] T[タルカス] B[ブラフォード] Po[ポコ] end subgraph 第2部 戦闘潮流 J2[ジョセフ・ジョースター] G2[ジョージ・ジョースターII世] C[シーザー・アントニオ・ツェペリ] L[リサリサ] St[ルドル・フォン・シュトロハイム] K[カーズ] Esi[エシディシ] W[ワムウ] Sa[サンタナ] end subgraph 第3部 スターダストクルセイダース J3[空条承太郎] H[ホリィ・ジョースター] A[モハメド・アヴドゥル] Kyo[花京院典明] P[ジャン＝ピエール・ポルナレフ] I[イギー] DIO3[DIO(3部)] N[ンドゥール] O[オインゴ] Bo[ボインゴ] V[ヴァニラ・アイス] end J1 -- 宿敵 --> DIO J1 -- 恋人 --> E J1 -- 師弟 --> Z Z -- 同門の仲間 --> Str J1 -- 友人 --> S DIO -- 父 --> Da DIO -- 部下 --> Wc DIO -- 配下 --> T DIO -- 配下 --> B J1 -- 協力 --> Po J2 -- 父 --> G2 G2 -- 父 --> J1 J2 -- 友人 --> C J2 -- 師弟 --> L L -- 母 --> J2 J2 -- 協力 --> St Str -- 裏切り者 --> J2 C -- 殺害 --> W K -- 柱の男 --> Esi K -- 柱の男 --> W K -- 柱の男 --> Sa J2 -- 戦闘 --> K J2 -- 戦闘 --> Esi J2 -- 戦闘 --> W J2 -- 戦闘 --> Sa J3 -- 母 --> H H -- 父 --> J2 J3 -- 仲間 --> A J3 -- 仲間 --> Kyo J3 -- 仲間 --> P J3 -- 仲間 --> I DIO3 -- 宿敵 --> J3 DIO3 -- 宿敵 --> J2 DIO3 -- 部下 --> N DIO3 -- 部下 --> O DIO3 -- 部下 --> Bo DIO3 -- 部下 --> V DIO3 -- 肉体乗っ取り --> J1 J1 -- 子 --> G2 G2 -- 子 --> J2 J2 -- 子 --> H H -- 子 --> J3 DIO3 -- 影響 --> J3 DIO3 -- 影響 --> J2 linkStyle 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59 stroke-width:1.5px;
この図でいかがでしょうか？
ではここで MCP Serverである mermaid-validator を有効にして試してみます。 mermaid-validator でmermaid記法の検証をします。
なお、一度構文が壊れた後に修正しようとしても、なかなか修正できないことがあります。壊れる前から検証プロセスを入れておくことが大事なようです。以下の依頼をしました。
mermaidで定義された図が見づらいです。以下の要領で整理してください。
1部２部３部は上から下に向かって並べてください。
多数の矢印がある場合は、グループ化するなどで整理してください。
矢印の向きはできるだけ見やすくシンプルになるようにしてください。
修正後はmermaid-validatorを使って図を検証し、構文に誤りがないことを確認してください
だいぶ見やすくなりましたがもうちょっと改善できそうです。1部２部３部は上から下に向かって並べてください。 のルールが守られていないですし、敵や仲間はグループ化してほしいところです。ここで mcp-mermaid を導入してみます。mcp-mermaid で図を出力し、Clineが確認できるようにすることで改善ループを回せるようにします。
以下の依頼をします。
mermaidで定義された図が見づらいです。以下のmermaidで定義された図が見づらいです。以下の要領で整理してください。
1部２部３部は上から下に向かって並べてください。
多数の矢印がある場合は、グループ化するなどで整理してください。
矢印の向きはできるだけ見やすくシンプルになるようにしてください。
修正後はmermaid-validatorを使って図を検証し、構文に誤りがないことを確認してください
検証後を mcp-mermaid を使って図を確認し、改善点があれば修正・検証・確認を繰り返してください
以下のような感じで作業を進めてくれます。
Mermaid図の整理が不十分であったことを認識しました。以下の要領で再整理し、mermaid-validatorで検証後、mcp-mermaidで最終確認を行います。
Mermaid図のファイルが更新されました。mermaid-validatorツールを使用して、図の構文を検証します。
Mermaid図の構文検証が成功しました。次に、mcp-mermaidツールを使用して図を生成し、視覚的に確認します。
構文に誤りがあると以下のように修正してくれます。
Mermaid図の構文検証が失敗したことを認識しました。サブグラフ間の隠しリンクの記述が原因でした。サブグラフの縦方向の配置は、Mermaidのgraph TDのデフォルトの挙動に任せ、矢印のグループ化とシンプル化に焦点を当てて再修正します。
以下のようなレスポンスも見られます。すごい。
Mermaid図を整理します。親子関係、DIOとの関係、そしてストレイツォの裏切り関係をより明確に配置し、全体的な見やすさを向上させます。
こんな感じになりました。
良くなった感じもしますが、まだ矢印に交差があるのが気になります。
矢印に交差している箇所があります。できるだけ交差をなくして見やすくしてください。
20回APIリクエストした後が以下。若干改善されたでしょうか。次は具体的に直してほしいところを指摘してみます。
「カーズ」と「ワムウ」の間の矢印と「シーザー」と「カーズ」の間の矢印に交差があります。「カーズ」と「サンタナ」の間の矢印と「ジョセフ」と「サンタナ」の間の矢印に交差があります。できるだけ交差をなくして見やすくしてください。
このタスクも20回のAPIリクエストを越え、失敗しました。mermaidの仕様的に難しいところもありそうですね。
最後に微調整します。
mermeidの修正をしてください
DIOと空条承太郎の間の影響の矢印はいりません
ホリィと承太郎の間の矢印は母だけでよいです
DIOとジョセフは３部にも登場するので3部にも入れてください
承太郎の仲間は仲間グループとしてください
DIOの配下は敵グループとしてください
修正後はmermaid-validatorを使って図を検証し、構文に誤りがないことを確認してください
検証後を mcp-mermaid を使って図を確認し、改善点があれば修正・検証・確認を繰り返してください
結構いい感じにまとまったと思います！しかしmermaidの自動レイアウトの制約で以下は表現できませんでした。mermaid を使う以上現状では限界がありますね。しかしmermaidはGithubでもZENNでも使えるので、そこはある程度の妥協をして使っていくしかないでしょう。
矢印を交差させない。カーズから出ている矢印のあたりが交差している
ブロックごとの上限関係を自由に設定。第２部の真下に第３部を置きたかった
矢印が広がりすぎるのを避ける。ホリィと承太郎の間の矢印を直線的にしたかった

 おわりに今回はMCPサーバーを使ってmermaidの修正をしてみました。MCPサーバーを使うことで、コーディングエージェントとLLMだけでは対応できないこともやりやすくなることが体験できました。また、一度構文が壊れてしまうと復帰が難しいので新しくチャットし直したほうが良い事もわかりました。いいネタが思いついたらMCPサーバーの実装・公開もしてみたいです。


参考書籍
はじめに

背景

環境

ジョジョの相関図を作る

ジョジョの相関図を整理する

おわりに

Discussion
