AI Diagram Maker MCP

AI Diagram Maker MCP 서버

AI Diagram Maker용 MCP 서버 — Cursor, Claude Desktop, Claude Code 또는 모든 MCP 호환 AI 에이전트 내에서 바로 아름다운 소프트웨어 엔지니어링 다이어그램을 생성합니다.

• ai-diagram-maker-mcp 🌐 ☁️ - 평문 영어 설명으로 전문적인 소프트웨어 다이어그램을 생성합니다.

기능

• 5가지 도구로 모든 입력 유형 지원: 자연어 텍스트, 코드, ASCII 다이어그램, 이미지, Mermaid
• 인라인 렌더링 — MCP Apps UI를 사용하여 다이어그램이 채팅에 직접 표시되며 다운로드가 필요 없음
• 응답에 다이어그램 URL 포함 — 브라우저에서 열어 다이어그램을 보고 편집 가능
• 5가지 다이어그램 유형: 순서도, 시퀀스, ERD, 시스템 아키텍처, UML
• stdio(로컬) 및 HTTP/Streamable HTTP(원격) 전송 모두 지원

목차

• 사전 요구 사항
• 호스팅 MCP 서버
• 설치
• MCP 클라이언트 구성
• 환경 변수
• 도구
• 트리거 키워드
• 로컬 개발자 설정
• 라이선스

사전 요구 사항

1. Node.js 18+
2. AI Diagram Maker 계정 및 API 키

호스팅 MCP 서버

공개 MCP 엔드포인트는 https://mcp.aidiagrammaker.com/mcp (Streamable HTTP)입니다. 이 옵션은 설치할 것이 없습니다.

인증 (HTTP)

원격 HTTP 클라이언트의 경우, 모든 요청에 API 키를 전송하세요 — 환경 변수를 통하지 않습니다:

• X-ADM-API-Key: <your_api_key> (권장), 또는
• Authorization: Bearer <your_api_key>

AI Diagram Maker 계정의 API 키를 사용하세요 (사전 요구 사항 참조).

원격 서버 JSON 예시

이것을 클라이언트의 MCP 구성에 병합하세요 (API 키 자리 표시자를 교체하세요):

{
  "mcpServers": {
    "ai-diagram-maker": {
      "url": "https://mcp.aidiagrammaker.com/mcp",
      "headers": {
        "X-ADM-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

설치

옵션 A — 호스팅 서버 (권장)

위의 원격 서버 JSON 예시를 사용하여 MCP 클라이언트 구성을 통해 클라이언트에 연결하세요. 전역 설치가 필요 없습니다.

옵션 B — npx로 로컬 실행

영구적으로 설치할 것이 없습니다 — npx이 필요 시 패키지를 실행합니다. 패키지 이름은 ai-diagram-maker-mcp입니다. 모든 호출 시 최신 릴리스를 확인하려면 @latest을 추가하세요 (일회성 실행 및 claude mcp add에 권장).

ADM_API_KEY=your_api_key npx ai-diagram-maker-mcp@latest

MCP 클라이언트 구성

Cursor

원격 (권장)

원격 서버 JSON 예시를 사용하여 ~/.cursor/mcp.json 또는 설정 → MCP에 추가하세요. 이 설정에는 환경 변수가 필요하지 않습니다.

로컬 (stdio)

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "npx",
      "args": ["-y", "ai-diagram-maker-mcp@latest"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

선택 사항: 디버그 로깅을 위해 "ADM_DEBUG": "1"을 env에 추가하세요 — 환경 변수 참조.

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) 또는 %APPDATA%\Claude\claude_desktop_config.json (Windows)에 추가하세요:

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "npx",
      "args": ["-y", "ai-diagram-maker-mcp@latest"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

Claude Code

macOS

claude mcp add ai-diagram-maker -t stdio -e ADM_API_KEY=<api_key> -- npx -y ai-diagram-maker-mcp@latest

Windows

claude mcp add ai-diagram-maker \
  --command "npx" \
  --args "-y,ai-diagram-maker-mcp@latest" \
  --env ADM_API_KEY=your_api_key_here

HTTP 전송 (로컬 또는 자체 호스팅)

HTTP 서버를 직접 실행하려면 (인증 (HTTP)와 동일한 헤더 기반 인증):

npx ai-diagram-maker-mcp@latest --transport http

서버는 $PORT 또는 3001에서 수신 대기합니다. 클라이언트를 /mcp로 지정하고 위의 헤더를 사용하여 각 요청에 API 키를 전송하세요.

환경 변수

변수	필수	기본값	설명
ADM_API_KEY	예 (stdio만 해당)	—	AI Diagram Maker API 키 (stdio 전송 전용; 원격 HTTP 클라이언트는 헤더 사용 — 인증 (HTTP) 참조)
ADM_BASE_URL	아니오	https://app.aidiagrammaker.com	로컬/스테이징 API 재정의; 도구 응답의 다이어그램 URL 기본값으로도 사용됨
ADM_DEBUG	아니오	—	1, true, 또는 yes로 설정하여 AI 에이전트의 요청 매개변수와 AI Diagram Maker API로 전송된 페이로드를 로깅합니다. 로그는 stderr로 출력됩니다. Cursor에서는 출력을 열고 MCP 또는 ai-diagram-maker 채널을 선택하여 서버 로그를 읽으세요.

도구

generate_diagram_from_text

자연어 설명으로 다이어그램을 생성합니다.

매개변수	유형	필수	설명
content	string	예	다이어그램에 대한 자연어 설명
diagramType	enum	아니오	flowchart, sequence, erd, system_architecture, uml
prompt	string	아니오	추가 스타일/레이아웃 지침

예시 프롬프트:

• "API 게이트웨이, 인증 서비스, 사용자 서비스, PostgreSQL 데이터베이스를 갖춘 마이크로서비스 아키텍처 생성"
• "JWT 토큰 생성을 포함한 사용자 로그인 흐름에 대한 시퀀스 다이어그램 그리기"
• "Vercel에 배포된 Next.js 앱의 CI/CD 파이프라인 보여줘"

---

generate_diagram_from_json

JSON 구조를 다이어그램으로 변환합니다 (API 응답, 데이터베이스 스키마, 구성 파일에 적합).

매개변수	유형	필수	설명
content	string	예	시각화할 JSON 문자열
prompt	string	아니오	JSON 해석 방법
diagramType	enum	아니오	선호하는 다이어그램 유형

---

generate_diagram_from_ascii

ASCII 아트를 세련된 다이어그램으로 변환합니다.

매개변수	유형	필수	설명
content	string	예	원시 ASCII 아트 다이어그램
prompt	string	아니오	렌더링 지침
diagramType	enum	아니오	선호하는 다이어그램 유형

---

generate_diagram_from_image

화이트보드 사진, 스크린샷 또는 모든 이미지를 깔끔한 다이어그램으로 변환합니다.

매개변수	유형	필수	설명
content	string	예	공개 이미지 URL 또는 base64 데이터 URI
prompt	string	아니오	추출하거나 렌더링할 내용
diagramType	enum	아니오	선호하는 출력 다이어그램 유형

---

generate_diagram_from_mermaid

Mermaid 다이어그램 정의를 D2로 변환하고 PNG 이미지를 반환합니다.

매개변수	유형	필수	설명
content	string	예	Mermaid 다이어그램 소스 (예: flowchart, sequenceDiagram, erDiagram)
prompt	string	아니오	선택적 레이아웃 또는 스타일 지침
diagramType	enum	아니오	변환된 출력에 대한 선호 다이어그램 유형

트리거 키워드

다음과 같은 문구를 사용하면 AI 에이전트가 자동으로 올바른 도구를 선택합니다:

• adm ...
• ai diagram maker ...
• create a diagram of ...
• show me a flowchart / sequence diagram / ERD / architecture ...
• visualise / draw / diagram ...

로컬 개발자 설정

다음 단계를 사용하여 리포지토리를 복제하고, 로컬에서 빌드하고, Node로 MCP 서버를 실행하세요.

1. 리포지토리 복제

git clone https://github.com/erajasekar/ai-diagram-maker-mcp.git
cd ai-diagram-maker-mcp

2. 종속성 설치

npm install

3. (선택 사항) API 클라이언트 재생성

AI Diagram Maker OpenAPI 사양 또는 구성을 변경한 경우 클라이언트를 재생성하세요:

npm run generate

4. 빌드

npm run build

이것은 TypeScript를 컴파일하고 MCP 앱 UI를 dist/에 빌드합니다. 서버 진입점은 dist/index.js입니다.

5. 로컬 MCP 서버 실행

stdio (기본값) — Cursor, Claude Desktop 등에서 사용:

ADM_API_KEY=your_api_key node dist/index.js

또는 npm 스크립트 사용:

ADM_API_KEY=your_api_key npm start

HTTP 전송 — 원격 클라이언트 또는 테스트용 (인증 (HTTP)와 동일한 헤더):

ADM_API_KEY=your_api_key node dist/index.js --transport http

또는:

ADM_API_KEY=your_api_key npm run start:http

HTTP 서버는 $PORT (기본값 3001)에서 수신 대기합니다.

6. Cursor에서 로컬 서버 사용

설정 → MCP (또는 ~/.cursor/mcp.json)를 통해 Cursor가 빌드된 서버를 가리키도록 설정하세요:

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "node",
      "args": ["/absolute/path/to/ai-diagram-maker-mcp/dist/index.js"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

/absolute/path/to/ai-diagram-maker-mcp을 복제된 리포지토리의 실제 경로로 교체하세요. 구성을 변경한 후 Cursor를 다시 시작하거나 MCP 서버를 다시 로드하세요.

디버그 로깅을 위해 "ADM_DEBUG": "1"을 env에 추가하세요 — 환경 변수 참조.

라이선스

MIT