AI Diagram Maker MCP

AI Diagram Maker MCP Server

เซิร์ฟเวอร์ MCP สำหรับ AI Diagram Maker — สร้างไดอะแกรมวิศวกรรมซอฟต์แวร์ที่สวยงามได้โดยตรงภายใน Cursor, Claude Desktop, Claude Code หรือเอเจนต์ AI ใดๆ ที่รองรับ MCP

• 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>

ใช้คีย์ API จากบัญชี AI Diagram Maker ของคุณ (ดู ข้อกำหนดเบื้องต้น)

ตัวอย่าง 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

ระยะไกล (แนะนำ)

เพิ่มไปยัง ~/.cursor/mcp.json หรือ Settings → MCP โดยใช้ ตัวอย่าง JSON เซิร์ฟเวอร์ระยะไกล ไม่ต้องใช้ตัวแปรสภาพแวดล้อมสำหรับการตั้งค่านี้

ภายในเครื่อง (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 เท่านั้น)	—	คีย์ API AI Diagram Maker ของคุณ (การขนส่ง stdio เท่านั้น; ไคลเอนต์ HTTP ระยะไกลใช้ส่วนหัว — ดู การรับรองความถูกต้อง (HTTP))
ADM_BASE_URL	ไม่	https://app.aidiagrammaker.com	การแทนที่สำหรับ API ภายในเครื่อง/staging; ยังใช้เป็นฐานสำหรับ URL ไดอะแกรมในคำตอบของเครื่องมือ
ADM_DEBUG	ไม่	—	ตั้งค่าเป็น 1, true, หรือ yes เพื่อบันทึกพารามิเตอร์คำขอจากเอเจนต์ AI และเพย์โหลดที่ส่งไปยัง API AI Diagram Maker บันทึกไปที่ stderr ใน Cursor เปิด Output เลือกช่อง MCP หรือ ai-diagram-maker เพื่ออ่านบันทึกเซิร์ฟเวอร์

เครื่องมือ

generate_diagram_from_text

สร้างไดอะแกรมจากคำอธิบายภาษาธรรมชาติ

พารามิเตอร์	ประเภท	จำเป็น	คำอธิบาย
content	string	ใช่	คำอธิบายภาษาธรรมชาติของไดอะแกรม
diagramType	enum	ไม่	flowchart, sequence, erd, system_architecture, uml
prompt	string	ไม่	คำแนะนำการจัดสไตล์/เลย์เอาต์เพิ่มเติม

ตัวอย่างพรอมต์:

• "สร้างสถาปัตยกรรมไมโครเซอร์วิสพร้อม API gateway, บริการ auth, บริการผู้ใช้ และฐานข้อมูล PostgreSQL"
• "วาดไดอะแกรมลำดับสำหรับขั้นตอนการเข้าสู่ระบบผู้ใช้พร้อมการสร้างโทเค็น JWT"
• "adm แสดงไปป์ไลน์ CI/CD สำหรับแอป Next.js ที่ปรับใช้กับ Vercel"

---

generate_diagram_from_json

แปลงโครงสร้าง JSON เป็นไดอะแกรม (เหมาะสำหรับการตอบกลับ API, สคีมาฐานข้อมูล, ไฟล์กำหนดค่า)

พารามิเตอร์	ประเภท	จำเป็น	คำอธิบาย
content	string	ใช่	สตริง JSON ที่จะแสดงภาพ
prompt	string	ไม่	วิธีการตีความ JSON
diagramType	enum	ไม่	ประเภทไดอะแกรมที่ต้องการ

---

generate_diagram_from_ascii

แปลง ASCII art เป็นไดอะแกรมที่สวยงาม

พารามิเตอร์	ประเภท	จำเป็น	คำอธิบาย
content	string	ใช่	ไดอะแกรม ASCII art ดิบ
prompt	string	ไม่	คำแนะนำการเรนเดอร์
diagramType	enum	ไม่	ประเภทไดอะแกรมที่ต้องการ

---

generate_diagram_from_image

แปลงรูปถ่ายไวท์บอร์ด, ภาพหน้าจอ หรือรูปภาพใดๆ เป็นไดอะแกรมที่สะอาด

พารามิเตอร์	ประเภท	จำเป็น	คำอธิบาย
content	string	ใช่	URL รูปภาพสาธารณะหรือ URI ข้อมูล base64
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 ...

การตั้งค่านักพัฒนาภายในเครื่อง

ใช้ขั้นตอนเหล่านี้เพื่อโคลนรีโพ, บิวด์ภายในเครื่อง และรันเซิร์ฟเวอร์ MCP ด้วย Node

1. โคลนรีพอสิทอรี

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

2. ติดตั้งการพึ่งพา

npm install

3. (ตัวเลือก) สร้างไคลเอนต์ API ใหม่

หากคุณเปลี่ยนสเปก OpenAPI หรือการกำหนดค่าของ AI Diagram Maker ให้สร้างไคลเอนต์ใหม่:

npm run generate

4. บิวด์

npm run build

สิ่งนี้จะคอมไพล์ TypeScript และสร้าง UI แอป MCP ลงใน 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

ชี้ Cursor ไปที่เซิร์ฟเวอร์ที่บิวด์ของคุณผ่าน Settings → MCP (หรือ ~/.cursor/mcp.json):

{
  "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