↓ メインコンテンツへスキップ

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

· loading · loading ·
Tech Mcp Mermaid
kiitosu
著者
kiitosu
画像処理やデバイスドライバ、データ基盤構築からWebバックエンドまで、多様な領域に携わってきました。地図解析や地図アプリケーションの仕組みにも経験があり、幅広い技術を活かした開発に取り組んでいます。休日は草野球とランニングを楽しんでいます。
目次

はじめに
#

この記事は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で作成してください。

以下の回答を得られました。なかなかいいですね！特に矢印といっしょに関係性が記載されているのが素晴らしいです。

graph TD
    Jonathan["ジョナサン・ジョースター"]
    Dio["ディオ・ブランドー / DIO"]
    Erina["エリナ・ペンドルトン"]
    Speedwagon["スピードワゴン"]
    Zeppeli["ウィル・A・ツェペリ"]
    Straizo["ストレイツォ"]

    Joseph["ジョセフ・ジョースター"]
    Caesar["シーザー・A・ツェペリ"]
    LisaLisa["リサリサ"]
    Santana["サンタナ"]
    Esidisi["エシディシ"]
    Wamuu["ワムウ"]
    Kars["カーズ"]

    Jotaro["空条 承太郎"]
    Avdol["モハメド・アヴドゥル"]
    Kakyoin["花京院 典明"]
    Polnareff["ジャン＝ピエール・ポルナレフ"]
    Iggy["イギー"]
    Enya["エンヤ婆"]
    HolHorse["ホル・ホース"]
    Vanilla["ヴァニラ・アイス"]

    Jonathan -->|Married| Erina
    Jonathan -->|Foster brother & Enemy| Dio
    Jonathan -->|Allies| Zeppeli
    Jonathan -->|Allies| Speedwagon

    Zeppeli -->|Mentor| Jonathan

    Straizo -->|Disciple| Zeppeli
    Straizo -->|Later becomes Enemy| Joseph

    Erina -->|Grandmother| Joseph

    Joseph -->|Grandson| Jonathan
    Joseph -->|Allies| Caesar
    Joseph -->|Mentored by| LisaLisa
    Joseph -->|Enemies| Santana
    Joseph -->|Enemies| Esidisi
    Joseph -->|Enemies| Wamuu
    Joseph -->|Enemies| Kars

    Caesar -->|Descendant| Zeppeli

    Joseph -->|Father| Jotaro

    Jotaro -->|Allies| Avdol
    Jotaro -->|Allies| Kakyoin
    Jotaro -->|Allies| Polnareff
    Jotaro -->|Allies| Iggy
    Joseph -->|Allies| Avdol
    Joseph -->|Allies| Kakyoin
    Joseph -->|Allies| Polnareff
    Joseph -->|Allies| Iggy

    Dio -->|Enemy| Joseph
    Dio -->|Enemy| Jotaro
    Dio -->|Enemy| Avdol
    Dio -->|Enemy| Kakyoin
    Dio -->|Enemy| Polnareff
    Dio -->|Enemy| Iggy

    Enya -->|Serves| Dio
    HolHorse -->|Serves| Dio
    Vanilla -->|Loyal Servant| Dio
    Polnareff -->|Former Enemy| Dio

しかしところどころ間違いがありそうです。例えば「ストレイツォ」と「Will A ツェペリ」は師弟関係ではないです。「ジョナサン」は「ジョセフ」の祖父であることはわかっていますが「ジョセフ」を「承太郎」の父だと思っているようです。やはり、ハルシネーションは避けられませんね。まず事実関係を修正していきましょう。「ジョナサン」-「ジョセフ」の間の人と「ジョセフ」-「承太郎」の間の人の名前も追加してもらいましょう。

「ストレイツォ」と「Will A ツェペリ」は師弟関係ではなく同門の仲間です。「ジョセフ」は「承太郎」の父ではなく祖父です。「ジョセフ」-「承太郎」の間の親子関係と「ジョナサン」-「ジョセフ」の間の親子関係を追加してください。

graph TD
    subgraph 第1部 ファントムブラッド
        J1[ジョナサン・ジョースター] -- 宿敵 --> D1[ディオ・ブランドー]
        J1 -- 恋人 --> E[エリナ・ペンドルトン]
        J1 -- 師弟 --> Z[ウィル・A・ツェペリ]
        Z -- 同門の仲間 --> St[ストレイツォ]
        J1 -- 友人 --> S[ロバート・E・O・スピードワゴン]
        D1 -- 吸血鬼化 --> D1
    end

    subgraph 第2部 戦闘潮流
        J2[ジョセフ・ジョースター] -- 祖父 --> J1
        J2 -- 友人 --> C[シーザー・アントニオ・ツェペリ]
        J2 -- 師弟 --> L[リサリサ]
        L -- 母 --> J2
        J2 -- 協力 --> St[ルドル・フォン・シュトロハイム]
        K[カーズ] -- 柱の男 --> Esi[エシディシ]
        K -- 柱の男 --> W[ワムウ]
        K -- 柱の男 --> Sa[サンタナ]
        J2 -- 戦闘 --> K
        J2 -- 戦闘 --> Esi
        J2 -- 戦闘 --> W
        J2 -- 戦闘 --> Sa
    end

    subgraph 第3部 スターダストクルセイダース
        J3[空条承太郎] -- 祖父 --> J2
        J2 -- 祖父 --> J3
        J3 -- 仲間 --> A[モハメド・アヴドゥル]
        J3 -- 仲間 --> Kyo[花京院典明]
        J3 -- 仲間 --> P[ジャン＝ピエール・ポルナレフ]
        J3 -- 仲間 --> I[イギー]
        DIO[DIO] -- 宿敵 --> J3
        DIO -- 宿敵 --> J2
        DIO -- 部下 --> N[ンドゥール]
        DIO -- 部下 --> O[オインゴ]
        DIO -- 部下 --> Bo[ボインゴ]
        DIO -- 部下 --> V[ヴァニラ・アイス]
    end

    J1 -- 子 --> J2
    J2 -- 子 --> H[ホリィ・ジョースター]
    H -- 子 --> J3
    D1 -- 肉体乗っ取り --> DIO
    DIO -- 影響 --> J3
    DIO -- 影響 --> J2

だめでした。「ジョナサン」「ジョセフ」「承太郎」の間の人物を探して補完してほしかったのですが、「ジョナサン」-「ジョセフ」、「ジョセフ」-「承太郎」を親子としてつなげてしまったようです。今回はプロンプトがいまいちでした。再度プロンプトを変更して試してみます。

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

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

以下の回答とともに図が提示されました。

ユーザーから再度mermaid図の修正依頼がありました。 前回の修正で「ジョナサン」と「ジョセフ」の間に直接「子」の関係を追加しましたが、ユーザーのフィードバックによると、その間に別の人物（ジョナサンの子でありジョセフの父）が存在するとのことです。

この人物はジョージ・ジョースターII世です。 以下の点を修正します。

  • 「ジョナサン」の子として「ジョージ・ジョースターII世」を追加し、「ジョージ・ジョースターII世」の子として「ジョセフ」を追加します。
  • 「ジョセフ」と「承太郎」の間の親子関係は、ホリィ・ジョースターを介して表現されているため、このままで問題ないと考えます。

「ジョナサン」と「ジョセフ」の間は「ジョージ・ジョースター」だったんですね。そして。直系という意味では「空条貞夫」は不要で「ホリィ」さんで良かったですね。失礼しましたgeminiさん。

graph TD
    subgraph 第1部 ファントムブラッド
        J1[ジョナサン・ジョースター] -- 宿敵 --> D1[ディオ・ブランドー]
        J1 -- 恋人 --> E[エリナ・ペンドルトン]
        J1 -- 師弟 --> Z[ウィル・A・ツェペリ]
        Z -- 同門の仲間 --> St[ストレイツォ]
        J1 -- 友人 --> S[ロバート・E・O・スピードワゴン]
        D1 -- 吸血鬼化 --> D1
    end

    subgraph 第2部 戦闘潮流
        J2[ジョセフ・ジョースター] -- 父 --> G2[ジョージ・ジョースターII世]
        G2 -- 父 --> J1
        J2 -- 友人 --> C[シーザー・アントニオ・ツェペリ]
        J2 -- 師弟 --> L[リサリサ]
        L -- 母 --> J2
        J2 -- 協力 --> St[ルドル・フォン・シュトロハイム]
        K[カーズ] -- 柱の男 --> Esi[エシディシ]
        K -- 柱の男 --> W[ワムウ]
        K -- 柱の男 --> Sa[サンタナ]
        J2 -- 戦闘 --> K
        J2 -- 戦闘 --> Esi
        J2 -- 戦闘 --> W
        J2 -- 戦闘 --> Sa
    end

    subgraph 第3部 スターダストクルセイダース
        J3[空条承太郎] -- 母 --> H[ホリィ・ジョースター]
        H -- 父 --> J2
        J3 -- 仲間 --> A[モハメド・アヴドゥル]
        J3 -- 仲間 --> Kyo[花京院典明]
        J3 -- 仲間 --> P[ジャン＝ピエール・ポルナレフ]
        J3 -- 仲間 --> I[イギー]
        DIO[DIO] -- 宿敵 --> J3
        DIO -- 宿敵 --> J2
        DIO -- 部下 --> N[ンドゥール]
        DIO -- 部下 --> O[オインゴ]
        DIO -- 部下 --> Bo[ボインゴ]
        DIO -- 部下 --> V[ヴァニラ・アイス]
    end

    J1 -- 子 --> G2
    G2 -- 子 --> J2
    J2 -- 子 --> H
    H -- 子 --> J3
    D1 -- 肉体乗っ取り --> DIO
    DIO -- 影響 --> J3
    DIO -- 影響 --> J2

1部の情報がちょっと寂しいので追加します。

graph TD
    subgraph 第1部 ファントムブラッド
        J1[ジョナサン・ジョースター] -- 宿敵 --> DIO[DIO]
        J1 -- 恋人 --> E[エリナ・ペンドルトン]
        J1 -- 師弟 --> Z[ウィル・A・ツェペリ]
        Z -- 同門の仲間 --> Str[ストレイツォ]
        J1 -- 友人 --> S[ロバート・E・O・スピードワゴン]
        DIO -- 父 --> Da[ダリオ・ブランドー]
        DIO -- 部下 --> Wc[ワンチェン]
        DIO -- 配下 --> T[タルカス]
        DIO -- 配下 --> B[ブラフォード]
        J1 -- 協力 --> Po[ポコ]
    end

    subgraph 第2部 戦闘潮流
        J2[ジョセフ・ジョースター] -- 父 --> G2[ジョージ・ジョースターII世]
        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
    end

    subgraph 第3部 スターダストクルセイダース
        J3[空条承太郎] -- 母 --> H[ホリィ・ジョースター]
        H -- 父 --> J2
        J3 -- 仲間 --> A[モハメド・アヴドゥル]
        J3 -- 仲間 --> Kyo[花京院典明]
        J3 -- 仲間 --> P[ジャン＝ピエール・ポルナレフ]
        J3 -- 仲間 --> I[イギー]
        DIO -- 宿敵 --> J3
        DIO -- 宿敵 --> J2
        DIO -- 部下 --> N[ンドゥール]
        DIO -- 部下 --> O[オインゴ]
        DIO -- 部下 --> Bo[ボインゴ]
        DIO -- 部下 --> V[ヴァニラ・アイス]
        DIO -- 肉体乗っ取り --> J1
    end

    J1 -- 子 --> G2
    G2 -- 子 --> J2
    J2 -- 子 --> H
    H -- 子 --> J3
    DIO -- 影響 --> J3
    DIO -- 影響 --> J2

ベースとしてはこんなものでしょうか。しかしだいぶ矢印が入り乱れて見づらくなっています。 これをcline + geminiに修正してもらいます。ここからが本番です。

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

以下の依頼をしました。

ありがとうございます！だいぶ整理されてきました。しかし図が見づらいです。以下の要領で整理してください。

  • 1部２部３部は上から下に向かって並べてください。
  • 多数の矢印がある場合は、グループ化するなどで整理してください。
  • 矢印の向きはできるだけ見やすくシンプルになるようにしてください。

以下の回答が返りました。ここでcline + geminiの回答が壊れ始めます。回答結果はmermaidの構文を守っていないために表示できません。

ユーザーからmermaid図の見やすさに関する改善要望がありました。 具体的には、以下の点を修正します。

  1. 部の配置: 1部、2部、3部を上から下へ垂直に配置する。
  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記法の検証をします。

https://mcpmarket.com/ja/server/mermaid-validator-1
mcpmarket.com

なお、一度構文が壊れた後に修正しようとしても、なかなか修正できないことがあります。壊れる前から検証プロセスを入れておくことが大事なようです。以下の依頼をしました。

mermaidで定義された図が見づらいです。以下の要領で整理してください。

  • 1部２部３部は上から下に向かって並べてください。
  • 多数の矢印がある場合は、グループ化するなどで整理してください。
  • 矢印の向きはできるだけ見やすくシンプルになるようにしてください。
  • 修正後はmermaid-validatorを使って図を検証し、構文に誤りがないことを確認してください
graph TD
    subgraph 第1部 ファントムブラッド
        J1[ジョナサン・ジョースター]
        DIO[DIO]
        E[エリナ・ペンドルトン]
        Z[ウィル・A・ツェペリ]
        Str[ストレイツォ]
        S[ロバート・E・O・スピードワゴン]
        Da[ダリオ・ブランドー]
        Wc[ワンチェン]
        T[タルカス]
        B[ブラフォード]
        Po[ポコ]

        J1 -- 宿敵 --> DIO
        J1 -- 恋人 --> E
        J1 -- 師弟 --> Z
        J1 -- 友人 --> S
        J1 -- 協力 --> Po

        Z -- 同門の仲間 --> Str

        DIO -- 父 --> Da
        DIO -- 部下 --> Wc
        DIO -- 配下 --> T
        DIO -- 配下 --> B
    end

    subgraph 第2部 戦闘潮流
        J2[ジョセフ・ジョースター]
        G2[ジョージ・ジョースターII世]
        C[シーザー・アントニオ・ツェペリ]
        L[リサリサ]
        St[ルドル・フォン・シュトロハイム]
        W[ワムウ]
        K[カーズ]
        Esi[エシディシ]
        Sa[サンタナ]

        J2 -- 友人 --> C
        J2 -- 師弟 --> L
        J2 -- 協力 --> St
        J2 -- 戦闘 --> K
        J2 -- 戦闘 --> Esi
        J2 -- 戦闘 --> W
        J2 -- 戦闘 --> Sa

        L -- 母 --> J2
        Str -- 裏切り者 --> J2
        C -- 殺害 --> W

        K -- 柱の男 --> Esi
        K -- 柱の男 --> W
        K -- 柱の男 --> Sa
    end

    subgraph 第3部 スターダストクルセイダース
        J3[空条承太郎]
        H[ホリィ・ジョースター]
        A[モハメド・アヴドゥル]
        Kyo[花京院典明]
        P[ジャン＝ピエール・ポルナレフ]
        I[イギー]
        N[ンドゥール]
        O[オインゴ]
        Bo[ボインゴ]
        V[ヴァニラ・アイス]

        J3 -- 母 --> H
        J3 -- 仲間 --> A
        J3 -- 仲間 --> Kyo
        J3 -- 仲間 --> P
        J3 -- 仲間 --> I

        DIO -- 宿敵 --> J3
        DIO -- 部下 --> N
        DIO -- 部下 --> O
        DIO -- 部下 --> Bo
        DIO -- 部下 --> V
    end

    J1 -- 子 --> G2
    G2 -- 子 --> J2
    J2 -- 子 --> H
    H -- 子 --> J3

    DIO -- 影響 --> J3
    DIO -- 影響 --> J2
    DIO -- 肉体乗っ取り --> J1

だいぶ見やすくなりましたがもうちょっと改善できそうです。1部２部３部は上から下に向かって並べてください。 のルールが守られていないですし、敵や仲間はグループ化してほしいところです。ここで mcp-mermaid を導入してみます。mcp-mermaid で図を出力し、Clineが確認できるようにすることで改善ループを回せるようにします。

https://mcpmarket.com/ja/server/mermaid-1
mcpmarket.com

以下の依頼をします。

mermaidで定義された図が見づらいです。以下のmermaidで定義された図が見づらいです。以下の要領で整理してください。

  • 1部２部３部は上から下に向かって並べてください。
  • 多数の矢印がある場合は、グループ化するなどで整理してください。
  • 矢印の向きはできるだけ見やすくシンプルになるようにしてください。
  • 修正後はmermaid-validatorを使って図を検証し、構文に誤りがないことを確認してください
  • 検証後を mcp-mermaid を使って図を確認し、改善点があれば修正・検証・確認を繰り返してください

以下のような感じで作業を進めてくれます。

Mermaid図の整理が不十分であったことを認識しました。以下の要領で再整理し、mermaid-validatorで検証後、mcp-mermaidで最終確認を行います。

Mermaid図のファイルが更新されました。mermaid-validatorツールを使用して、図の構文を検証します。

Mermaid図の構文検証が成功しました。次に、mcp-mermaidツールを使用して図を生成し、視覚的に確認します。

構文に誤りがあると以下のように修正してくれます。

Mermaid図の構文検証が失敗したことを認識しました。サブグラフ間の隠しリンクの記述が原因でした。サブグラフの縦方向の配置は、Mermaidのgraph TDのデフォルトの挙動に任せ、矢印のグループ化とシンプル化に焦点を当てて再修正します。

以下のようなレスポンスも見られます。すごい。

Mermaid図を整理します。親子関係、DIOとの関係、そしてストレイツォの裏切り関係をより明確に配置し、全体的な見やすさを向上させます。

こんな感じになりました。

graph TD
    subgraph 第1部 ファントムブラッド
        J1[ジョナサン・ジョースター]
        E[エリナ・ペンドルトン]
        Z[ウィル・A・ツェペリ]
        S[ロバート・E・O・スピードワゴン]
        Po[ポコ]
        DIO[DIO]
        Da[ダリオ・ブランドー]
        Wc[ワンチェン]
        T[タルカス]
        B[ブラフォード]
        Str[ストレイツォ]

        J1 -- 恋人 --> E
        J1 -- 師弟 --> Z
        J1 -- 友人 --> S
        J1 -- 協力 --> Po

        DIO -- 父 --> Da
        DIO -- 部下 --> Wc
        DIO -- 配下 --> T
        DIO -- 配下 --> B

        Z -- 同門の仲間 --> Str
    end

    subgraph 第2部 戦闘潮流
        J2[ジョセフ・ジョースター]
        C[シーザー・アントニオ・ツェペリ]
        L[リサリサ]
        St[ルドル・フォン・シュトロハイム]
        W[ワムウ]
        K[カーズ]
        Esi[エシディシ]
        Sa[サンタナ]

        J2 -- 友人 --> C
        J2 -- 師弟 --> L
        L -- 母 --> J2
        J2 -- 協力 --> St
        C -- 殺害 --> W

        subgraph 柱の男
            K -- 柱の男 --> Esi
            K -- 柱の男 --> W
            K -- 柱の男 --> Sa
        end

        J2 -- 戦闘 --> K
        J2 -- 戦闘 --> Esi
        J2 -- 戦闘 --> W
        J2 -- 戦闘 --> Sa
    end

    subgraph 第3部 スターダストクルセイダース
        J3[空条承太郎]
        H[ホリィ・ジョースター]
        A[モハメド・アヴドゥル]
        Kyo[花京院典明]
        P[ジャン＝ピエール・ポルナレフ]
        I[イギー]
        N[ンドゥール]
        O[オインゴ]
        Bo[ボインゴ]
        V[ヴァニラ・アイス]

        J3 -- 母 --> H
        J3 -- 仲間 --> A
        J3 -- 仲間 --> Kyo
        J3 -- 仲間 --> P
        J3 -- 仲間 --> I

        DIO -- 部下 --> N
        DIO -- 部下 --> O
        DIO -- 部下 --> Bo
        DIO -- 部下 --> V
    end

    subgraph 血縁関係
        J1 -- 子 --> G2[ジョージ・ジョースターII世]
        G2 -- 子 --> J2
        J2 -- 子 --> H
        H -- 子 --> J3
    end

    subgraph DIOとの関係
        J1 -- 宿敵 --> DIO
        DIO -- 肉体乗っ取り --> J1
        DIO -- 宿敵 --> J2
        DIO -- 影響 --> J2
        DIO -- 宿敵 --> J3
        DIO -- 影響 --> J3
    end

    Str -- 裏切り者 --> J2

良くなった感じもしますが、まだ矢印に交差があるのが気になります。

矢印に交差している箇所があります。できるだけ交差をなくして見やすくしてください。

20回APIリクエストした後が以下。若干改善されたでしょうか。次は具体的に直してほしいところを指摘してみます。

graph TD
    subgraph 第1部 ファントムブラッド
        J1[ジョナサン・ジョースター]
        E[エリナ・ペンドルトン]
        Z[ウィル・A・ツェペリ]
        S[ロバート・E・O・スピードワゴン]
        Po[ポコ]
        Str[ストレイツォ]
        DIO[DIO]
        Da[ダリオ・ブランドー]
        Wc[ワンチェン]
        T[タルカス]
        B[ブラフォード]

        J1 -- 恋人 --> E
        J1 -- 師弟 --> Z
        J1 -- 友人 --> S
        J1 -- 協力 --> Po
        Z -- 同門の仲間 --> Str
        DIO -- 父 --> Da
        DIO -- 部下 --> Wc
        DIO -- 配下 --> T
        DIO -- 配下 --> B
    end

    subgraph 第2部 戦闘潮流
        J2[ジョセフ・ジョースター]
        C[シーザー・アントニオ・ツェペリ]
        L[リサリサ]
        St[ルドル・フォン・シュトロハイム]
        W[ワムウ]
        K[カーズ]
        Esi[エシディシ]
        Sa[サンタナ]

        J2 -- 友人 --> C
        J2 -- 師弟 --> L
        L -- 母 --> J2
        J2 -- 協力 --> St
        C -- 殺害 --> W

        subgraph 柱の男
            K -- 柱の男 --> Esi
            K -- 柱の男 --> W
            K -- 柱の男 --> Sa
        end

        J2 -- 戦闘 --> K
        J2 -- 戦闘 --> Esi
        J2 -- 戦闘 --> W
        J2 -- 戦闘 --> Sa
    end

    subgraph 第3部 スターダストクルセイダース
        J3[空条承太郎]
        H[ホリィ・ジョースター]
        A[モハメド・アヴドゥル]
        Kyo[花京院典明]
        P[ジャン＝ピエール・ポルナレフ]
        I[イギー]
        N[ンドゥール]
        O[オインゴ]
        Bo[ボインゴ]
        V[ヴァニラ・アイス]

        J3 -- 母 --> H
        J3 -- 仲間 --> A
        J3 -- 仲間 --> Kyo
        J3 -- 仲間 --> P
        J3 -- 仲間 --> I

        DIO -- 部下 --> N
        DIO -- 部下 --> O
        DIO -- 部下 --> Bo
        DIO -- 部下 --> V
    end

    G2[ジョージ・ジョースターII世]

    J1 -- 子 --> G2
    G2 -- 子 --> J2
    J2 -- 子 --> H
    H -- 子 --> J3

    Str -- 裏切り者 --> J2

    J1 -- 宿敵 --> DIO
    DIO -- 肉体乗っ取り --> J1
    DIO -- 宿敵 --> J2
    DIO -- 影響 --> J2
    DIO -- 宿敵 --> J3
    DIO -- 影響 --> J3

「カーズ」と「ワムウ」の間の矢印と「シーザー」と「カーズ」の間の矢印に交差があります。「カーズ」と「サンタナ」の間の矢印と「ジョセフ」と「サンタナ」の間の矢印に交差があります。できるだけ交差をなくして見やすくしてください。

このタスクも20回のAPIリクエストを越え、失敗しました。mermaidの仕様的に難しいところもありそうですね。

最後に微調整します。

mermeidの修正をしてください

  • DIOと空条承太郎の間の影響の矢印はいりません
  • ホリィと承太郎の間の矢印は母だけでよいです
  • DIOとジョセフは３部にも登場するので3部にも入れてください
  • 承太郎の仲間は仲間グループとしてください
  • DIOの配下は敵グループとしてください
  • 修正後はmermaid-validatorを使って図を検証し、構文に誤りがないことを確認してください
  • 検証後を mcp-mermaid を使って図を確認し、改善点があれば修正・検証・確認を繰り返してください
graph TD
    subgraph 第1部 ファントムブラッド
        J1[ジョナサン・ジョースター]
        E[エリナ・ペンドルトン]
        Z[ウィル・A・ツェペリ]
        S[ロバート・E・O・スピードワゴン]
        Po[ポコ]
        Str[ストレイツォ]

        J1 -- 恋人 --> E
        J1 -- 師弟 --> Z
        J1 -- 友人 --> S
        J1 -- 協力 --> Po
        Z -- 同門の仲間 --> Str

        subgraph DIO一派
            DIO[DIO]
            Da[ダリオ・ブランドー]
            Wc[ワンチェン]
            T[タルカス]
            B[ブラフォード]

            DIO -- 父 --> Da
            DIO -- 部下 --> Wc
            DIO -- 配下 --> T
            DIO -- 配下 --> B
        end
    end

    subgraph 第2部 戦闘潮流
        J2[ジョセフ・ジョースター]
        C[シーザー・アントニオ・ツェペリ]
        L[リサリサ]
        St[ルドル・フォン・シュトロハイム]

        J2 -- 友人 --> C
        J2 -- 師弟 --> L
        L -- 母 --> J2
        J2 -- 協力 --> St

        subgraph 柱の男
            K[カーズ]
            Esi[エシディシ]
            W[ワムウ]
            Sa[サンタナ]

            K -- 柱の男 --> Esi
            K -- 柱の男 --> W
            K -- 柱の男 --> Sa
        end

        J2 -- 戦闘 --> K
        J2 -- 戦闘 --> Esi
        J2 -- 戦闘 --> W
        J2 -- 戦闘 --> Sa
        C -- 殺害 --> W
    end

    subgraph 第3部 スターダストクルセイダース
        J3[空条承太郎]
        H[ホリィ・ジョースター]

        subgraph 承太郎の仲間
            A[モハメド・アヴドゥル]
            Kyo[花京院典明]
            P[ジャン＝ピエール・ポルナレフ]
            I[イギー]
            J2_3[ジョセフ・ジョースター]
        end

        subgraph DIOの配下
            DIO3[DIO]
            N[ンドゥール]
            O[オインゴ]
            Bo[ボインゴ]
            V[ヴァニラ・アイス]
        end

        J3 -- 母 --> H
        J3 -- 仲間 --> A
        J3 -- 仲間 --> Kyo
        J3 -- 仲間 --> P
        J3 -- 仲間 --> I
        J3 -- 仲間 --> J2_3

        DIO3 -- 部下 --> N
        DIO3 -- 部下 --> O
        DIO3 -- 部下 --> Bo
        DIO3 -- 部下 --> V

        J3 -- 宿敵 --> DIO3
        DIO3 -- 宿敵 --> J2_3
    end

    G2[ジョージ・ジョースターII世]

    J1 -- 子 --> G2
    G2 -- 子 --> J2
    J2 -- 子 --> H
    H -- 子 --> J3

    Str -- 裏切り者 --> J2

    J1 -- 宿敵 --> DIO
    DIO -- 肉体乗っ取り --> J1
    DIO -- 宿敵 --> J2

結構いい感じにまとまったと思います！しかしmermaidの自動レイアウトの制約で以下は表現できませんでした。mermaid を使う以上現状では限界がありますね。しかしmermaidはGithubでもZENNでも使えるので、そこはある程度の妥協をして使っていくしかないでしょう。

  • 矢印を交差させない。カーズから出ている矢印のあたりが交差している
  • ブロックごとの上限関係を自由に設定。第２部の真下に第３部を置きたかった
  • 矢印が広がりすぎるのを避ける。ホリィと承太郎の間の矢印を直線的にしたかった

おわりに
#

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

参考書籍
![Diagrams as Code](https://m.media-amazon.com/images/I/61g+sogJ2KL.SY342.jpg =200x)
![やさしいMCP入門](https://m.media-amazon.com/images/I/61rUhx49xOL.SY522.jpg =200x)
![MCPサーバー構築と運用：生成AIのための文脈共有基盤を作る](https://m.media-amazon.com/images/I/61lIytxhxTL.SY522.jpg =200x)
Reply by Email

関連記事

MCP Python SDKでMCPサーバーを作ってみる
· loading · loading
Tech Mcp Mcp-Server Python
MLflowと一緒にローカルRAGを使ってみる
· loading · loading
Tech Mlflow Langchain Huggingface Rag
MLflowでカスタムLLM判定メトリクスを作ってローカルLLMを評価する
· loading · loading
Tech Mlflow Llm Metrics