GitHub 저장소를 인터랙티브 아키텍처 다이어그램이나 1분 분량의 내레이션 설명 영상으로 바꾸고, AI 에이전트용 MCP 서버도 제공합니다.
DayuanJiang/next-ai-draw-io
AI 모델과 자연어로 대화하며 draw.io 다이어그램을 만들고 편집하는 웹·데스크톱 앱 및 MCP 도구입니다.
대체할 수 있는 제품:Lucidchart
- 스타
- 36,331
- 포크
- 3,848
- 열린 이슈
- 38
- 마지막 커밋
- 어제
어떤 프로젝트인가요?
Next AI Draw.io에서는 다이어그램을 일상적인 문장으로 설명하면 AI 모델이 draw.io 캔버스에 직접 그려 줍니다. 일반 draw.io 파일처럼 직접 편집할 수도 있고, 도형을 선택해 해당 도형만 AI에게 수정하도록 요청할 수도 있습니다. AI가 변경할 때마다 새 버전으로 저장되므로 버전을 비교하거나 복원하고 실행 취소할 수 있으며, 다이어그램은 .drawio, .png, .svg 형식으로 내보낼 수 있습니다.
이 프로젝트는 웹 앱, Windows·macOS·Linux용 데스크톱 앱, 그리고 Claude Code, Cursor, VS Code 같은 에이전트가 다이어그램을 그릴 수 있도록 해 주는 MCP 서버로 제공됩니다. Bedrock, OpenAI, Anthropic, Ollama 및 OpenAI 호환 엔드포인트를 포함해 25개 모델 제공자를 지원하며, API 키는 브라우저에 보관됩니다. 로컬, Vercel, Cloudflare Workers 또는 Docker에서 자체 호스팅하거나 오프라인으로 배포할 수 있습니다.
핵심 기능
- 01한 문장으로 아키텍처 다이어그램, 플로차트, 시퀀스 다이어그램을 생성하며 AWS, Azure, GCP, Kubernetes 아이콘 라이브러리를 제공합니다.
- 02채팅으로 기존 다이어그램을 편집하고 AI가 변경한 도형을 강조 표시합니다.
- 03캔버스에서 선택한 도형만 AI가 수정하도록 할 수 있습니다.
- 04AI 변경 내역을 썸네일과 함께 버전 기록으로 보관하고, 버전 비교·복원·실행 취소를 지원합니다.
- 05.drawio, .png, .svg, .drawio.svg 형식으로 내보낼 수 있습니다.
- 06웹 앱, 데스크톱 앱 또는 Claude Code, Cursor, VS Code용 MCP 서버로 사용할 수 있습니다.
활용 사례
- 설계 리뷰 중 문서로 설명한 내용을 바탕으로 클라우드 아키텍처 다이어그램을 빠르게 작성합니다.
- 스크린샷이나 스케치를 편집 가능한 draw.io 다이어그램으로 변환합니다.
- 에디터에서 작업하는 동안 AI 코딩 에이전트가 다이어그램을 만들고 확인하도록 합니다.
- Ollama를 통해 로컬 모델로 다이어그램을 그려 오프라인 또는 인트라넷 환경에서 사용합니다.
빠른 시작
- 1
저장소를 클론합니다
git clone https://github.com/DayuanJiang/next-ai-draw-io - 2
프로젝트 폴더로 이동합니다
cd next-ai-draw-io - 3
종속성을 설치합니다
npm install - 4
env 파일을 복사하고 프로바이더와 API 키를 추가한 다음, 개발 서버를 시작하고 localhost:6002를 엽니다
cp env.example .env.local
사용 전 알아둘 점
- 소형 모델은 다이어그램을 제대로 생성하지 못하는 경우가 많으므로 성능이 충분한 모델이 필요합니다.
- 직접 실행하려면 모델 프로바이더와 API 키를 설정해야 합니다.
토픽
자주 묻는 질문
- next-ai-draw-io은(는) 무엇인가요?
- AI 모델과 자연어로 대화하며 draw.io 다이어그램을 만들고 편집하는 웹·데스크톱 앱 및 MCP 도구입니다. Next AI Draw.io에서는 다이어그램을 일상적인 문장으로 설명하면 AI 모델이 draw.io 캔버스에 직접 그려 줍니다. 일반 draw.io 파일처럼 직접 편집할 수도 있고, 도형을 선택해 해당 도형만 AI에게 수정하도록 요청할 수도 있습니다. AI가 변경할 때마다 새 버전으로 저장되므로 버전을 비교하거나 복원하고 실행 취소할 수 있으며, 다이어그램은 .drawio, .png, .svg 형식으로 내보낼 수 있습니다.
- next-ai-draw-io은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- next-ai-draw-io은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- next-ai-draw-io은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. next-ai-draw-io의 마지막 커밋은 2026년 10월 19일입니다.
- next-ai-draw-io은(는) 어디에 사용할 수 있나요?
- 설계 리뷰 중 문서로 설명한 내용을 바탕으로 클라우드 아키텍처 다이어그램을 빠르게 작성합니다. 스크린샷이나 스케치를 편집 가능한 draw.io 다이어그램으로 변환합니다. 에디터에서 작업하는 동안 AI 코딩 에이전트가 다이어그램을 만들고 확인하도록 합니다. Ollama를 통해 로컬 모델로 다이어그램을 그려 오프라인 또는 인트라넷 환경에서 사용합니다.
- next-ai-draw-io는 어떻게 설치하나요?
- 저장소를 클론합니다: git clone https://github.com/DayuanJiang/next-ai-draw-io 프로젝트 폴더로 이동합니다: cd next-ai-draw-io 종속성을 설치합니다: npm install env 파일을 복사하고 프로바이더와 API 키를 추가한 다음, 개발 서버를 시작하고 localhost:6002를 엽니다: cp env.example .env.local
- next-ai-draw-io은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/DayuanJiang/next-ai-draw-io
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
아이디어, 계획, 코드베이스를 인터랙티브 HTML 다이어그램으로 만드는 에이전트 스킬
웹사이트, CSV/Hugging Face 데이터셋, CLI 및 MCP 서버 연동을 제공하는 커뮤니티 큐레이션 오픈소스 AI 채팅 모델 프롬프트 라이브러리입니다.
워크플로, 도구, 메모리, MCP 서버, 평가 기능을 갖춘 AI 에이전트 및 LLM 기반 애플리케이션 개발용 TypeScript 프레임워크입니다.
다국어 코드베이스를 지식 그래프로 인덱싱해 AI 에이전트나 MCP 서버를 통해 자연어로 조회·검색·편집합니다.