テキストの記述をライブエキシャルドローキャンバスにプロ図に変換します。 自分のAIエージェントが描画し、自分の仕事をスクリーンショット化し、右に見えるまで反復します。

取得する

• 10の視覚技術 --花、色分けされた地帯、限界の矢、決定ノード、壷の階層、皮色および多く
• 自己補正図 – エージェントは、スクリーンショットを介して独自のキャンバスを表示し、問題を自動的に修正します
• レイアウトのベストプラクティス – ルール、矢印ルーティング、実際に動作するゾーンラベルの間隔
• 品質チェックリスト – 輸出する前に、トランク、重複、および悪い矢印をキャッチ -複数のエクスポート - PNG、SVG、.excalidraw(再編集可能)、または共有URL

前提条件

Excalidraw MCP サーバーをインストールして実行する必要があります。

##1. MCPサーバーのクローンとビルド

##2. クロードコードに追加

[/absolute/path/to/]をリポをクローンした場所に置換します。

##3. キャンバスを始める

お使いのブラウザで[http://localhost:3000を開き、ライブキャンバスを表示します。

スキルのインストール

または手動で:プロジェクトの[[.claude/skills/excalidraw/SKILL.md]を[.claude/skills/excalidraw/]フォルダにコピーします。

試してみる

MCP サーバーが実行されると、スキルがインストールされます

Excalidraw Skill for Claude Code

Turn text descriptions into professional diagrams on a live Excalidraw canvas. Your AI agent draws, screenshots its own work, and iterates until it looks right.

What You Get

• 10 visual techniques – glow effects, color-coded zones, bound arrows, decision nodes, font hierarchy, semantic colors, and more
• Self-correcting diagrams – the agent sees its own canvas via screenshots and fixes issues automatically
• Layout best practices – spacing rules, arrow routing, zone labels that actually work
• Quality checklist – catches truncation, overlap, and bad arrows before you export
• Multiple exports – PNG, SVG, .excalidraw (re-editable), or shareable URL

Prerequisites

You need the Excalidraw MCP server installed and running.

1. Clone and build the MCP server

git clone https://github.com/yctimlin/mcp_excalidraw && cd mcp_excalidraw
npm ci && npm run build

2. Add to Claude Code

claude mcp add excalidraw -s user \
  -e EXPRESS_SERVER_URL=http://localhost:3000 \
  -- node /absolute/path/to/mcp_excalidraw/dist/index.js

Replace /absolute/path/to/ with wherever you cloned the repo.

3. Start the canvas

cd /path/to/mcp_excalidraw
PORT=3000 npm run canvas

Open http://localhost:3000 in your browser to see the live canvas.

Install the Skill

claude skill add --url https://raw.githubusercontent.com/robonuggets/excalidraw-skill/main/.claude/skills/excalidraw/SKILL.md

Or manually: copy .claude/skills/excalidraw/SKILL.md into your project’s .claude/skills/excalidraw/ folder.

Try It

Once the MCP server is running and the skill is installed:

• “Draw an architecture diagram for a web app with a load balancer, two servers, and a database”
• “Create a flowchart showing user authentication with success and failure paths”
• “Make a comparison diagram: monolith vs microservices”

Visual Techniques Included

Known Limitations

• Images: Can’t be added via MCP – drag them into the browser manually
• Freedraw: Draw freehand in the browser, not via MCP
• SVG import: Use the browser’s native paste feature

License

MIT