Next AI Draw.io

자연어로 draw.io 다이어그램을 생성하고 편집하는 AI 도구입니다.

Next AI Draw.io는 AI로 draw.io 다이어그램을 만들 수 있는 도구입니다. 자연어로 플로차트, 시스템 아키텍처 다이어그램, 클라우드 아키텍처 다이어그램, 제품 흐름도를 만들고, 이후에도 채팅으로 노드와 연결선을 수정할 수 있습니다.

이 가이드는 Next AI Draw.io의 AI API 설정을 TokenMix로 바꾸는 방법을 설명합니다. 설정 후에는 Next AI Draw.io의 모델 요청이 TokenMix를 통해 처리되며, 하나의 TokenMix API Key로 TokenMix가 지원하는 모델을 사용할 수 있습니다.

Next AI Draw.io는 MCP Server도 제공합니다. 설정하면 Claude Code, Cursor, VS Code 같은 MCP 지원 Agent 도구에서도 draw.io 다이어그램을 만들거나 수정할 수 있습니다. 일반 사용자는 먼저 아래 단계로 웹 앱을 TokenMix에 연결하고, 필요할 때 MCP를 설정하면 됩니다.

준비할 것

필요한 것:

TokenMix 계정.
TokenMix API Key.
TokenMix에서 사용할 수 있는 모델 ID.

API Key가 없다면 TokenMix에 로그인한 뒤 대시보드의 API Key 페이지에서 새 Key를 만드세요. Key는 전체를 복사해야 하며 보통 sk-tm-로 시작합니다.

Model 값은 TokenMix 모델 목록에 표시된 모델 ID를 사용하세요. 이 가이드의 <model-short-id>는 실제 모델 ID로 바꿔야 하는 자리입니다.

Step 1: Next AI Draw.io 열기

공식 온라인 버전이나 직접 배포한 버전을 사용할 수 있습니다.

온라인 버전:

https://next-ai-drawio.jiang.jp/

페이지를 열면 채팅 패널과 draw.io 캔버스가 보입니다. 변경할 부분은 채팅 쪽의 모델 설정입니다.

Step 2: 모델 설정 열기

채팅 패널에서 설정 버튼을 찾으세요. 보통 입력창 근처나 모델 선택 영역 근처에 있습니다.

설정 화면에서 AI Provider, API Key, Base URL, Model 항목을 찾습니다.

Provider가 많아도 OpenRouter나 AWS Bedrock은 선택하지 마세요. 여기서는 다음을 선택합니다:

OpenAI

또는:

OpenAI Compatible

Next AI Draw.io의 OpenAI Provider는 사용자 지정 Base URL을 지원하므로 TokenMix의 OpenAI 호환 API에 연결할 수 있습니다.

Step 3: TokenMix 설정 입력

다음과 같이 입력합니다:

Provider: OpenAI 또는 OpenAI Compatible
Base URL: https://api.tokenmix.ai/v1
API Key: sk-tm-your-tokenmix-key
Model: <model-short-id>

주의할 점:

Base URL은 https://api.tokenmix.ai/v1로 입력하고 뒤에 /chat/completions를 붙이지 마세요.
API Key 앞뒤에 공백이 없어야 합니다.
Model에는 TokenMix가 지원하는 모델 ID를 입력해야 합니다.
Organization, Project 같은 선택 항목은 비워도 됩니다.

입력 후 설정을 저장합니다.

Step 4: 테스트 프롬프트 보내기

다음 영어 프롬프트를 입력하세요:

Generate a classic frontend-backend separated architecture diagram. Include users, browser, frontend app, API gateway, backend services, database, Redis cache, object storage, and third-party APIs. Use arrows to show the request flow.

설정이 올바르면 Next AI Draw.io가 모델을 호출하고 캔버스에 다이어그램을 생성합니다. draw.io XML을 출력해야 하므로 일반 채팅보다 조금 더 걸릴 수 있습니다.

Step 5: 성공 확인

성공하면 다음을 볼 수 있습니다:

채팅 패널에서 응답이 시작됩니다.
캔버스에 다이어그램이 나타납니다.
사용자, 프론트엔드, API 서비스, 데이터베이스, 캐시, 오브젝트 스토리지, 외부 API 등의 노드가 포함됩니다.
TokenMix 대시보드의 요청 로그에 호출이 표시됩니다.

이런 상태라면 Next AI Draw.io가 TokenMix에 연결된 것입니다.

모델 선택 팁

Next AI Draw.io는 단순 채팅 앱이 아닙니다. 올바른 draw.io XML을 생성해야 하므로 긴 출력, 구조화된 출력, 지시 사항 준수가 좋은 모델을 선택하는 것이 좋습니다.

테스트만 할 때는 저렴한 모델로 먼저 연결을 확인해도 됩니다. 복잡한 아키텍처 다이어그램을 만들 때는 더 강한 모델을 사용하세요.

자주 생기는 문제

401 또는 인증 실패

대부분 API Key가 잘못된 경우입니다. Key가 완전한지, sk-tm-로 시작하는지, 앞뒤에 공백이 없는지, TokenMix 잔액이 충분한지 확인하세요.

모델을 찾을 수 없음

대부분 Model 값이 잘못된 경우입니다. TokenMix 모델 목록에서 모델 ID를 복사하세요.

요청 실패 또는 응답 없음

Base URL을 확인하세요. 올바른 값:

https://api.tokenmix.ai/v1

다음처럼 쓰지 마세요:

https://api.tokenmix.ai
https://api.tokenmix.ai/v1/chat/completions
https://api.tokenmix.ai/api/v1

다이어그램이 중간에 끊김

API 주소 문제가 아니라 모델 성능이나 출력 길이 문제인 경우가 많습니다. 더 강한 모델을 사용하거나 요구사항을 더 작은 단계로 나누세요.

선택 사항: 직접 배포할 때 TokenMix 사용

Next AI Draw.io를 직접 배포한다면 환경 변수로 TokenMix를 지정할 수 있습니다.

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=<model-short-id> \
  -e OPENAI_API_KEY=sk-tm-your-tokenmix-key \
  -e OPENAI_BASE_URL=https://api.tokenmix.ai/v1 \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

요약

Next AI Draw.io에서 OpenAI 또는 OpenAI Compatible을 선택하고, Base URL을 https://api.tokenmix.ai/v1로 바꾸고, TokenMix의 sk-tm-... API Key와 TokenMix 모델 ID를 입력하면 TokenMix를 통해 draw.io 다이어그램을 생성할 수 있습니다.