Draw.io MCP 서버

가장 널리 사용되는 다이어그램 도구인 Draw.io(Diagrams.net)를 사용하여 멋진 다이어그램을 그려보세요.

주요 특징

• XML, SVG(XML 포함), PNG(XML 포함) 형식으로 다이어그램 가져오기 및 내보내기

• 웨이포인트 및 자동 자체 커넥터 라우팅을 통한 엣지 지오메트리 제어

• 중첩된 도형 및 그룹화를 위한 부모-자식 관계 지원

• 동일한 모노레포 내 통합 서버 및 확장 프로그램

• 내장 Draw.io 편집기 - 브라우저 확장 프로그램 불필요

• AI 에이전트가 Draw.io 다이어그램을 제어할 수 있게 해주는 MCP 서버

• MCP 도구를 통한 프로그래밍 방식의 다이어그램 생성, 검사 및 수정

• 복잡한 다이어그램을 위한 레이어 관리

• 모든 MCP 클라이언트(Claude Desktop, Claude Code, Zed, Codex 등)와 호환

소개

Draw.io MCP 서버는 AI 에이전트에게 Draw.io 다이어그램 작성 기능을 제공합니다. 다이어그램 요소를 생성, 읽기, 업데이트 및 삭제할 수 있는 MCP 도구를 제공하여 AI 어시스턴트가 아키텍처 다이어그램, 순서도 및 시각적 문서를 자동으로 작성할 수 있도록 합니다.

사용 방법:

1. 내장 편집기 - 서버가 Draw.io를 직접 호스팅하며 브라우저에서 액세스 가능

2. 브라우저 확장 프로그램 - 확장 프로그램을 통해 브라우저에서 실행 중인 Draw.io에 연결

요구 사항

• Node.js (v20 이상) - MCP 서버를 위한 런타임 환경

• MCP 클라이언트 - Claude Desktop, Claude Code, Zed, Codex, OpenCode 또는 기타 MCP 호환 호스트

내장 편집기 사용 시

추가 요구 사항 없음 - --editor 플래그를 사용하여 즉시 실행 가능.

브라우저 확장 프로그램 사용 시

• 브라우저 확장 프로그램 - drawio-mcp-extension

• 브라우저에서 Draw.io 실행 중

선택 사항

• pnpm - 권장 패키지 관리자 (npm도 사용 가능)

빠른 시작

1. MCP 호스트 구성

MCP 클라이언트 구성에 서버를 추가하세요:

~/Library/Application Support/Claude/claude_desktop_config.json 파일을 편집하세요:

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"]
    }
  }
}

claude mcp add-json drawio '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"]}'

~/.config/zed/settings.json에 추가하세요:

{
  "context_servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"],
      "env": {}
    }
  }
}

~/.codex/config.toml 파일을 편집하세요:

[mcp_servers.drawio]
command = "npx"
args = ["-y", "drawio-mcp-server", "--editor"]

프로젝트 루트 또는 ~/.config/opencode/opencode.json의 opencode.json에 추가하세요:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "drawio": {
      "type": "local",
      "command": ["npx", "-y", "drawio-mcp-server", "--editor"],
      "enabled": true
    }
  }
}

다른 MCP 클라이언트 및 자세한 구성(pnpm 옵션 포함)은 구성을 참조하세요.

2. 편집기 열기

MCP 호스트를 재시작한 후 다음 주소로 접속하세요: http://localhost:3000/

3. 다이어그램 작성 시작

다음과 같은 프롬프트를 시도해 보세요:

"프로듀서, 컨슈머, 3개의 백엔드 서비스가 포함된 메시지 큐를 보여주는 이벤트 기반 아키텍처 다이어그램을 생성해 줘"

"데이터베이스, API 게이트웨이, 4개의 마이크로서비스와 각 엔드포인트가 포함된 CRUD API 다이어그램을 그려 줘"

"'Background'라는 새 레이어를 추가하고 모든 장식 요소를 해당 레이어로 이동한 다음, 주석을 위한 새 레이어를 생성해 줘"

이제 AI 어시스턴트가 MCP 도구를 사용하여 다이어그램을 제어할 수 있습니다.

기능

이 서버는 다음을 위한 MCP 도구를 제공합니다:

• 다이어그램 검사 - 도형, 레이어 및 셀 속성 읽기

• 다이어그램 수정 - 도형, 엣지 및 레이블 추가/편집/삭제

• 레이어 관리 - 레이어 생성, 전환 및 정리

사용 가능한 도구의 전체 목록은 도구 참조를 확인하세요.

설치

서버는 MCP 호스트의 일부로 실행됩니다. npm 및 pnpm 옵션을 포함하여 지원되는 모든 클라이언트(Claude Desktop, Claude Code, Zed, Codex, oterm)에 대한 자세한 구성은 구성에서 확인할 수 있습니다.

대안: 브라우저 확장 프로그램

내장 편집기 대신 브라우저 확장 프로그램을 사용하여 브라우저에서 실행 중인 Draw.io에 연결할 수 있습니다. 이 방법은 --editor 플래그 사용 여부와 관계없이 작동합니다.

1. 브라우저에서 Draw.io 열기

2. Draw.io MCP 브라우저 확장 프로그램 설치:

   • Chrome 웹 스토어

   • Firefox 부가 기능

3. 확장 프로그램이 연결되었는지 확인 (아이콘에 녹색 신호 오버레이 표시)

--editor 없이 구성하는 방법:

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server"]
    }
  }
}

자세한 내용은 확장 프로그램 문서를 참조하세요.

관련 리소스

구성 - CLI 플래그 및 고급 옵션

도구 참조 - 전체 MCP 도구 문서

문제 해결

프롬프트 예시

기여하기

아키텍처

개발

Star 기록

평가