next-ai-draw-io

Next AI Draw.io
AI와 대화하며 draw.io 다이어그램을 그리고 편집하세요.

English | 中文 | 日本語

라이브 데모 · 문서 · 갤러리 · 데스크톱 앱 · MCP 서버

promo-web.mp4

한 문장으로 다이어그램을 설명하면 AI가 실제 draw.io 캔버스 위에 그려 줍니다. 일반 draw.io 파일처럼 직접 편집하거나, 도형 몇 개를 선택해 AI에게 무엇을 바꿀지 말할 수 있습니다. 모든 AI 변경은 비교하고 복원하거나 되돌릴 수 있는 버전으로 남으며, 결과물은 .drawio, .png 또는 .svg로 내보낼 수 있습니다.

웹 앱, Windows·macOS·Linux용 데스크톱 앱, 그리고 Claude Code, Cursor, VS Code 같은 AI 에이전트를 위한 MCP 서버로 제공됩니다.

주요 기능
그리기

한 문장으로 아키텍처 다이어그램, 순서도, 시퀀스 다이어그램 등을 그리며, AWS, Azure, GCP, Kubernetes 아이콘 라이브러리가 내장되어 있습니다
커넥터에 흐르는 애니메이션을 적용할 수 있습니다
스크린샷이나 스케치를 업로드하면 AI가 다시 그려 주며, PDF, Markdown, 코드 등 텍스트 파일을 업로드하면 그 내용을 다이어그램으로 만들어 줍니다

편집

채팅으로 편집: 변경 사항이 캔버스에 스트리밍되고 AI가 방금 바꾼 도형이 강조 표시됩니다
선택 영역에 대해 질문: 캔버스에서 도형을 선택하면 AI가 해당 도형만 변경합니다
버전과 실행 취소: 모든 AI 변경은 썸네일이 있는 버전 카드로 남으며, 캔버스와 비교하고 복원하거나 되돌릴 수 있습니다. 캔버스에서 Ctrl+Z를 눌러도 AI 변경이 한 번에 취소됩니다
일반적인 draw.io 다이어그램입니다: 더블클릭으로 이름 변경, 드래그, 스타일 변경, 여러 페이지 사용이 가능하며 언제든지 .drawio, .png, .svg 또는 .drawio.svg로 내보낼 수 있습니다

사용

OpenAI 호환 프리셋을 포함해 다른 URL에도 쓸 수 있는 25개 모델 제공자; 브라우저에 직접 API 키를 입력하면 키는 사용자의 기기에만 남습니다
추론하는 모델은 사고 과정을 표시합니다
다크 모드; 인터페이스는 영어, 중국어 간체, 중국어 번체, 일본어로 제공됩니다

예시

AWS의 고가용성 웹 앱

프롬프트: 두 개의 가용 영역에 걸친 고가용성 웹 앱을 위한 AWS 아키텍처를 AWS 아이콘으로 그려 줘: Route 53, AWS WAF가 붙은 CloudFront, Application Load Balancer, 프라이빗 서브넷의 ECS Fargate 서비스, writer와 reader가 있는 Aurora PostgreSQL, Redis용 ElastiCache, 정적 자산용 S3, NAT 게이트웨이, 모니터링용 CloudWatch.

모델: Claude Opus 5.5, MCP 서버와 함께 Claude Code에서

웹 숍을 위한 Kubernetes 배포

프롬프트: 웹 숍을 위한 Kubernetes 배포를 그려 줘: 인그레스, 서비스와 파드가 있는 웹 및 API 디플로이먼트, 영구 볼륨이 있는 Redis StatefulSet, ConfigMap, Secret, 그리고 API에 대한 오토스케일러.

모델: Claude Opus 5.5, MCP 서버와 함께 Claude Code에서

온라인 숍의 ER 다이어그램

프롬프트: 온라인 숍의 ER 다이어그램을 그려 줘: 고객, 주소, 주문, 주문 항목, 상품, 카테고리, 결제를 포함하고, 기본 키와 외래 키, 각 관계의 카디널리티를 표시해 줘.

모델: Claude Opus 5.5, MCP 서버와 함께 Claude Code에서

BPMN 경비 청구 프로세스

프롬프트: 경비 청구를 위한 BPMN 프로세스를 그려 줘: 직원이 제출하고, 관리자가 승인하거나 반려하며, 재무팀이 영수증을 확인하고 지급하고, 영수증이 없으면 청구가 직원에게 돌아가.

모델: Claude Opus 5.5, MCP 서버와 함께 Claude Code에서

애니메이션 커넥터가 있는 Transformer 아키텍처

프롬프트: transformer 아키텍처의 애니메이션 커넥터 다이어그램을 만들어 줘.

모델: Claude Opus 5.5, MCP 서버와 함께 Claude Code에서

모바일 뱅킹 앱의 고객 여정 맵

프롬프트: 모바일 뱅킹 앱의 고객 여정 맵을 다섯 단계(발견, 가입, 첫 결제, 일상 사용, 도움 받기)에 걸쳐 그려 줘. 각 단계에 고객의 행동, 접점, 감정, 불편 사항을 담고, 각 불편 사항에 대한 개선 기회를 표시해 줘.

모델: Claude Opus 5.5, MCP 서버와 함께 Claude Code에서

프롬프트와 모델이 함께 표시된 더 많은 예시는 갤러리에서 확인할 수 있습니다.

사용 방법
온라인 데모
next-ai-drawio.jiang.jp를 열면 설치할 것이 없습니다. 데모에는 사용 한도가 있으며, 채팅 패널의 설정 아이콘을 클릭해 자신의 제공자와 API 키를 입력하면 한도가 해제됩니다. 키는 브라우저에 남으며 저장을 위해 서버로 전송되지 않습니다.

데스크톱 앱
Releases 페이지에서 Windows, macOS 또는 Linux 설치 파일을 다운로드하세요.

AI 에이전트에서 (MCP)

mcp-promo-v10-720p.mp4

MCP(Model Context Protocol, AI 에이전트가 외부 도구를 호출할 때 쓰는 프로토콜)를 통해 Claude Desktop, Cursor, VS Code 등에서 draw.io 다이어그램을 직접 그릴 수 있습니다. 클라이언트의 MCP 설정에 다음을 추가하세요:

{
"mcpServers" : {
"drawio" : {
"command" : " npx " ,
"args" : [ " @next-ai-drawio/mcp-server@latest " ]
}
}
}
VS Code나 Cursor에서는 클릭 한 번으로 추가할 수 있습니다:

Claude Code에서는 명령 하나면 됩니다(--scope user를 붙이면 모든 프로젝트에서 사용할 수 있습니다):

claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest
Claude Code 커뮤니티 마켓플레이스의 플러그인이기도 합니다(Claude Code 2.1.275 이상):

/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-community

그런 다음 AI에게 "로그인, MFA, 세션 관리가 있는 사용자 인증 순서도"를 요청하면 다이어그램이 그려지는 대로 브라우저에 나타납니다. MCP 서버는 웹 앱의 그리기 기능 대부분을 갖추고 있습니다:

웹 앱과 동일한 그리기 규칙, 아이콘 라이브러리(AWS, Azure, GCP, Kubernetes 등), 캔버스: AI의 변경이 윤곽선으로 표시되고 Ctrl+Z 한 번으로 되돌릴 수 있으며, AI가 선택한 도형을 읽습니다
스크린샷 도구가 있어 AI가 렌더링된 다이어그램을 보고 수정합니다
버전 기록, 여러 페이지, .drawio, .png, .svg 또는 .drawio.svg로 내보내기, ~/.next-ai-drawio/에 자동 저장; draw.io 편집기가 패키지에 포함되어 있어 미리보기가 오프라인에서도 작동합니다

MCP 서버 페이지에는 Codex, VS Code, Cursor 및 기타 클라이언트 설정, 모든 도구, 다른 draw.io MCP 서버와의 비교가 있습니다.

draw.io 내장 AI와의 비교
draw.io에는 자체 Generate 도구가 있습니다(Arrange > Insert > Generate). 이 도구는 draw.io 안에서 무료 호스팅 모델이나 자신의 API 키로 실행되며, 채팅에 첨부한 다이어그램, 페이지 또는 선택 영역을 변경할 수 있습니다. Next AI Draw.io는 직접 편집한 내용을 포함한 현재 캔버스를 모든 메시지와 함께 전송하고, 모든 AI 변경을 비교하거나 복원할 수 있는 버전으로 만들며, Ollama를 통한 로컬 모델을 포함한 25개 제공자와 함께 데모 사이트, 데스크톱 앱 또는 자체 서버에서 작동합니다.

셀프 호스팅
로컬에서 실행
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local # 제공자와 API 키를 추가하세요. 아래 "모델과 제공자" 참고
npm run dev
http://localhost:6002 를 여세요.

원클릭 배포

플랫폼
방법

Tencent EdgeOne Pages
여기에 배포하면 DeepSeek 모델의 일일 무료 할당량도 제공됩니다

Vercel
.env.local과 동일한 환경 변수를 Vercel 대시보드에 설정하세요

Cloudflare Workers
Cloudflare 배포 가이드

Docker
Docker 가이드

오프라인 또는 인트라넷
오프라인 배포

모델과 제공자
25개 제공자가 지원됩니다: AWS Bedrock(기본값), OpenAI, Anthropic, Google AI, Google Vertex AI, Azure OpenAI, Ollama, OpenRouter, AIHubMix, DeepSeek, SiliconFlow, SGLang, Vercel AI Gateway, Tencent EdgeOne, ByteDance Doubao, ModelScope, Zhipu GLM, Qwen, Qiniu, Kimi, MiniMax, Novita, Xiaomi MiMo, Atlas Cloud, 그리고 다른 URL(vLLM, LM Studio, 게이트웨이)을 위한 OpenAI 호환 프리셋. 각 제공자의 환경 변수와 참고 사항은 제공자 구성 가이드에 있습니다.

어떤 모델을 선택할까: 이 작업은 엄격한 형식(draw.io XML)의 긴 텍스트를 생성하는 일이므로 성능이 좋은 모델을 선택하세요. 작은 모델은 깨진 다이어그램을 만들기 쉽습니다.

여러 모델과 관리자 패널: AI_MODEL에 여러 모델 ID를 쉼표로 구분해 나열하거나, AI_MODELS_CONFIG 환경 변수 또는 ai-models.json 파일로 여러 제공자의 모델을 구성하면 모든 사용자가 자신의 키 없이 사용할 수 있습니다. ADMIN_PASSWORD를 설정하고 /admin을 열면 웹 페이지에서 모델, 액세스 코드, 기능 스위치, 관측성, 할당량을 관리할 수 있습니다. 자세한 내용은 관리자 패널 가이드를 참고하세요.

지원

질문과 아이디어: GitHub 이슈를 열거나 me[at]jiang.jp로 이메일을 보내 주세요
자주 묻는 문제: FAQ
프로젝트가 유용하다면 데모 사이트 운영을 이어갈 수 있도록 후원을 고려해 주세요