ClaudeでMermaid Chartコネクタを使う手順 — 会話内に図を表示

Mermaid ChartコネクタをClaudeに追加すると、「ログイン処理のフローチャートを描いて」と頼むだけで、図が会話の中にウィジェットとして表示されます。Mermaidのコードを別のエディタに貼って確かめる手間がなくなります。

この記事では、コネクタの追加から図の表示、保存、構文エラーの直し方までを順に扱います。あわせて、Mermaid側のドキュメントに3つのバージョンがあり、記載が食い違う点も押さえます。

Mermaid Chartコネクタとは何か

Mermaid Chartコネクタは、Mermaid Chart Inc.が提供するMCPアプリです。Claudeがフローチャートやシーケンス図などのMermaid記法を書き、会話内で描画できるようにします。Claudeのコネクタディレクトリでは「Anthropic verified」のラベルが付き、カテゴリはCreativeとProductivityに入っています。

ディレクトリの説明によると、Mermaidの構文を検証し、図を高品質なSVGとして描画します。表示先はプレビュー・ズーム・やり直しができるインタラクティブなUIです。

MCP Appsという仕組みの一例でもあります。MCP Appsは、会話内にグラフや地図のようなUIを描画するコネクタの種類です。コネクタ全体の種類や追加方法はClaude Connectorsとはにまとまっています。

会話内に図を出すまでの手順

依頼文の例は次のとおりです。いずれもMermaid側のドキュメントにある文言です。

• 「Create a flowchart showing the user login process」
• 「Make a sequence diagram for an API request flow」
• 「Generate a class diagram for a User model」
• 「Draw a state diagram for an order lifecycle」

日本語で頼んでも構いません。たとえば次の一文で足ります。

注文の状態遷移を stateDiagram で描いて。タイトルは「注文ライフサイクル」

ウィジェットの中身は、Mermaidライブラリがクライアント側で描画しています。サーバーが画像を作って返す方式ではありません(v2・v3のドキュメントの記載)。

7つのツールと認証が要る操作

v2のドキュメントには7つのツールが載っています。ディレクトリのページに並ぶツール名も同じ7つです。

display_mermaidの引数は、diagramCode(必須)、title(必須)、documentID(任意)の3つです。documentIDは、すでにIDを持つ図を更新して表示し直すときだけ渡します。新しい図を作るときは省略します。

戻り値にはisAuthenticatedと、認証済みの場合のremainingCredits(残りのAIクレジット)が含まれます。つまり、表示まではアカウントなしで試せるバージョンがあり、保存以降はMermaid.aiのアカウントが必要になるという分け方です。

ツールの注釈では、display_mermaid、list_personal_diagrams、get_diagram_by_urlが読み取り専用(readOnlyHint: true)です。データを書き換えるのはsave_diagramとupdate_diagramの2つで、後者だけがdestructiveHint: trueになっています。外部ドメインへアクセスする(openWorldHint: true)ツールは、7つのどれにもありません。

v1・v2・v3でドキュメントが分かれている

Mermaid側のドキュメントには「Claude MCP App」「v2」「v3」の3ページがあり、サーバーURLも違います。

v1のツールは構文検証と描画を1回で行い、結果にvalid、renderedSVG、renderedPNG、liveEditUrlなどを含めます。無効な図のときは、Mermaid Liveで直すためのリンクが返ります。v2以降は保存・更新・一覧といったアカウント連携が加わりました。

ここに食い違いがあります。ディレクトリのページに載るコネクタURLはv1の/anthropic/mcpで、ツール一覧は7つ、サインインは「Not required」です。一方、v1のドキュメントにはツールが1つしかなく、7つのツールはv2・v3のドキュメントの記載です。ディレクトリのページとドキュメントのどちらが現行の接続先を指すかは、2つのページを並べても決まりません。

実際にどのバージョンへ繋がっているかは、接続後にClaudeが呼ぶツール名で判断できます。validate_and_render_mermaid_diagramなら無印の系統、display_mermaidが出てくればv2以降の系統です。

claude.aiでカスタムコネクタを追加する手順は、Coworkカスタムコネクタ自作ガイドの流れと同じです。

図を保存・更新するときの注意

サインイン後は、会話の図をMermaid.aiのアカウントに保存できます。「Save this diagram to my account」「Show me my saved diagrams」のように頼めば、Claudeがsave_diagramやlist_personal_diagramsを使います。

3つの操作は性質が違います。ツールの注釈に書かれた内容を並べます。

• save_diagram: 呼ぶたびに新しい文書が作られます。同じ図を2回保存すると2件になります
• update_diagram: 既存の図を上書きします。ツールの注釈では破壊的な操作(destructiveHint: true)として扱われています
• repair_diagram: AIで修復します。成功すると、AIクレジットを消費します

更新の前には、どのdocumentIDを上書きするかを会話で確認すると安全です。たとえば次のように頼みます。

保存済みの図の一覧を出して。更新するのは「注文ライフサイクル」だけにして、
上書きする前に documentID を教えて。

既存の図をURLから取り込んで直す

すでにMermaid.aiで作った図は、URLをClaudeに渡して取り込めます。使うのはget_diagram_by_urlで、引数はMermaidの図のURL(url)だけです。戻り値はdocumentID、projectID、code、titleで、読み取り専用の操作として注釈されています。

流れは次のとおりです。Mermaid.aiの図のURLを貼り、「この図に承認ステップを足して」と頼みます。Claudeがコードを受け取って書き換え、display_mermaidにdocumentIDを付けて表示し直します。その場で内容が合っていれば、update_diagramで元の図へ反映する段になります。

この図のURLを読み込んで、承認ステップを追加したものを表示して。
まだ保存はしないで。URL: (MermaidのURLを貼る)

「まだ保存しないで」と添えておくと、表示と保存を分けられます。表示だけならコードは書き換わらず、update_diagramを呼んだ時点で上書きが起きます。

表示できないときの切り分け

Mermaid側のドキュメントが挙げるつまずきは4つです。

ここまでで直らない場合は、そもそもコネクタが接続できていない可能性があります。ツールが一覧に出ない、認証が通らないといった症状は、MCPサーバーに接続できないときの切り分け手順の4層で絞れます。

Mermaid MCP Serverとの違い

Mermaid Chartは、別に「Mermaid MCP Server」も提供しています。名前が似ていますが、用途が違います。

Claude Codeのようにターミナル中心の環境に図を持ち込みたいときは、画面にウィジェットを出すアプリより、リモートMCPとして繋ぐMermaid MCP Serverが選択肢になります。Claude Code側でclaude.aiのコネクタをまとめて切りたい場合はdisableClaudeAiConnectorsの設定が使えます。

まとめ

描画だけなら、ディレクトリから追加してそのまま頼めば足ります。保存・更新・修復に進む段階で、Mermaid.aiへのサインインが必要になります。更新は既存の図を上書きする操作なので、documentIDを確かめてから頼むと取り違えを防げます。

接続したサーバーがどのバージョンかは、ツール名で見分けられます。ドキュメントが3つに分かれている点を知っておくと、ツールが想定と違って見えたときに迷いません。