AI Diagram Maker MCP

Server MCP AI Diagram Maker

Server MCP untuk AI Diagram Maker — hasilkan diagram rekayasa perangkat lunak yang indah langsung di dalam Cursor, Claude Desktop, Claude Code, atau agen AI apa pun yang kompatibel dengan MCP.

• ai-diagram-maker-mcp 🌐 ☁️ - Hasilkan diagram perangkat lunak profesional dari deskripsi bahasa Inggris sederhana.

Fitur

• 5 alat yang mencakup setiap jenis masukan: teks bahasa alami, kode, diagram ASCII, gambar, dan Mermaid
• Rendering sebaris — diagram muncul langsung di obrolan menggunakan UI Aplikasi MCP, tanpa perlu mengunduh
• URL diagram dalam respons — buka di peramban Anda untuk melihat dan mengedit diagram
• 5 jenis diagram: diagram alir, sekuens, ERD, arsitektur sistem, UML
• Mendukung transport stdio (lokal) dan HTTP/Streamable HTTP (jarak jauh)

Daftar Isi

• Prasyarat
• Server MCP terhosting
• Instalasi
• Konfigurasi klien MCP
• Variabel lingkungan
• Alat
• Kata kunci pemicu
• Pengaturan pengembang lokal
• Lisensi

Prasyarat

1. Node.js 18+
2. Akun AI Diagram Maker dan kunci API

Server MCP terhosting

Titik akhir MCP publik adalah https://mcp.aidiagrammaker.com/mcp (Streamable HTTP). Tidak ada yang perlu diinstal untuk opsi ini.

Autentikasi (HTTP)

Untuk klien HTTP jarak jauh, kirimkan kunci API Anda pada setiap permintaan — bukan melalui variabel lingkungan:

• X-ADM-API-Key: <your_api_key> (disarankan), atau
• Authorization: Bearer <your_api_key>

Gunakan kunci API dari akun AI Diagram Maker Anda (lihat Prasyarat).

Contoh JSON server jarak jauh

Gabungkan ini ke dalam konfigurasi MCP klien Anda (ganti placeholder kunci API):

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

Instalasi

Opsi A — server terhosting (disarankan)

Gunakan contoh JSON server jarak jauh di atas dan hubungkan ke klien Anda menggunakan Konfigurasi klien MCP. Tidak perlu instalasi global.

Opsi B — jalankan secara lokal dengan npx

Tidak ada yang perlu diinstal secara permanen — npx menjalankan paket sesuai permintaan. Nama paketnya adalah ai-diagram-maker-mcp; tambahkan @latest jika Anda ingin setiap pemanggilan menggunakan rilis terbaru (disarankan untuk eksekusi satu kali dan claude mcp add).

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

Konfigurasi klien MCP

Cursor

Jarak Jauh (disarankan)

Tambahkan ke ~/.cursor/mcp.json atau Settings → MCP menggunakan contoh JSON server jarak jauh. Tidak diperlukan variabel lingkungan untuk pengaturan ini.

Lokal (stdio)

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

Opsional: tambahkan "ADM_DEBUG": "1" ke env untuk pencatatan debug — lihat Variabel lingkungan.

Claude Desktop

Tambahkan ke ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) atau %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

Transport HTTP (lokal atau self-hosted)

Untuk menjalankan server HTTP sendiri (autentikasi berbasis header yang sama seperti Autentikasi (HTTP)):

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

Server mendengarkan di $PORT atau 3001. Arahkan klien ke /mcp dan kirimkan kunci API dengan setiap permintaan menggunakan header di atas.

Variabel lingkungan

Variabel	Diperlukan	Default	Deskripsi
ADM_API_KEY	Ya (hanya stdio)	—	Kunci API AI Diagram Maker Anda (hanya transport stdio; klien HTTP jarak jauh menggunakan header — lihat Autentikasi (HTTP))
ADM_BASE_URL	Tidak	https://app.aidiagrammaker.com	Penggantian untuk API lokal/staging; juga digunakan sebagai basis untuk URL diagram dalam respons alat
ADM_DEBUG	Tidak	—	Atur ke 1, true, atau yes untuk mencatat parameter permintaan dari agen AI dan payload yang dikirim ke API AI Diagram Maker. Log masuk ke stderr. Di Cursor, buka Output, pilih saluran MCP atau ai-diagram-maker untuk membaca log server.

Alat

generate_diagram_from_text

Hasilkan diagram dari deskripsi bahasa alami.

Parameter	Tipe	Diperlukan	Deskripsi
content	string	Ya	Deskripsi diagram dalam bahasa alami
diagramType	enum	Tidak	flowchart, sequence, erd, system_architecture, uml
prompt	string	Tidak	Instruksi gaya/tata letak tambahan

Contoh prompt:

• "Buat arsitektur microservices dengan API gateway, auth service, user service, dan database PostgreSQL"
• "Gambar diagram sekuens untuk alur login pengguna dengan pembuatan token JWT"
• "adm tampilkan pipeline CI/CD untuk aplikasi Next.js yang dideploy ke Vercel"

---

generate_diagram_from_json

Ubah struktur JSON menjadi diagram (bagus untuk respons API, skema database, file konfigurasi).

Parameter	Tipe	Diperlukan	Deskripsi
content	string	Ya	String JSON untuk divisualisasikan
prompt	string	Tidak	Cara menginterpretasikan JSON
diagramType	enum	Tidak	Jenis diagram yang disukai

---

generate_diagram_from_ascii

Ubah seni ASCII menjadi diagram yang rapi.

Parameter	Tipe	Diperlukan	Deskripsi
content	string	Ya	Diagram seni ASCII mentah
prompt	string	Tidak	Instruksi rendering
diagramType	enum	Tidak	Jenis diagram yang disukai

---

generate_diagram_from_image

Ubah foto papan tulis, tangkapan layar, atau gambar apa pun menjadi diagram yang bersih.

Parameter	Tipe	Diperlukan	Deskripsi
content	string	Ya	URL gambar publik atau URI data base64
prompt	string	Tidak	Apa yang diekstrak atau cara merender
diagramType	enum	Tidak	Jenis diagram keluaran yang disukai

---

generate_diagram_from_mermaid

Ubah definisi diagram Mermaid ke D2 dan kembalikan gambar PNG.

Parameter	Tipe	Diperlukan	Deskripsi
content	string	Ya	Sumber diagram Mermaid (mis. flowchart, sequenceDiagram, erDiagram)
prompt	string	Tidak	Instruksi tata letak atau gaya opsional
diagramType	enum	Tidak	Jenis diagram yang disukai untuk keluaran yang dikonversi

Kata kunci pemicu

Agen AI akan secara otomatis memilih alat yang tepat saat Anda menggunakan frasa seperti:

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

Pengaturan pengembang lokal

Gunakan langkah-langkah ini untuk mengkloning repo, membangun secara lokal, dan menjalankan server MCP dengan Node.

1. Kloning repositori

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

2. Instal dependensi

npm install

3. (Opsional) Regenerasi klien API

Jika Anda mengubah spesifikasi OpenAPI atau konfigurasi AI Diagram Maker, regenerasi klien:

npm run generate

4. Build

npm run build

Ini mengompilasi TypeScript dan membangun UI aplikasi MCP ke dalam dist/. Titik masuk server adalah dist/index.js.

5. Jalankan server MCP lokal

stdio (default) — untuk digunakan dengan Cursor, Claude Desktop, dll.:

ADM_API_KEY=your_api_key node dist/index.js

Atau gunakan skrip npm:

ADM_API_KEY=your_api_key npm start

Transport HTTP — untuk klien jarak jauh atau pengujian (header yang sama seperti Autentikasi (HTTP)):

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

Atau:

ADM_API_KEY=your_api_key npm run start:http

Server HTTP mendengarkan di $PORT (default 3001).

6. Gunakan server lokal di Cursor

Arahkan Cursor ke server yang telah Anda bangun melalui Settings → MCP (atau ~/.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"
      }
    }
  }
}

Ganti /absolute/path/to/ai-diagram-maker-mcp dengan path sebenarnya ke repositori kloning Anda. Setelah mengubah konfigurasi, mulai ulang Cursor atau muat ulang server MCP.

Untuk pencatatan debug, tambahkan "ADM_DEBUG": "1" ke env — lihat Variabel lingkungan.

Lisensi

MIT