ClaudeでExcalidrawとtldrawに図を描かせる違い — 編集の引き継ぎ方

ExcalidrawコネクタとtldrawコネクタはどちらもClaudeの会話内にキャンバスを出し、ホワイトボード風の図を描かせます。サインインは不要で、追加すればすぐ使えます。

違いが出るのは、描かせたあとの扱いです。Excalidrawは要素のJSONで図を組み立て、tldrawはキャンバスのエディタ操作で図を組み立てます。この記事では、2つの描画の仕組み、手動編集をClaudeに引き継ぐ方法、ディレクトリの記載と接続先の食い違い、使い分けの基準を順に扱います。構文を検証して描画するタイプの図はMermaid Chartコネクタの記事にあります。

2つのコネクタの基本情報

コネクタのディレクトリに載っている基本項目は次のとおりです。

どちらもMCP Appsの一種です。MCP Appsは、サーバーがチャット内に描画できるUIを返す仕組みで、コネクタの種類としての位置づけはClaude Connectorsとはで扱っています。ディレクトリの探し方はClaudeの拡張機能ディレクトリを参照してください。

ディレクトリのページには、どちらにも「開発者が信頼できる場合にだけコネクタを使う」旨の注意書きがあります。ツールの中身はAnthropicが管理していないためです。

描かせ方の違い — 要素JSONとエディタ操作

Excalidraw: 要素の配列を渡して描く

Excalidrawのコネクタが表に出すツールは、read_meとcreate_viewの2つです。read_meはExcalidrawの要素形式、配色の例、コツを返すツールで、create_viewを初めて使う前に呼ぶ想定になっています。

create_viewの引数はelements1つで、Excalidraw要素のJSON配列を文字列で渡します。コメントや末尾カンマの入った壊れたJSONは受け付けません。要素は1つずつ、手で描くようなアニメーションを伴って画面に現れます。提供元のリポジトリの例文は次の2つです。

• 「Draw a cute cat using excalidraw」
• 「Draw an architecture diagram showing a user connecting to an API server which talks to a database」

Claudeは構成図を頼まれると、要素の座標と大きさ、矢印の接続先をJSONとして自分で組み立てます。見た目の調整は、要素の数値を直す形になります。

tldraw: キャンバスのエディタを操作して描く

tldrawは、描き方が1段違います。接続先サーバーに問い合わせたツール一覧では、図を描くのはexecで、Claudeがキャンバスのエディタ(editor)に対するJavaScriptを書いて実行します。事前にsearchでエディタのAPI仕様を引く作りです。execの説明に載る例は次のようなものです。

editor.createShape({ _type: 'rectangle', shapeId: 'box1', x: 200, y: 120, w: 320, h: 180, text: 'Hello' })
editor.createShape({ _type: 'arrow', shapeId: 'a1', fromId: 'box1', toId: 'box2', x1: 0, y1: 0, x2: 100, y2: 0 })

2つの違いを並べます。

tldrawのexecは、図形をまとめて等間隔に並べる、囲み枠を付けるといった操作をエディタの関数で呼べます。説明文には「文字量で図形が伸びるので、重なりが出ないようスクリプトで工夫する」という趣旨の注意書きもあります。

手動編集をClaudeに引き継ぐ方法

ウィジェット上で自分の手で図を直したあと、Claudeに続きを頼む場面が実用上の分かれ目です。どちらのコネクタも編集内容を読み取れますが、経路が違います。

Excalidraw: チェックポイントを起点に書き足す

create_viewの戻り値には、チェックポイントIDが含まれます。Claudeに返る案内文の趣旨は次のとおりです。

1. 図を直したいと言われたら、まずウィジェットの文脈を読み、手動編集があったかを調べる
2. 新規に描き直すか、そのチェックポイントを起点にするかを決める
3. 起点にする場合は、要素配列の先頭に{"type":"restoreCheckpoint","id":"<ID>"}を置き、続けて追加分を書く

この方法だと、フルスクリーンで直した内容を含む状態に、新しい要素を重ねられます。消したい要素は{"type":"delete","ids":"b2,a1,t3"}のように、IDをカンマ区切りで並べて指定します。

チェックポイントは無期限ではありません。見つからない場合のメッセージには「期限切れか、そもそも存在しなかった可能性がある」と書かれ、最初から描き直すよう促されます。会話を日をまたいで再開したときは、描き直しになりうると考えておく方が安全です。

tldraw: キャンバスの状態が会話に載る

tldrawの接続先の案内文には、現在のキャンバスの状態がTLShape・アセット・バインディングの生データとして、モデルの文脈に保持されると書かれています。ディレクトリの説明の「編集するとAIが変更をリアルタイムで見る」は、この仕組みを指していると読めます。execは、前回の戻り値のcanvasIdを渡せば既存のキャンバスを編集し、省略すれば新しい空のキャンバスを作ります。

つまり、手動編集を引き継ぐ点は両者に共通で、違いは次の3点です。

ディレクトリの記載と接続先のツール名が食い違う

ここは、両コネクタを触る前に知っておくと混乱しない点です。

ディレクトリのページに載るツール名は、Excalidrawがread_me・create_view・export_to_excalidraw・save_checkpoint・read_checkpointの5つです。接続先サーバーにツール一覧を問い合わせると、Excalidrawは同じ5つを返します。ただしexport_to_excalidraw・save_checkpoint・read_checkpointの3つは、ウィジェット専用(アプリからだけ見える設定)で、Claudeが直接呼ぶのはread_meとcreate_viewです。

tldrawは一致しません。ディレクトリのページにはdiagram_drawing_read_me・create_shapes・update_shapes・delete_shapes・read_checkpoint・save_checkpointの6つが載っています。接続先に問い合わせると、Claudeが使うsearchとexec、ウィジェット専用のread_checkpoint・save_checkpointなどが返り、create_shapes系の名前は含まれません。

ディレクトリの記載と接続先の応答のどちらが新しいかは、2つを並べても判断できません。サーバー側は更新されうるので、この記事のツール名も、将来そのまま当てはまり続けるとは限りません。

接続やツールの一覧が出ないときの切り分けは、MCPサーバーに接続できないときの切り分け手順の4層が使えます。

保存と共有の経路

Excalidraw: excalidraw.comへのエクスポート

export_to_excalidrawの説明は「図をexcalidraw.comにアップロードし、共有可能なURLを返す」です。ウィジェット専用のツールなので、図の画面から操作する機能です。図の内容が外部のサービスに送られる操作なので、機密を含む図は、アップロードする前に内容を確かめてください。

入力サイズの上限もあります。要素の入力は5MiBを超えるとエラーになり、メッセージは「要素を減らすか、チェックポイントで段階的に作る」ことを促します。大きな図は何度かに分けて描かせると通りやすくなります。

tldraw: チェックポイントで保存

tldrawにはExcalidrawのような、外部へ共有URLを作るツールの記載がありません。ディレクトリのページにあるのはsave_checkpointとread_checkpointで、どちらもウィジェットが編集内容を保存・復元するための仕組みです。図を外へ持ち出したいときは、キャンバスのスクリーンショットや、tldraw本体のエクスポート機能を使う流れになります。

使い分けの目安

どちらでも足りるのは、数ノードの構成図や概念図です。迷うときは、同じ依頼文を両方に出して、直しやすさを比べるのが早い方法です。たとえば次のような依頼で十分です。

ユーザー、APIサーバー、データベースの3つを矢印でつないだ構成図を描いて。
描いたあと、APIサーバーの前にキャッシュを足す指示を出すので、私が手で直した内容は残して。

後半の指示は、手動編集を引き継ぐ動作を試すためのものです。例えば図を直してから「ここにキャッシュを足して」と頼み、直した部分が消えずに残るかを見れば、引き継ぎが働いているかが分かります。

構文で書く図との使い分け

Mermaidは、記法を検証してから図に変換する方式で、図のコードを再利用しやすい利点があります。Excalidrawとtldrawはキャンバス上の図形を直接扱うので、見た目を手で整える作業に向きます。図とノートを組み合わせる使い方はClaudeとGoodnotesの連携にあります。

自分のサーバーで動かす場合

Excalidrawのコネクタは、提供元のリポジトリで公開されており、ローカル実行の手順があります。リモートのURLをカスタムコネクタとして追加する方法に加え、ローカル用の拡張(.mcpbファイル)をClaude Desktopにインストールする方法と、ソースからビルドしてclaude_desktop_config.jsonに--stdioで登録する方法が書かれています。

カスタムコネクタとしてURLを追加する流れはCoworkカスタムコネクタ自作ガイドと同じです。ディレクトリ経由で足りるなら、手間の少ないディレクトリ経由で十分です。

まとめ

2つの違いは、手描き風かどうかよりも、図の組み立て方にあります。Excalidrawは要素JSONで描き、チェックポイントを起点に書き足し、excalidraw.comへ共有できます。tldrawはキャンバスのエディタをコードで操作し、canvasIdで同じキャンバスの続きを描きます。

手動編集の引き継ぎは両方にあります。ツール名はディレクトリの記載と接続先の応答がずれることがあるため、依頼文にはツール名を書かず、描きたい図の内容を伝えるのが無難です。