Chart

Server MCP Chart

Server Model Context Protocol untuk membuat grafik menggunakan AntV. Kita dapat menggunakan server mcp ini untuk pembuatan grafik dan analisis data.

Ini adalah server MCP berbasis TypeScript yang menyediakan kemampuan pembuatan grafik. Server ini memungkinkan Anda membuat berbagai jenis grafik melalui alat MCP. Anda juga dapat menggunakannya di Dify.

📋 Daftar Isi

• ✨ Fitur
• 🤖 Penggunaan
• 🎨 Penggunaan Skill
• 🚰 Menjalankan dengan transport SSE atau Streamable
• 🎮 Opsi CLI
• ⚙️ Variabel Lingkungan
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 Deployment Pribadi
• 🗺️ Catatan Pembuatan
• 🎛️ Penyaringan Alat
• 🔨 Pengembangan
• 📄 Lisensi

✨ Fitur

Saat ini mendukung 26+ jenis grafik.

1. generate_area_chart: Membuat grafik area, digunakan untuk menampilkan tren data di bawah variabel independen yang kontinu, memungkinkan pengamatan tren data secara keseluruhan.
2. generate_bar_chart: Membuat grafik bar, digunakan untuk membandingkan nilai antar kategori yang berbeda, cocok untuk perbandingan horizontal.
3. generate_boxplot_chart: Membuat boxplot, digunakan untuk menampilkan distribusi data, termasuk median, kuartil, dan pencilan.
4. generate_column_chart: Membuat grafik column, digunakan untuk membandingkan nilai antar kategori yang berbeda, cocok untuk perbandingan vertikal.
5. generate_district_map - Membuat district-map, digunakan untuk menampilkan pembagian administratif dan distribusi data.
6. generate_dual_axes_chart: Membuat grafik dual-axes, digunakan untuk menampilkan hubungan antara dua variabel dengan unit atau rentang yang berbeda.
7. generate_fishbone_diagram: Membuat diagram fishbone, juga dikenal sebagai diagram Ishikawa, digunakan untuk mengidentifikasi dan menampilkan akar penyebab suatu masalah.
8. generate_flow_diagram: Membuat flowchart, digunakan untuk menampilkan langkah-langkah dan urutan suatu proses.
9. generate_funnel_chart: Membuat grafik funnel, digunakan untuk menampilkan kehilangan data pada berbagai tahap.
10. generate_histogram_chart: Membuat histogram, digunakan untuk menampilkan distribusi data dengan membaginya menjadi interval dan menghitung jumlah titik data di setiap interval.
11. generate_line_chart: Membuat grafik line, digunakan untuk menampilkan tren data dari waktu ke waktu atau variabel kontinu lainnya.
12. generate_liquid_chart: Membuat grafik liquid, digunakan untuk menampilkan proporsi data, secara visual mewakili persentase dalam bentuk bola berisi air.
13. generate_mind_map: Membuat mind-map, digunakan untuk menampilkan proses berpikir dan informasi hierarkis.
14. generate_network_graph: Membuat grafik network, digunakan untuk menampilkan hubungan dan koneksi antar node.
15. generate_organization_chart: Membuat grafik organizational, digunakan untuk menampilkan struktur organisasi dan hubungan personel.
16. generate_path_map - Membuat path-map, digunakan untuk menampilkan hasil perencanaan rute untuk POI.
17. generate_pie_chart: Membuat grafik pie, digunakan untuk menampilkan proporsi data, membaginya menjadi bagian-bagian yang diwakili oleh sektor yang menunjukkan persentase setiap bagian.
18. generate_pin_map - Membuat pin-map, digunakan untuk menampilkan distribusi POI.
19. generate_radar_chart: Membuat grafik radar, digunakan untuk menampilkan data multidimensi secara komprehensif, menampilkan beberapa dimensi dalam format seperti radar.
20. generate_sankey_chart: Membuat grafik sankey, digunakan untuk menampilkan aliran dan volume data, mewakili pergerakan data antar node yang berbeda dalam format gaya Sankey.
21. generate_scatter_chart: Membuat plot scatter, digunakan untuk menampilkan hubungan antara dua variabel, menampilkan titik data sebagai titik tersebar pada sistem koordinat.
22. generate_treemap_chart: Membuat treemap, digunakan untuk menampilkan data hierarkis, menampilkan data dalam bentuk persegi panjang di mana ukuran persegi panjang mewakili nilai data.
23. generate_venn_chart: Membuat diagram venn, digunakan untuk menampilkan hubungan antar himpunan, termasuk irisan, gabungan, dan selisih.
24. generate_violin_chart: Membuat plot violin, digunakan untuk menampilkan distribusi data, menggabungkan fitur boxplot dan density plot untuk memberikan tampilan yang lebih rinci tentang distribusi data.
25. generate_word_cloud_chart: Membuat word-cloud, digunakan untuk menampilkan frekuensi kata dalam data tekstual, dengan ukuran font yang menunjukkan frekuensi setiap kata.
26. generate_spreadsheet: Membuat spreadsheet atau tabel pivot untuk menampilkan data tabular. Ketika bidang 'rows' atau 'values' disediakan, ini dirender sebagai tabel pivot (tabulasi silang); jika tidak, dirender sebagai tabel biasa.

[!NOTE] Alat pembuatan grafik visualisasi geografis di atas menggunakan layanan AMap dan saat ini hanya mendukung pembuatan peta di dalam Tiongkok.

🤖 Penggunaan

Untuk digunakan dengan Desktop APP, seperti Claude, VSCode, Cline, Cherry Studio, Cursor, dan lainnya, tambahkan konfigurasi server MCP di bawah ini. Pada sistem Mac:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

Pada sistem Windows:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

Anda juga dapat menggunakannya di aliyun, modelscope, glama.ai, smithery.ai atau lainnya dengan protokol HTTP, SSE.

🎨 Penggunaan Skill

Jika Anda menggunakan AI IDE dengan dukungan skill (seperti Claude Code), Anda dapat menggunakan skill chart-visualization untuk secara otomatis memilih jenis grafik terbaik dan menghasilkan visualisasi.

Anda dapat menambahkan skill dari https://github.com/antvis/chart-visualization-skills menggunakan:

npx skills add antvis/chart-visualization-skills

Kemudian berikan data Anda atau jelaskan visualisasi yang Anda inginkan. Skill akan secara cerdas memilih dari 25+ jenis grafik dan menghasilkan grafik untuk Anda.

🚰 Menjalankan dengan transport SSE atau Streamable

Menjalankan secara langsung

Instal paket secara global.

npm install -g @antv/mcp-server-chart

Jalankan server dengan opsi transport yang Anda inginkan:

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

Kemudian Anda dapat mengakses server di:

• Transport SSE: http://localhost:1122/sse
• Transport Streamable: http://localhost:1122/mcp

Deployment Docker

Masuk ke direktori docker.

cd docker

Deploy menggunakan docker-compose.

docker compose up -d

Kemudian Anda dapat mengakses server di:

• Transport SSE: http://localhost:1123/sse
• Transport Streamable: http://localhost:1122/mcp

🎮 Opsi CLI

Anda juga dapat menggunakan opsi CLI berikut saat menjalankan server MCP. Opsi perintah dengan menjalankan cli dengan -H.

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ Variabel Lingkungan

Variabel	Deskripsi	Default	Contoh
VIS_REQUEST_SERVER	URL layanan pembuatan grafik kustom untuk deployment pribadi	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	Pengidentifikasi layanan untuk catatan pembuatan grafik	-	your-service-id-123
DISABLED_TOOLS	Daftar nama alat yang dinonaktifkan, dipisahkan dengan koma	-	generate_fishbone_diagram,generate_mind_map

📠 Deployment Pribadi

MCP Server Chart menyediakan layanan pembuatan grafik gratis secara default. Untuk pengguna yang membutuhkan deployment pribadi, mereka dapat mencoba menggunakan VIS_REQUEST_SERVER untuk menyesuaikan layanan pembuatan grafik mereka sendiri.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

Anda dapat menggunakan proyek AntV GPT-Vis-SSR untuk men-deploy layanan HTTP di lingkungan pribadi, lalu meneruskan alamat URL melalui env VIS_REQUEST_SERVER.

• Metode: POST
• Parameter: Yang akan diteruskan ke GPT-Vis-SSR untuk rendering. Seperti, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
• Kembalian: Objek kembalian dari layanan HTTP.
  • success: boolean Apakah berhasil membuat gambar grafik.
  • resultObj: string URL gambar grafik.
  • errorMessage: string Ketika success = false, kembalikan pesan kesalahan.

[!NOTE] Solusi deployment pribadi saat ini tidak mendukung pembuatan grafik visualisasi geografis termasuk 3 alat: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Catatan Pembuatan

Secara default, pengguna diharuskan menyimpan hasilnya sendiri, tetapi kami juga menyediakan layanan untuk melihat catatan pembuatan grafik, yang mengharuskan pengguna untuk membuat pengidentifikasi layanan untuk diri mereka sendiri dan mengonfigurasinya.

Gunakan Alipay untuk memindai dan membuka mini program untuk menghasilkan pengidentifikasi layanan pribadi (klik menu "Saya" di bawah, masuk ke halaman "Layanan Saya", klik tombol "Buat", dan klik tombol "Salin" setelah berhasil):

Selanjutnya, Anda perlu menambahkan variabel lingkungan SERVICE_ID ke konfigurasi server MCP. Misalnya, konfigurasi untuk Mac adalah sebagai berikut (untuk sistem Windows, cukup tambahkan variabel env):

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

Setelah memperbarui konfigurasi Server MCP, Anda perlu memulai ulang aplikasi klien AI Anda dan periksa kembali apakah Anda telah memulai dan terhubung ke Server MCP dengan sukses. Kemudian Anda dapat mencoba membuat peta lagi. Setelah pembuatan berhasil, Anda dapat pergi ke halaman "Peta Saya" di mini program untuk melihat catatan pembuatan peta Anda.

🎛️ Penyaringan Alat

Anda dapat menonaktifkan alat pembuatan grafik tertentu menggunakan variabel lingkungan DISABLED_TOOLS. Ini berguna ketika alat tertentu memiliki masalah kompatibilitas dengan klien MCP Anda atau ketika Anda ingin membatasi fungsionalitas yang tersedia.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

Nama alat yang tersedia untuk penyaringan Lihat ✨ Fitur.

🔨 Pengembangan

Instal dependensi:

npm install

Bangun server:

npm run build

Mulai server MCP:

npm run start

Mulai server MCP dengan transport SSE:

node build/index.js -t sse

Mulai server MCP dengan transport Streamable:

node build/index.js -t streamable

📄 Lisensi

MIT@AntV.