liujuntao123/smart-excalidraw-next

Smart Excalidraw – AI 기반 다이어그램 생성기

소개 – 자연어로 다이어그램을 설명하면 즉시 완전히 편집 가능한 Excalidraw 캔버스를 생성해 주는 웹 앱입니다. 대규모 언어 모델(LLM)을 사용하여 요청을 이해하고, 적절한 차트 유형을 선택하며, "지능형 화살표" 알고리즘을 통해 요소들을 배치하여 선이 꼬이는 복잡함을 방지합니다.

주요 기능

• 자연어 기반 다이어그램 생성 – “draw a user-login flow” 또는 *“show a micro-service architecture with gateway, auth, and business services”*와 같이 입력하면 AI가 전체 차트를 생성합니다.
• 20개 이상의 내장 스타일 – 순서도, 아키텍처 다이어그램, 시퀀스 다이어그램, ER 다이어그램, 마인드맵, 네트워크 토폴로지 등. 모델이 가장 적합한 스타일을 자동으로 결정합니다.
• Excalidraw 네이티브 출력 – 결과물은 Excalidraw JSON으로 제공되어 캔버스에서 직접 편집, 스타일 지정, 확장이 가능합니다.
• 스마트 연결 라우팅 – 독자적인 알고리즘이 화살표의 최적 앵커 포인트를 자동으로 계산하여 레이아웃을 깔끔하게 유지합니다.
• LLM 제공 방식(2가지)
  1. 서버 측 LLM – 관리자가 액세스 비밀번호를 설정하고 공유 Anthropic 또는 OpenAI 키를 구성합니다. 사용자는 비밀번호만 입력하면 됩니다.
  2. 개인 LLM – 사용자가 자신의 OpenAI 또는 Anthropic API 키를 입력하고 모델을 선택할 수 있습니다(README에서는 Claude sonnet-4.5 권장).
• 개인정보 보호 우선 – API 키와 비밀번호는 브라우저(또는 서버 측 .env 파일)에만 저장되며, 타사 백엔드로 전송되지 않습니다.

사용 방법

1. 호스팅된 데모 https://ai-draw-nexus.aizhi.site를 엽니다(또는 로컬에서 실행).
2. **“配置 LLM”**을 클릭하여 API 키를 추가하거나, 서버 관리자가 제공한 경우 “访问密码” 버튼을 사용합니다.
3. 입력 상자에 설명을 입력하고 다이어그램이 나타나는 것을 확인합니다.
4. Excalidraw 캔버스에서 결과물을 편집합니다(요소 이동, 색상 변경, 주석 추가 등).

로컬 실행 방법

# clone
git clone <repo-url>
cd smart-excalidraw-next

# install (pnpm recommended)
pnpm install

# start dev server
pnpm dev   # then open http://localhost:3000

공유 LLM 모드를 사용하려면 .env.example을 .env로 복사하고 다음을 입력하세요:

• ACCESS_PASSWORD
• SERVER_LLM_TYPE (openai 또는 anthropic)
• SERVER_LLM_BASE_URL
• SERVER_LLM_API_KEY
• SERVER_LLM_MODEL

기술 스택 – Next.js 16, React 19, Excalidraw, Tailwind CSS 4, 프롬프트 상자용 Monaco editor.

라이선스 – MIT.

대상 사용자 – 제품 디자이너, 엔지니어, 교육자 등 복잡한 도구 학습 없이 빠르고 깔끔한 다이어그램이 필요한 모든 분. AI가 레이아웃을 처리하므로 사용자는 콘텐츠에만 집중할 수 있습니다.