Next AI Draw.io
개요
next-ai-draw-io는 대규모 언어 모델(LLM)의 강력한 기능과 널리 사용되는 다이어그램 도구인 draw.io를 결합한 오픈 소스 Next.js 웹 애플리케이션입니다. 사용자는 채팅 인터페이스에서 자연어 지시를 입력하는 것만으로 수동 드래그 앤 드롭 없이 전문적인 다이어그램을 생성, 수정 및 개선할 수 있습니다.
이 프로젝트는 대화형 AI와 시각적 다이어그램 생성 간의 격차를 해소하기 위해 구축되었으며, 개발자, 아키텍트 및 비기술 사용자 모두가 몇 초 안에 고품질 다이어그램을 쉽게 생산할 수 있도록 합니다.
주요 기능
🧠 LLM 기반 다이어그램 생성
사용자는 일반 영어(또는 다른 언어)로 원하는 것을 설명하면 AI가 해당 draw.io XML 다이어그램을 자동으로 생성합니다. 명령은 "순서도를 그려줘"와 같은 간단한 요청부터 "로드 밸런서, EC2 인스턴스 및 RDS 데이터베이스가 있는 AWS 아키텍처를 생성해줘"와 같은 복잡한 요청까지 다양합니다.
🖼️ 이미지 기반 다이어그램 복제
사용자는 기존 다이어그램 이미지 또는 스크린샷을 업로드하면 AI가 이를 분석하여 편집 가능한 draw.io 다이어그램으로 복제합니다. 이는 손으로 그린 스케치를 디지털화하거나 문서에서 다이어그램을 다시 만드는 데 특히 유용합니다.
📜 다이어그램 버전 기록
다이어그램에 대한 모든 변경 사항이 추적됩니다. 사용자는 전체 버전 기록을 탐색하고 이전 상태를 복원할 수 있어 AI 생성 수정 사항을 실험할 때 안전망을 제공합니다.
💬 대화형 채팅 인터페이스
실시간 채팅 패널을 통해 사용자는 다이어그램을 반복적으로 개선할 수 있습니다. 사용자는 "애니메이션 화살표를 만들어줘" 또는 "API 서버에 연결된 데이터베이스 노드를 추가해줘"와 같이 말할 수 있으며 다이어그램은 그에 따라 업데이트됩니다.
☁️ 클라우드 아키텍처 지원
이 도구는 주요 클라우드 공급자를 위한 아키텍처 다이어그램 생성을 위한 전문적인 지원을 제공합니다.
- AWS (공식 AWS 아이콘 포함)
- GCP (GCP 아이콘 포함)
- Azure (Azure 아이콘 포함)
🎨 애니메이션 커넥터
더 표현력 있고 시각적으로 매력적인 다이어그램을 위해 다이어그램 노드 간에 애니메이션 및 동적 커넥터를 만드는 것을 지원합니다.
기술 스택
| 기술 | 역할 |
|---|---|
| Next.js 15 | 프론트엔드 프레임워크 및 API 라우팅 |
| TypeScript | 타입 안전한 코드베이스 |
| Vercel AI SDK | 스트리밍 AI 응답, 다중 공급자 추상화 |
| react-drawio | 다이어그램 렌더링 및 조작 |
| Tailwind CSS + shadcn/ui | UI 구성 요소 및 스타일링 |
| Docker | 컨테이너화된 배포 |
다중 공급자 LLM 지원
애플리케이션은 LLM 공급자 구성을 추상화하여 사용자가 다음 중 하나를 연결할 수 있도록 합니다.
- AWS Bedrock (기본값)
- OpenAI / OpenAI 호환 API
- Anthropic (Claude)
- Google AI (Gemini)
- Azure OpenAI
- Ollama (로컬 LLM)
- OpenRouter
- DeepSeek
참고:
claude-sonnet-4-5는 AWS 로고가 포함된 draw.io 다이어그램으로 학습되었기 때문에 AWS 아키텍처 다이어그램에 특히 권장됩니다.
프로젝트 구조
app/
api/chat/ # AI 도구 호출이 포함된 채팅 API 엔드포인트
page.tsx # 메인 애플리케이션 페이지
components/
chat-panel.tsx # 채팅 UI 및 다이어그램 제어
chat-input.tsx # 파일 업로드 지원 입력
history-dialog.tsx # 버전 기록 뷰어
ui/ # 재사용 가능한 UI 구성 요소
contexts/
diagram-context.tsx # 전역 다이어그램 상태 관리
lib/
ai-providers.ts # 다중 공급자 AI 구성
utils.ts # XML 처리 유틸리티
public/ # 정적 에셋 및 데모 SVG
시작하기
Docker를 사용한 빠른 시작
docker run -d -p 3000:3000 \
-e AI_PROVIDER=openai \
-e AI_MODEL=gpt-4o \
-e OPENAI_API_KEY=your_api_key \
ghcr.io/dayuanjiang/next-ai-draw-io:latest
그런 다음 브라우저에서 http://localhost:3000을 엽니다.
수동 설치
# 리포지토리 복제
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
# 종속성 설치
npm install
# 환경 구성
cp env.example .env.local
# .env.local 파일을 AI 공급자 설정으로 편집
# 개발 서버 실행
npm run dev
Vercel에 배포
아래 버튼을 클릭하거나 Next.js 배포 문서를 따르세요.
사용 사례 예시
| 프롬프트 | 출력 |
|---|---|
| "트랜스포머 아키텍처의 애니메이션 커넥터 다이어그램을 그려줘." | 애니메이션 커넥터가 있는 트랜스포머 아키텍처 다이어그램 |
| "GCP 아이콘을 사용하여 GCP 아키텍처 다이어그램을 생성해줘." | 전체 GCP 클라우드 아키텍처 SVG |
| "AWS 아이콘을 사용하여 AWS 아키텍처 다이어그램을 생성해줘." | 공식 아이콘이 포함된 AWS 클라우드 아키텍처 |
| "Azure 아이콘을 사용하여 Azure 아키텍처 다이어그램을 생성해줘." | Azure 클라우드 아키텍처 다이어그램 |
| "귀여운 고양이를 그려줘." | draw.io 형식의 고양이 그림 |