drawio-mcp 사용법, AI로 편집 가능한 draw.io 다이어그램을 만들기

AI 에이전트가 draw.io 다이어그램을 만들고 편집할 수 있도록 연결하는 오픈소스 MCP 도구, ‘drawio-mcp’가 공개됐습니다.

drawio-mcp를 활용하면 시스템 구조나 업무 흐름, API 호출 관계처럼 여러 요소가 얽힌 내용을 텍스트만으로 설명하면 중요한 연결이나 예외 상황도 AI 에이전트를 통해  draw.io에서 열어 수정할 수 있는 다이어그램으로 정리할 수 있습니다.

이 글에서는 drawio-mcp의 작동 방식과 Codex CLI 연동 방법, 활용할 수 있는 다이어그램 유형, 사용 전 알아둘 점을 살펴보겠습니다.

drawio-mcp 핵심 요약

• drawio-mcp는 Codex CLI, Claude Code, GitHub Copilot에 플러그인으로 제공됩니다. 그 밖의 MCP 지원 AI 도구에서는 MCP 앱 서버 또는 MCP 도구 서버 방식으로 연결해 사용할 수 있습니다. 
• AI가 draw.io 다이어그램을 생성합니다. 시스템 구성도, 업무 흐름도, UML, 클라우드 아키텍처 등 다양한 형태를 만들 수 있습니다.
• 생성 후에도 직접 수정할 수 있습니다. 결과물을 .drawio 파일로 저장하므로 draw.io 편집기에서 노드, 연결선, 텍스트를 수정할 수 있습니다.
• 다양한 형식과 도형을 활용할 수 있습니다 MCP 도구 서버는 XML뿐 아니라 Mermaid와 CSV 데이터를 draw.io 다이어그램으로 열 수 있습니다. 

drawio-mcp란?

drawio-mcp는 AI가 draw.io 다이어그램을 만들고 열 수 있도록 연결해 주는 오픈소스 도구입니다. 업무 흐름, 시스템 구조, API 호출 관계처럼 글이나 코드만으로 이해하기 어려운 내용을 AI에게 요청하면, draw.io에서 열어 수정할 수 있는 다이어그램으로 만들 수 있습니다.

Codex CLI·Claude Code·GitHub Copilot에서는 플러그인 방식으로 사용할 수 있으며, 그 밖의 MCP 지원 도구에서는 MCP 앱 서버나 도구 서버로 연결할 수 있습니다. 생성 결과는 채팅 안에서 미리 보거나 .drawio 파일로 저장해 팀 문서와 함께 관리할 수 있습니다.

drawio-mcp가 주목받는 이유

1. AI가 만든 다이어그램을 다시 편집할 수 있습니다

AI에게 다이어그램을 요청하면 이미지 파일만 받는 경우가 많습니다. 흐름이 바뀌거나 서비스가 추가되면 이미지를 다시 생성하거나 별도 편집 도구에서 처음부터 수정해야 합니다.

drawio-mcp는 .drawio 파일을 생성합니다. 생성된 파일은 draw.io에서 열어 텍스트, 도형, 화살표, 색상, 배치를 수정할 수 있습니다.

기획 초기에는 AI로 초안을 만들고, 실제 프로젝트 구조에 맞춰 개발자와 기획자가 함께 보완하는 방식으로 활용할 수 있습니다.

2. 업무 환경에 맞는 연결 방식을 선택할 수 있습니다

drawio-mcp는 하나의 설치 방식만 제공하지 않습니다. 대화 화면 안에서 다이어그램을 확인하는 MCP 앱 서버, 브라우저에서 draw.io 편집기를 여는 MCP 도구 서버, 파일을 만드는 에이전트 플러그인 방식을 제공합니다.

Claude.ai나 Cursor처럼 MCP Apps를 지원하는 환경에서는 다이어그램을 대화 안에서 확인할 수 있습니다. 로컬 작업 환경에서는 @drawio/mcp 도구 서버나 에이전트 플러그인을 통해 파일을 생성하고 편집기로 열 수 있습니다.

AI 에이전트가 사용하는 환경과 결과물을 공유하는 방식에 따라 연결 방법을 선택해야 합니다.

3. 시스템 구성도부터 업무 흐름도까지 만들 수 있습니다

drawio-mcp는 기본 도형만 사용하는 흐름도 외에도 AWS, Azure, GCP, Kubernetes, Cisco, UML, BPMN 등 다양한 도형 라이브러리를 검색할 수 있도록 지원합니다.

개발자는 서비스 의존성이나 API 호출 흐름을, 기획자는 사용자 여정과 승인 프로세스를, 운영팀은 장애 대응 절차를 다이어그램으로 정리할 수 있습니다.

drawio-mcp를 Codex CLI에 연결하는 방법

* 이미지 출처: draw-mcp 깃허브 공식 저장소

drawio-mcp는 Codex CLI, Claude Code, GitHub Copilot용 플러그인을 제공하며, MCP를 지원하는 Claude Desktop·Cursor·VS Code 등 다른 AI 도구와도 서버 방식으로 연결할 수 있습니다.

drawio-mcp 설치 명령어

• Codex CLI

• 마켓 플레이스 등록: codex plugin marketplace add jgraph/drawio-mcp
• 플러그인 설치: codex plugin add drawio@drawio

• Claude Code

• 마켓 플레이스 등록: /plugin marketplace add jgraph/drawio-mcp
• 플러그인 설치: /plugin install drawio@drawio

• GitHub Copilot CLI

• 마켓 플레이스 등록: copilot plugin marketplace add jgraph/drawio-mcp
• 플러그인 설치: copilot plugin install drawio@drawio

drawio-mcp를 설치하기 위해서는 먼저 마켓 플레이스에 등록한 뒤 플러그인을 설치해야합니다. 사용을 원하는 AI 에이전트의 환경에서 위의 명령어를 참고해 설치를 진행합니다. 

아래 예시는 Codex에서 설치 예시입니다.

먼저 터미널에서 위의 명령어를 입력해 플러그인 마켓플레이스를 등록합니다.

다음으로 위의 명령어를 입력해 draw.io 플러그인을 설치합니다.

설치가 끝나면 CodexI 플러그인 목록에 draw.io가 추가된 것을 볼 수 있습니다.

drawio-mcp로 다이어그램 생성하기

Codex에서 drawio-mcp를 사용해 주문 취소 과정에서 발생한 환불 안내 오류를 다이어그램으로 생성해보겠습니다 상황은 아래와 같습니다.

다이어그램 생성 구현 상황

고객이 주문 취소를 요청한 뒤 결제 대행사 타임아웃이 발생했습니다. 주문 상태는 cancelled로 변경됐지만 환불 상태는 refund_pending으로 남았고, 고객에게는 환불 완료 이메일이 발송됐습니다.

Codex에서 drawio-mcp를 사용해 주문 취소와 환불 안내 오류를 공유하기 위한 다이어그램을 생성해보겠습니다. 사용한 프롬프트는 아래와 같습니다.

다이어그램 생성 프롬프트

다이어그램 생성 결과

drawio-mcp를 사용해 다이어그램 생성을 요청하면 프롬프트에 맞춰 로직을 확인한 뒤 drawio 앱으로 확인 가능한 drawio 파일로 다이어그램 파일을 생성합니다. 

파일을 열어보면 요청 상황의 로직에 맞춰 다이어그램이 생성된 것을 확인할 수 있습니다.

drawio-mcp, 이럴 때 사용하세요

장애 원인이나 예외 흐름을 비개발자와 함께 확인해야 할 때

주문 취소·환불처럼 여러 서비스와 상태가 얽힌 문제는 코드만으로 공유하면 원인과 영향 범위를 파악하기 어렵습니다. 

drawio-mcp로 요청부터 상태 저장, 이메일 발송까지를 시퀀스 다이어그램으로 만들면 어느 단계에서 값이 달라졌는지와 잘못된 안내가 발송되는 조건을 함께 살펴볼 수 있습니다. 

CS·기획·개발팀이 같은 흐름을 보며 대응 방향을 논의하기에도 좋습니다. 

클라우드·인프라 구조를 표준 아이콘으로 표현해야 할 때

클라우드 환경은 서버, 데이터베이스, 네트워크, 보안 구성이 여러 계층으로 연결돼 있어 일반 도형만으로 역할을 구분하기 어렵습니다. 

drawio-mcp는 AWS, Azure, GCP, Kubernetes, Cisco 등 분야별 도형을 활용할 수 있어, 서비스가 어느 네트워크와 자원에 배치됐는지, 요청이 어디를 거치는지 보여주는 인프라 구성도를 만들 수 있습니다. 

Mermaid나 CSV로 관리하던 정보를 

편집 가능한 다이어그램으로 바꾸고 싶을 때

Mermaid 코드나 CSV 데이터는 변경 이력을 관리하기 좋지만, 회의나 보고에서 관계를 한눈에 확인하기에는 다소 불편할 수 있습니다. 

drawio-mcp는 Mermaid와 CSV를 draw.io 다이어그램으로 열 수 있어, 조직 구조·업무 흐름·시스템 관계를 시각적으로 검토한 뒤 필요한 노드나 연결선을 직접 손볼 수 있습니다.

drawio-mcp 사용 시 주의사항 4가지

1. 사용하는 AI 환경에 맞는 연결 방식을 선택해야 합니다

MCP 앱 서버, MCP 도구 서버, 에이전트 플러그인은 결과를 보여주는 방식과 설치 조건이 다릅니다. 대화 안에서 미리 보기만 필요한지, 로컬 draw.io 파일을 만들어 편집할지 먼저 결정해야 합니다.

3. PNG·SVG·PDF 내보내기에는 draw.io Desktop이 필요할 수 있습니다

플러그인 방식에서 PNG, SVG, PDF 파일로 내보내려면 로컬 draw.io Desktop CLI가 필요할 수 있습니다. Desktop 앱이 없으면 .drawio 파일만 생성되고 내보내기 기능은 제한될 수 있습니다.

4. 민감한 구조 정보는 전송 경로를 확인해야 합니다

호스팅된 MCP 앱 서버를 사용하면 다이어그램 데이터가 draw.io 서버로 전달될 수 있습니다. 로컬 도구 서버와 플러그인 방식은 로컬 파일 생성에 적합하지만, AI 모델 자체가 외부 서비스라면 프롬프트 내용은 모델 제공자에게 전달될 수 있습니다.

AI 에이전트로 생산성을 올리는 활용법 콘텐츠 3가지

Graft란? AI 코딩 에이전트의 코드 탐색 시간을 줄여주는 오픈소스 도구

Superpowers 사용법, 깃허브 27만 스타의 AI 에이전트 스킬 활용하기

Paseo란? AI 코딩 에이전트를 원격으로 관리하는 오픈소스 워크스페이스 사용법

AI 에이전트 기반 개발 환경 구축,

검증된 IT 프리랜서와 시작하세요.

대한민국 최대 IT 프리랜서 매칭 플랫폼 이랜서

이랜서는 27년간 삼성 · 현대 · SK · 카카오 등 주요 기업에 매칭하며 축적한 8만 건 이상의 IT 프리랜서 매칭 데이터를 바탕으로, AI 에이전트 시스템 구축 경험과 클라우드 실무 역량을 갖춘 검증된 전문가를 매칭합니다.

단순 이력서 연결이 아닌, 프로젝트 성격과 기술 스택, 활용 모델, 협업 방식까지 고려한 정밀 매칭으 98%의 재의뢰율을 달성하고 있습니다.

AI 에이전트 기반 개발 환경을 기획부터 구축, 운영 자동화까지 안정적으로 추진하세요. 프로젝트에 적합한 AI 전문 프리랜서를 24시간 내, 매칭해 드립니다.