TL;DR

이 레포지토리는 LLM이 생성한 다이어그램을 draw.io로 연동하는 공식 MCP 서버와 플러그인 모음으로, 채팅 내 인라인 렌더링이 필요한 경우 호스티드 App Server를, 로컬 편집과 포맷 다양성이 필요하면 Tool Server 또는 어시스턴트 플러그인을 선택하면 효율적입니다. 데이터 유출 우려가 있으면 자체 호스트 또는 로컬 플러그인 방식을 사용하면 다이어그램 본문을 외부로 보내지 않을 수 있으며, 뷰어 코드 로딩까지 차단하려면 추가 환경변수 설정이 필요합니다. 빠른 시험은 npx @drawio/mcp 또는 하위 디렉토리에서 npm start로 가능하고, shape-search 인덱스 갱신과 레이아웃 옵션(ELK, libavoid)이 통합 워크플로우를 보완합니다. 사용하려는 호스트(MCP Apps 지원 여부)와 보안 정책에 따라 즉시 도입하거나 자체 호스트로 배포하는 두 가지 경로가 현실적입니다.

핵심 포인트

• 이 저장소는 MCP(Model Context Protocol) 생태계에서 동작하는 MCP 서버와 AI 어시스턴트용 플러그인 모음으로, App Server(호스티드 또는 자체 호스트), Tool Server(npm 패키지), 코딩 어시스턴트용 플러그인들, 그리고 설치 불필요한 Project 지침의 네 가지 통합 방식을 제공하고 있습니다. 각 방식은 Claude, Cursor, VS Code/GitHub Copilot 같은 특정 MCP 호스트들과 직접 연동하는 설계로, 사용 환경에 따라 인라인 렌더링, 브라우저 편집기 열기, 또는 로컬 .drawio 파일 생성이라는 서로 다른 출력 경로를 선택할 수 있게 구현되어 있습니다. 따라서 채팅 내 즉시 미리보기가 필요하거나 로컬 편집·내보내기 정책을 중시하는 워크플로우에 맞춰 적절한 방식을 선택하면 통합 시간이 크게 단축될 가능성이 높습니다.
• 기능 측면에서는 XML, CSV, Mermaid 입력 포맷을 지원하고 출력은 인라인 인터랙티브 뷰어, draw.io 편집기 탭 오픈, 또는 네이티브 .drawio 파일과 PNG/SVG/PDF 내보내기 등으로 다양하게 제공됩니다. 핵심 툴로는 draw.io XML을 채팅 내에 렌더링하는 create_diagram과 10,000개 이상의 도형을 키워드로 검색해 XML 스타일 문자열을 반환하는 search_shapes가 포함되어 있어 LLM이 올바른 도형을 찾아 자동으로 다이어그램을 생성하는 과정이 원활하게 이어집니다. 또한 생성 후 자동 레이아웃(ELK)과 커넥터 재라우팅(libavoid) 같은 후처리 옵션을 도입해 노드 재배열이나 연결선 정리를 선택적으로 적용할 수 있도록 설계되어 있습니다.
• 데이터 레지던시와 오프라인 사용에 대한 제어가 명확하게 문서화되어 있어 보안 요구사항이 있는 환경에서 유용합니다. 호스티드 App Server(mcp.draw.io)를 그대로 쓰면 다이어그램 내용이 draw.io 서버로 전송되지만, 자체 호스트(Node.js 또는 Cloudflare Workers)로 배포하면 클라이언트 측으로 HTML을 전달해 외부 전송을 차단할 수 있습니다. Tool Server는 URL fragment로 다이어그램을 전달하고 플러그인은 로컬에 .drawio 파일을 쓰고 로컬 draw.io Desktop CLI로만 내보내기를 수행하므로, 완전한 오프라인 작업을 원할 때는 이들 방식을 권장할 수 있습니다.
• 개발자 경험은 빠른 시작과 확장성을 모두 고려하고 구성되어 있습니다. 로컬에서 빠르게 시험하려면 npx @drawio/mcp로 Tool Server를 실행하거나 mcp-app-server와 mcp-tool-server 하위 폴더에서 npm install 후 npm start로 개발 서버를 띄울 수 있고, 검색 색인(shape-search/search-index.json)은 레포지토리에 커밋되어 있으며 draw.io 릴리스마다 GitHub Action으로 자동 갱신됩니다. 색인 재생성, 뷰어 인라인, 혹은 DRAWIO_BASE_URL 등 환경변수로 외부 요청을 줄이는 방법이 문서화되어 있어 보안과 배포 요구사항에 맞춰 설정을 변경하면서 통합할 수 있습니다.