Molayo

© 2026 Molayo

GH Trending릴리즈2026. 05. 30. 22:15

DayuanJiang/next-ai-draw-io

요약

자연어 명령을 통해 draw.io 다이어그램을 생성, 수정 및 개선할 수 있는 Next.js 기반 웹 애플리케이션입니다. MCP를 지원하여 Claude Desktop, Cursor 등 AI 에이전트와 연동해 실시간 다이어그램 생성이 가능합니다.

핵심 포인트

  • 자연어 명령 및 이미지 기반 다이어그램 복제 지원
  • MCP를 통한 Claude, Cursor 등 AI 에이전트 연동
  • PDF 및 텍스트 파일로부터 다이어그램 자동 생성
  • 클라우드 아키텍처(AWS, GCP, Azure) 특화 지원
  • 사용자 API 키를 활용한 로컬 보안 설정 가능

draw.io 다이어그램에 AI 기능을 통합한 Next.js 웹 애플리케이션입니다. 자연어 명령과 AI 지원 시각화를 통해 다이어그램을 생성, 수정 및 개선할 수 있습니다.

참고: ByteDance Doubao의 후원으로 인해, 데모 사이트는 이제 강력한 glm-4.7 모델을 사용합니다!

20251211_drawio.mp4

다음은 몇 가지 프롬프트 예시와 생성된 다이어그램입니다:

LLM 기반 다이어그램 생성: 거대 언어 모델 (LLM)을 활용하여 자연어 명령을 통해 draw.io 다이어그램을 직접 생성하고 조작합니다. 이미지 기반 다이어그램 복제: 기존 다이어그램이나 이미지를 업로드하면 AI가 이를 자동으로 복제하고 개선합니다. PDF 및 텍스트 파일 업로드: PDF 문서와 텍스트 파일을 업로드하여 콘텐츠를 추출하고 기존 문서로부터 다이어그램을 생성합니다. AI 추론 과정 표시: 지원되는 모델(OpenAI o1/o3, Gemini, Claude 등)에 대해 AI의 사고 과정을 확인할 수 있습니다. 다이어그램 히스토리: 모든 변경 사항을 추적하는 포괄적인 버전 관리 기능을 통해, AI 편집 전의 이전 다이어그램 버전을 확인하고 복구할 수 있습니다. 대화형 채팅 인터페이스: AI와 소통하며 실시간으로 다이어그램을 정교하게 다듬을 수 있습니다. 클라우드 아키텍처 다이어그램 지원: 클라우드 아키텍처 다이어그램(AWS, GCP, Azure) 생성을 위한 특화된 지원을 제공합니다. 애니메이션 커넥터: 더 나은 시각화를 위해 다이어그램 요소 간에 동적이고 애니메이션이 적용된 커넥터를 생성합니다.

MCP (Model Context Protocol)를 통해 Claude Desktop, Cursor, VS Code와 같은 AI 에이전트와 함께 Next AI Draw.io를 사용해 보세요.

{
"mcpServers": {
"drawio": {
...

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

그 다음 Claude에게 다이어그램 생성을 요청하세요:

"로그인, MFA, 세션 관리를 포함한 사용자 인증 과정을 보여주는 플로우차트를 만들어줘"

다이어그램이 브라우저에 실시간으로 나타납니다!

VS Code, Cursor 및 기타 클라이언트 설정을 보려면 MCP 서버 README를 참조하세요.

설치가 필요 없습니다! 데모 사이트에서 앱을 직접 체험해 보세요:

자체 API 키 사용 (Bring Your Own API Key): 데모 사이트의 사용량 제한을 우회하려면 본인의 API 키를 사용할 수 있습니다. 채팅 패널의 설정 (Settings) 아이콘을 클릭하여 제공자 (Provider) 및 API 키를 구성하세요. 귀하의 키는 브라우저에 로컬로 저장되며 서버에는 절대 저장되지 않습니다.

Releases 페이지에서 사용 중인 플랫폼에 맞는 네이티브 데스크톱 앱을 다운로드하세요:

지원 플랫폼: Windows, macOS, Linux.

  • 저장소 (Repository) 클론하기:
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
...

각 제공자에 대한 자세한 설정 방법은 제공자 구성 가이드 (Provider Configuration Guide)를 참조하세요.

  • 개발 서버 실행하기:

npm run dev

Tencent EdgeOne Pages를 사용하여 클릭 한 번으로 배포할 수 있습니다.

이 버튼을 통해 배포하세요:

자세한 내용은 Tencent EdgeOne Pages 문서를 확인하세요.

또한, Tencent EdgeOne Pages를 통해 배포하면 DeepSeek 모델에 대한 일일 무료 할당량(Quota)도 제공됩니다.

가장 쉬운 배포 방법은 Next.js의 제작사인 Vercel을 사용하는 것입니다. 로컬 .env.local 파일에서 했던 것처럼 Vercel 대시보드에서 반드시 환경 변수 (Environment Variables)를 설정해야 합니다.

자세한 내용은 Next.js 배포 문서를 참조하세요.

  • ByteDance Doubao
  • AWS Bedrock (기본값)
  • OpenAI
  • Anthropic
  • Google AI
  • Google Vertex AI
  • Azure OpenAI
  • Ollama
  • OpenRouter
  • DeepSeek
  • SiliconFlow
  • ModelScope
  • SGLang
  • Vercel AI Gateway

AWS Bedrock과 OpenRouter를 제외한 모든 제공자는 커스텀 엔드포인트 (Custom Endpoints)를 지원합니다.

📖 상세 제공자 구성 가이드 (Detailed Provider Configuration Guide) - 각 제공자에 대한 설정 지침을 확인하세요.

관리자는 개인 API 키 없이도 모든 사용자가 사용할 수 있는 여러 서버 측 모델을 구성할 수 있습니다. AI_MODELS_CONFIG 환경 변수 (JSON 문자열) 또는 ai-models.json 파일을 통해 구성하세요.

모델 요구 사항 (Model Requirements): 이 작업은 엄격한 형식 제약 조건(draw.io XML)을 가진 장문 텍스트를 생성하기 위해 강력한 모델 성능을 요구합니다. 권장 모델로는 Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, 그리고 DeepSeek V3.2/R1이 있습니다.

claude 시리즈는 AWS, Azure, GCP와 같은 클라우드 아키텍처 로고가 포함된 draw.io 다이어그램으로 학습되었다는 점에 유의하세요. 따라서 클라우드 아키텍처 다이어그램을 만들고 싶다면 이것이 최선의 선택입니다.

애플리케이션은 다음 기술들을 사용합니다:

Next.js: 프론트엔드 프레임워크 및 라우팅용
Vercel AI SDK (ai + @ai-sdk/*): AI 응답 스트리밍 및 멀티 프로바이더 (multi-provider) 지원용
react-drawio: 다이어그램 표현 및 조작용

다이어그램은 draw.io에서 렌더링할 수 있는 XML로 표현됩니다. AI는 사용자의 명령을 처리하고 이에 따라 XML을 생성하거나 수정합니다.

데모 사이트의 API 토큰 사용을 후원해 준 ByteDance Doubao에 특별히 감사드립니다! ARK 플랫폼에 등록하면 모든 모델에 대해 500K 무료 토큰을 받을 수 있습니다!

이 프로젝트가 유용하다고 생각하신다면, 라이브 데모 사이트 호스팅을 도울 수 있도록 후원을 고려해 주세요!

지원 또는 문의 사항이 있는 경우, GitHub 저장소에 이슈(issue)를 생성하거나 다음의 유지 관리자에게 연락해 주세요:

  • 이메일: me[at]jiang.jp

일반적인 문제와 해결 방법은 FAQ를 참조하세요.

AI 자동 생성 콘텐츠

본 콘텐츠는 GitHub Trending TypeScript (weekly)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0