前言

分享如何在 Claude Code CLI 中使用 draw.io MCP 服务器创建、编辑和导出流程图

目录

  1. 架构概述
  2. 环境准备
  3. 配置步骤
  4. 基础使用
  5. 进阶技巧
  6. 常见问题

架构概述

两种集成方式对比

方式 命令 适用场景 复杂度
Skill 方式 /skill install drawio 快速开始，一键安装 ⭐ 简单
MCP 方式 编辑 settings.json 自定义配置，多环境部署 ⭐⭐ 中等

系统架构图

┌─────────────────┐     ┌──────────────┐     ┌─────────────────┐
│   Claude Code   │────▶│  drawio-mcp  │────▶│  Draw.io Server │
│    CLI 工具     │     │   MCP服务     │     │  (本地:6002)     │
└─────────────────┘     └──────────────┘     └─────────────────┘
        │                                                │
        │  方式1: Skill 命令                              │
        │  /skill install drawio                         ▼
        │                                       ┌─────────────────┐
        │                                       │    浏览器窗口    │
        │                                       │  (实时预览编辑)   │
        │                                       └─────────────────┘
        │
        │  方式2: MCP 配置
        │  settings.json 配置
        │
        ▼
┌─────────────────┐
│   MCP Server    │
│  (npx 启动)     │
└─────────────────┘

工作流程：

……

阅读全文