Excalidraw MCPで日本語が切れる原因と直し方

「Excalidraw MCP で AI に図を描かせたら、日本語の文字が途中で切れている」「後から足した箱が、背景の下に潜って見えなくなった」——AI に図を任せ始めたとき、多くの人がこの壁に当たります。

結論から言うと、Excalidraw MCP で日本語が切れる原因は、サーバーが測った文字の幅と、見る人のブラウザが実際に描く幅のずれです。直し方は、書き込みのたびに返るレイアウトの点検を読み、それでも残る切れは文字の幅を計算し直して update で上書きし、最後に人がブラウザで1回見ることです。AI のスクリーンショットだけで確かめても、この切れは見つからないことがあります。

株式会社Fyveは、Claude Code から Excalidraw+ の MCP を使って、打ち合わせの前後に業務の流れの図を描いています。この記事では、2026年9月27〜28日に図を2枚描いたときに実際に出会った6つの癖と、その直し方を、公式ドキュメントで確かめた仕様とあわせてまとめます。

結論：Excalidraw MCP で日本語が切れたときの直し方3つ

先に答えを並べます。細かい理由は後の節で書きます。

1. 書き込みの返り値のレイアウトの点検を読む。公式ドキュメントによると、Excalidraw+ MCP の書き込みの道具は、変えた要素に同じ点検をかけて、問題を layoutIssues として返します。図全体を点検したいときは check_scene_layout を使います
2. それでも切れるなら、文字の幅を自分で計算し直して update で上書きする。私たちは、全角を「文字サイズ×1.0」、半角を「×0.62」として最長の行を足し、そこに「×1.08＋6」をかけた値を幅にしています。図を読み出す get_scene_content の結果に機械で当てて、ずれた要素だけを直します
3. 最後に人がブラウザで1回見る。私たちが出会った切れは、MCP の take_screenshot の画像には写りませんでした。AI が「確認しました」と言っても、ブラウザで開くまでは終わりにしません

箱が背景の下に潜る問題は、文字の幅とは別の原因です。こちらは「区画の背景を、同じ呼び出しの先頭に入れる」で防げました。これも後で詳しく書きます。

Excalidraw+ MCP とは（2026年11月時点の仕様）

Excalidraw+ MCP は、手書き風のホワイトボード「Excalidraw」の有料版である Excalidraw+ が提供している MCP サーバーです。MCP（Model Context Protocol）は、Claude Code などの AI ツールが外部のサービスを道具として使うための共通の決まりです。MCP そのものの仕組みは、こちらで解説しています。

Claude CodeMCPとは？仕組みと実務での活用法をわかりやすく解説

2026年11月5日時点の公式ドキュメントで確かめた要点は次のとおりです。

公式の「Getting Started」に載っている Claude Code 向けの設定は、次の形です。<API_KEY> の部分に自分のキーを入れます。

{
  "mcpServers": {
    "excalidraw": {
      "type": "http",
      "url": "https://api.excalidraw.com/api/v1/mcp",
      "headers": {
        "Authorization": "Bearer <API_KEY>"
      }
    }
  }
}

キーをファイルに直書きするとリポジトリに入ってしまう危険があります。キーの置き場所の考え方は、こちらにまとめています。

Claude CodeClaude Code/MCPのAPIキー管理｜実務の現実解

ひとつ注意があります。GitHub には excalidraw/excalidraw-mcp という別のリポジトリもあります。こちらは説明に「Fast and streamable Excalidraw MCP App」とあるオープンソースの MCP アプリで、この記事で扱う Excalidraw+ の MCP（edit_scene_content などの道具を持つもの）とは別物です。検索で出てくる記事がどちらの話をしているかを、先に確かめてください。

この記事を読んでいるあなたへ無料プレゼントClaude Codeを「素のまま」使うな設定で差がつく——CLAUDE.md・権限・スキルの実物を公開（全24ページ）

そのまま書き換えて使えるCLAUDE.mdの型お金と送信をAIに触らせない「3段階の柵」1回教えたら何度でも動く、手順書のコピペ雛形

無料でダウンロード

中身のプレビューを見る ↓登録すると、過去の特典もまとめて受け取れます（PDF 19点・合計499ページ ＋ すぐ使えるzip素材 3点）

私たちが出会った6つの癖（2026年9月27〜28日の実測）

私たちは、打ち合わせで伺った業務の流れを「横＝時期、縦＝担当」の表にし、1つの手順を1つの箱にした図を、Claude Code に Excalidraw+ MCP で描かせています。要素は、多い図で250個ほどになります。2026年9月27〜28日に2枚描いたとき、次の6つの癖に出会いました。

いちばん困ったのは1と4です。どちらも「AI が描いた後に、AI 自身の確認では見つからない」型の問題でした。

1は、AI に take_screenshot で全体を確かめさせても「問題ありません」と返ってきました。私がブラウザで開いて初めて、箱の中の文字が右端で切れているのに気づきました。4は、見出しを足したはずなのに画面に無く、AI が「足しました」と言う要素が実際には背景の後ろにありました。消して描き直すと、サーバーがまた空いた番号を割り当てるので、同じ場所に潜ります。

なぜ日本語だけが切れるのか：フォントの代わりの仕組み

日本語でこの切れが起きやすい理由は、Excalidraw のフォントの仕組みから説明がつきます。ここから先は、公開されているソースコードと公式ドキュメントからの私たちの推測を含みます。サーバーの中で実際にどう測っているかは確かめられていないので、推測の部分はそう書きます。

Excalidraw のフォントの番号

Excalidraw の図のデータでは、フォントは番号で保存されます。公式の Scene Content Schema にも「fontFamily は数値の ID で保存する」とあります。番号と名前の対応は、Excalidraw のソースコード（packages/common/src/constants.ts）で次のように決まっています。

私たちは、手書き風ではなく読みやすさを優先して、すべての要素を6（Nunito）で描いています。

日本語の文字は、別のフォントで描かれる

Nunito には日本語の文字が入っていません。足りない文字は、別のフォントで代わりに描かれます。同じ constants.ts の決まりでは、代わりのフォントの並びがフォントによって違います。

• Excalifont（5）：まず Xiaolai（中国語・日本語・韓国語の手書き風フォント）、次に OS の sans-serif、最後に絵文字用のフォント
• それ以外（Nunito など）：OS の sans-serif（等幅のフォントは monospace）、次に絵文字用のフォント

つまり Nunito で書いた日本語は、見る人のパソコンの OS が持っている日本語のフォントで描かれます。Mac と Windows では入っている日本語のフォントが違うので、同じ文字でも描かれる幅が変わりえます。

測る側と描く側がずれると切れる

Excalidraw の図では、文字の要素ごとに幅（width）が保存されます。公式の Scene Content Schema によると、width と height は「描かれる範囲」です。枠の中の文字は、枠に入る幅で折り返されます。

サーバーが測った幅が、ブラウザが実際に描く幅より狭いと、保存された幅に文字が収まりません。私たちの見え方は、この形でした。ここからは推測ですが、サーバーが日本語を測るときのフォントと、見る人のブラウザが代わりに使うフォントが違えば、幅はずれます。

なお、2026年11月5日時点の公式の Tools のページには「サーバーはすべての文字を、どの言語でも実際のフォントで測る」「フォントに無い文字は、ブラウザが代わりに使うフォントで測る」と書かれています。私たちが癖を測ったのは9月末なので、その後に改善された可能性があります。ただし、どのブラウザ・どの OS のフォントを基準にしているかは書かれていません。見る人の環境によってずれが残る可能性はあるので、最後にブラウザで見る手順は外さないほうが安全です。

Excalidraw MCP で日本語の切れを直す手順

私たちが今使っている手順を、順に書きます。新しく描くときも、既存の図を直すときも同じです。

手順1：描く前に、形式の説明を読ませる

Excalidraw+ MCP には、図の書き方を説明する道具（read_diagram_format など）があります。会話で最初に書き込む前に、これを読ませます。MCP 側の案内でも、書き込む前に読むことになっています。

手順2：区画ごとに分けて書き込む

edit_scene_content の1回の呼び出しで、図の全部を描かせないようにしています。私たちは「1回＝1区画」にしています。まとめすぎると失敗しやすく、どこで失敗したかも分かりにくくなります。公式の上限は1回1,000要素ですが、上限まで詰めるより、確かめられる単位で区切るほうが楽です。

手順3：書き込みの返り値の layoutIssues を読む

公式ドキュメントによると、書き込みの道具は、変えた要素にレイアウトの点検をかけて、問題を layoutIssues として返します。点検の対象は、図形からはみ出す文字・単語の途中での改行・矢印やラベルの問題・重なり・フレームの外に出た要素などです。図全体を点検したいときは check_scene_layout を使います。画面に描かずに点検し、約2秒で打ち切ると書かれています。

AI に描かせるときは「書き込みのたびに layoutIssues を読み、残っていれば直してから次の区画へ進む」と指示に入れておくと、見落としが減ります。

手順4：文字の幅を計算し直して update で上書きする

点検で何も出なくても、ブラウザで切れることがありました。そこで私たちは、描き終わった図を get_scene_content で読み出してファイルに保存し、短い Python のスクリプトで文字の幅を計算し直しています。考え方は次のとおりです。

• 1文字ごとに、全角（日本語など）は「文字サイズ×1.0」、半角（英数字など）は「文字サイズ×0.62」として足す
• 行ごとに足し、いちばん長い行の値に「×1.08＋6」をかけて、幅とする
• 枠の中の文字は、「枠の幅−10」を上限にして、枠の中央に寄せる
• 中央揃えの単独の文字は、中心の位置を保ったまま幅だけ直す（癖2）
• 枠の中の文字の色を、濃い色に直す（癖3）
• 今の値と1.5以上違う要素だけを、update に渡すリストに入れる

係数の 1.0・0.62・1.08・6 は、私たちが9月の2枚でブラウザの見え方と合わせた値です。公式の値ではなく、フォントや環境が変われば合わなくなる可能性があります。自分の環境で1枚描いて、ブラウザで確かめてから使ってください。

幅の計算の中心部分だけを抜き出すと、次のようになります。

import unicodedata

def char_w(ch, fs):
    # 全角（W/F/A）は文字サイズ×1.0、半角は×0.62
    if unicodedata.east_asian_width(ch) in ('W', 'F', 'A'):
        return fs * 1.0
    return fs * 0.62

def real_width(text, fs):
    # いちばん長い行の幅 ×1.08 ＋6
    return max(sum(char_w(c, fs) for c in line)
               for line in text.split('\n')) * 1.08 + 6

このスクリプトは、出した JSON をそのまま edit_scene_content の update に渡せる形にしています。正しい要素はリストに入れないので、図を直すたびに何度かけても、正しい所は触りません。あわせて、枠からはみ出す文字・枠に入りきらない行数を報告させ、出た箱は label に改行を入れて直します。

手順5：label を直したら、もう一度かける

癖5のとおり、label を update したり、枠を動かしたり広げたりすると、中の文字の幅がサーバーの測った値に戻りました。直した後は、読み出し→計算→update をもう一度回します。

手順6：最後に人がブラウザで1回見る

take_screenshot で、消えた見出し・箱が無いか、矢印が箱や文字を横切っていないか、区画の外にはみ出していないかを AI に見させます。そのうえで、私がブラウザで1回開きます。私たちが出会った文字の切れは、AI のスクリーンショットには写りませんでした。最後の1回だけは、人の目に残しています。

箱が背景の下に潜るときの直し方（重なり順）

文字の切れと並んで困ったのが、癖4の「潜り込み」です。Excalidraw では、要素の重なり順を index という並べ替え用の文字列で持っています。公式の Scene Content Schema にも「index は重なり順を決める並べ替えのキー」とあります。

私たちの図では、先に大きな区画の背景を描き、その上に見出しや箱を足します。ところがサーバーが空いた index を使い回すため、後から足した要素が背景より下の番号をもらい、背景の後ろに隠れることがありました。

2026年10月15日時点で効かなかったこと

• update で index を指定する：無視され、index_ignored という警告が返りました
• 重なり順を変える zOrder を渡す：私たちの環境の道具の定義には zOrder が無く、文字列として渡って弾かれました
• 消して描き直す：また空いた番号をもらい、同じように潜りました

効いたこと：背景を同じ呼び出しの先頭に入れる

新しく足した要素は上に積まれます。そこで、区画を足すときは、区画の背景をその呼び出しの先頭に入れ、続けて見出しや箱を足すようにしました。こうすると、背景の後に足したものは全部その上に乗ります。この形に変えた日の追加では、潜り込みは0件でした。

あわせて、仕上げのスクリプトで「背景の範囲の中にあって、背景より index が小さい要素」を探して報告させています。見つかったときだけ、背景と帯を最下層へ移すパッチを出す作りです。潜っていない図には手を出しません。

なお、2026年11月5日時点の公式の Tools のページには、edit_scene_content で zOrder による並べ替えができるという記載があります。大きな図では1回に入る zOrder の移動が少なくなり、エラーが上限の数を教えるとも書かれています。私たちが試した10月15日以降に、道具の定義が変わった可能性があります。使う前に、自分の環境で道具の一覧に zOrder があるかを確かめてください。

日本語の図で切れを起こしにくくする描き方

直す手順に加えて、描く段階で決めている数字もあります。私たちの図での値なので、そのまま使うより、自分の図の目安を決めるときの参考にしてください。

1行の字数を先に決めておくと、AI が長い文を1行に詰めることが減ります。指示には「1行は全角12字まで。超えるなら改行を入れる」のように数字で書きます。数字で書いておけば、仕上げのスクリプトで守られたかを機械で確かめられます。

図の見た目を整える考え方全般は、こちらの記事でも書いています。

AIで作る図解のAI感を消す方法｜プロンプト設計

Excalidraw+ MCP を使い始める前に確かめること

文字の切れ以外で、私たちが始める前に知っておきたかったことをまとめます。

キーの種類で、見える図が変わる

公式ドキュメントによると、MCP/API のキーには2種類あります。

• 個人のキー：キーを作った人として動き、その人の個人のコレクションにも触れる。ワークスペースの管理者が設定で許可したあとに、メンバーが作れる。AI を「自分として」動かすときはこちらから始める、と案内されています
• ワークスペースのキー：特定の人ではなくワークスペースとして動き、メンバーの個人のコレクションには触れない。n8n・Zapier・裏で動く処理・共有のボットなど、長く使う連携向け

私たちは、Claude Code に自分の作業として描かせるので、個人のキーにしています。

道具が見えないときは、キーの権限を見る

公式ドキュメントでは、MCP の道具は公開 API と同じ経路の権限で絞り込まれると書かれています。道具が足りないときは、キーにその経路の権限が無いことが多いそうです。権限を直したら、接続し直します。

Claude Code の場合、会話の途中で MCP を登録しても、その会話には道具が出てこないことがありました。登録した後は、Claude Code をいったん終了して、会話を続きから開き直しています。

パブリックベータであること

公式は、道具の名前・形式・振る舞いが変わる可能性があると明記しています。この記事で書いた癖も、すでに直っているものがあるかもしれません。AI に渡す手順書には「いつ、どの癖を確かめたか」の日付を残しておくと、仕様が変わったときに見直す場所が分かります。私たちの手順書にも、癖ごとに確かめた日を書いています。

業務で使って効果があった MCP は、こちらにまとめています。

Claude CodeMCPサーバーおすすめ｜業務で使って効果があったものを厳選紹介

よくある質問

Q1. take_screenshot で問題が無ければ、ブラウザで見なくてもよいですか

私たちはおすすめしません。私たちが9月に出会った文字の切れは、take_screenshot の画像には写らず、ブラウザで開いて初めて分かりました。サーバーの描画と、見る人のブラウザの描画が同じとは限らないためだと考えています。最後の1回は人がブラウザで見るのが確実です。

Q2. フォントを Excalifont（手書き風）にすれば切れませんか

確かめていません。Excalifont では日本語の代わりのフォントとして Xiaolai が先に使われる決まりなので、OS によるずれは小さくなる可能性があります。ただ、手書き風の見た目になり、業務の図としては読みにくくなります。私たちは読みやすさを優先して Nunito（6）を使い、幅の計算で補っています。

Q3. 幅の係数（1.0・0.62・1.08・6）は、どの環境でも使えますか

使える保証はありません。私たちが2026年9月に2枚の図で、ブラウザの見え方と合わせた値です。フォント・文字サイズ・見る人の OS が変われば合わなくなる可能性があります。自分の環境で1枚描き、ブラウザで切れが無くなる値を探してから使ってください。

Q4. 箱が見えなくなったとき、消して描き直せば直りますか

私たちの環境では直りませんでした。サーバーがまた空いた index を割り当てるので、同じように背景の下に潜りました。区画の背景を同じ呼び出しの先頭に入れて描く形にすると、潜り込みは起きませんでした。今の公式ドキュメントには zOrder での並べ替えの記載があるので、道具の一覧に zOrder があれば、それで前に出す方法も試せます。

Q5. GitHub の excalidraw-mcp と同じものですか

別物です。GitHub の excalidraw/excalidraw-mcp は、オープンソースの MCP アプリです。この記事で扱ったのは、Excalidraw+ が api.excalidraw.com で提供している MCP サーバーで、Excalidraw+ のワークスペースと API キーが必要です。

まとめ：AI が描いた図は、AI の確認だけで終わらせない

Excalidraw MCP で日本語が切れるのは、サーバーが測った文字の幅と、ブラウザが代わりのフォントで描く幅がずれるためでした。箱が背景の下に潜るのは、空いた重なり順の番号が使い回されるためでした。どちらも、AI が描いた後に AI 自身の確認では見つかりにくい問題です。

• 書き込みのたびに返る layoutIssues を読み、図全体は check_scene_layout で点検する
• それでも切れるなら、文字の幅を計算し直して update で上書きする。label を直した後もかけ直す
• 区画の背景は、同じ呼び出しの先頭に入れて描く
• 1行の字数を数字で決めて、指示に書く
• 最後に人がブラウザで1回見る

Excalidraw+ MCP はパブリックベータで、この記事の癖も今後変わる可能性があります。株式会社Fyveでは、仕様が変わったと分かった時点で、手順書の日付とあわせて見直していきます。