深度集成Excalidraw与Claude Code：打造智能架构图绘制工作流

在技术文档创作和系统设计过程中，可视化表达往往比纯文字描述更能清晰传递复杂架构。传统绘图工具需要频繁切换上下文，而现代AI辅助绘图方案能够实现"描述即所得"的流畅体验。本文将深入探讨如何通过Claude Code与Excalidraw的深度集成，构建一个智能化的架构图绘制工作环境。

1. 环境准备与工具链配置

1.1 核心组件介绍

构建智能绘图工作流需要三个核心组件协同工作：

• Claude Code：作为主控平台，负责自然语言理解与任务调度
• Excalidraw MCP Server：提供绘图引擎的本地服务
• tech-arch-diagrammer SubAgent：专为技术架构图优化的AI子模块

三者关系如下图所示（概念示意图）：

code复制[用户输入] → [Claude Code] → [SubAgent] → [MCP Server] → [Excalidraw输出]
           ↖_______________↙

1.2 MCP Server配置详解

Excalidraw MCP Server是连接Claude Code与绘图引擎的关键桥梁。配置时需注意以下要点：

1. 全局配置文件位置：

   • Linux/macOS: ~/.claude.json
   • Windows: %USERPROFILE%\.claude.json

2. 典型配置示例：

json复制{
  "mcpServers": {
    "Excalidraw": {
      "command": "npx",
      "args": ["-y", "excalidraw-mcp"],
      "timeout": 30000,
      "autoRestart": true
    }
  }
}

关键参数说明：

3. 健康检查：
   执行claude mcp list应看到类似输出：

code复制Checking MCP server health...
Excalidraw: npx -y excalidraw-mcp - ✓ Connected (v1.2.3)

常见连接问题排查：

• 端口冲突：检查3000端口是否被占用
• 权限问题：确保有执行npx的权限
• 网络限制：某些企业网络可能限制npm包安装

2. SubAgent深度定制

2.1 技术绘图Agent设计原理

优秀的绘图SubAgent需要具备双重能力：

• 技术理解：准确解析架构描述