Chart

MCP Server Chart

AntV kullanarak grafikler oluşturmak için bir Model Context Protocol sunucusu. Bu mcp sunucusunu grafik oluşturma ve veri analizi için kullanabiliriz.

Bu, grafik oluşturma yetenekleri sağlayan TypeScript tabanlı bir MCP sunucusudur. MCP araçları aracılığıyla çeşitli grafik türleri oluşturmanıza olanak tanır. Ayrıca Dify içinde de kullanabilirsiniz.

📋 İçindekiler

• ✨ Özellikler
• 🤖 Kullanım
• 🎨 Beceri Kullanımı
• 🚰 SSE veya Streamable taşıma ile çalıştırma
• 🎮 CLI Seçenekleri
• ⚙️ Ortam Değişkenleri
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 Özel Dağıtım
• 🗺️ Kayıt Oluşturma
• 🎛️ Araç Filtreleme
• 🔨 Geliştirme
• 📄 Lisans

✨ Özellikler

Şu anda 26+ grafik desteklenmektedir.

1. generate_area_chart: Sürekli bir bağımsız değişken altında verilerin eğilimini göstermek için kullanılan bir area grafiği oluşturur; genel veri eğilimlerini gözlemlemeye olanak tanır.
2. generate_bar_chart: Farklı kategorilerdeki değerleri karşılaştırmak için kullanılan bir bar grafiği oluşturur; yatay karşılaştırmalar için uygundur.
3. generate_boxplot_chart: Verilerin dağılımını göstermek için kullanılan bir boxplot oluşturur; medyan, çeyrekler ve aykırı değerler dahil.
4. generate_column_chart: Farklı kategorilerdeki değerleri karşılaştırmak için kullanılan bir column grafiği oluşturur; dikey karşılaştırmalar için uygundur.
5. generate_district_map - İdari bölümleri ve veri dağılımını göstermek için kullanılan bir district-map oluşturur.
6. generate_dual_axes_chart: Farklı birimlere veya aralıklara sahip iki değişken arasındaki ilişkiyi göstermek için kullanılan bir dual-axes grafiği oluşturur.
7. generate_fishbone_diagram: Ishikawa diyagramı olarak da bilinen, bir sorunun kök nedenlerini belirlemek ve göstermek için kullanılan bir fishbone diyagramı oluşturur.
8. generate_flow_diagram: Bir sürecin adımlarını ve sırasını göstermek için kullanılan bir flowchart oluşturur.
9. generate_funnel_chart: Farklı aşamalardaki veri kaybını göstermek için kullanılan bir funnel grafiği oluşturur.
10. generate_histogram_chart: Verileri aralıklara bölerek ve her aralıktaki veri noktalarının sayısını sayarak veri dağılımını göstermek için kullanılan bir histogram oluşturur.
11. generate_line_chart: Verilerin zaman veya başka bir sürekli değişken üzerindeki eğilimini göstermek için kullanılan bir line grafiği oluşturur.
12. generate_liquid_chart: Verilerin oranını göstermek için kullanılan, yüzdeleri su dolu küreler şeklinde görsel olarak temsil eden bir liquid grafiği oluşturur.
13. generate_mind_map: Düşünce süreçlerini ve hiyerarşik bilgileri göstermek için kullanılan bir mind-map oluşturur.
14. generate_network_graph: Düğümler arasındaki ilişkileri ve bağlantıları göstermek için kullanılan bir network grafiği oluşturur.
15. generate_organization_chart: Bir organizasyonun yapısını ve personel ilişkilerini göstermek için kullanılan bir organizational grafiği oluşturur.
16. generate_path_map - POI'ler için rota planlama sonuçlarını göstermek için kullanılan bir path-map oluşturur.
17. generate_pie_chart: Verilerin oranını göstermek için kullanılan, her bir parçanın yüzdesini gösteren sektörlerle temsil edilen bir pie grafiği oluşturur.
18. generate_pin_map - POI'lerin dağılımını göstermek için kullanılan bir pin-map oluşturur.
19. generate_radar_chart: Çok boyutlu verileri kapsamlı bir şekilde göstermek için kullanılan, radar benzeri bir formatta birden fazla boyutu gösteren bir radar grafiği oluşturur.
20. generate_sankey_chart: Veri akışını ve hacmini göstermek için kullanılan, farklı düğümler arasındaki veri hareketini Sankey tarzı bir formatta temsil eden bir sankey grafiği oluşturur.
21. generate_scatter_chart: İki değişken arasındaki ilişkiyi göstermek için kullanılan, veri noktalarını bir koordinat sistemi üzerinde dağınık noktalar olarak gösteren bir scatter grafiği oluşturur.
22. generate_treemap_chart: Hiyerarşik verileri göstermek için kullanılan, dikdörtgenlerin boyutunun verinin değerini temsil ettiği bir treemap oluşturur.
23. generate_venn_chart: Kümeler arasındaki ilişkileri, kesişimleri, birleşimleri ve farkları gösteren bir venn diyagramı oluşturur.
24. generate_violin_chart: Verilerin dağılımını göstermek için kullanılan, kutu grafikleri ve yoğunluk grafiklerinin özelliklerini birleştirerek veri dağılımının daha ayrıntılı bir görünümünü sağlayan bir violin grafiği oluşturur.
25. generate_word_cloud_chart: Metinsel verilerdeki kelimelerin sıklığını göstermek için kullanılan, yazı tipi boyutlarının her kelimenin sıklığını gösterdiği bir word-cloud oluşturur.
26. generate_spreadsheet: Tablo verilerini göstermek için bir spreadsheet veya pivot tablo oluşturur. 'rows' veya 'values' alanları sağlandığında pivot tablo (çapraz tablo) olarak işlenir; aksi takdirde normal bir tablo olarak işlenir.

[!NOTE] Yukarıdaki coğrafi görselleştirme grafiği oluşturma aracı AMap hizmetini kullanır ve şu anda yalnızca Çin içinde harita oluşturmayı destekler.

🤖 Kullanım

Desktop APP ile, örneğin Claude, VSCode, Cline, Cherry Studio, Cursor vb. ile kullanmak için aşağıdaki MCP sunucu yapılandırmasını ekleyin. Mac sisteminde:

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

Windows sisteminde:

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

Ayrıca, HTTP, SSE Protokolü ile aliyun, modelscope, glama.ai, smithery.ai veya diğerlerinde kullanabilirsiniz.

🎨 Beceri Kullanımı

Beceri desteği olan bir AI IDE kullanıyorsanız (örneğin Claude Code), en iyi grafik türünü otomatik olarak seçmek ve görselleştirmeler oluşturmak için chart-visualization becerisini kullanabilirsiniz.

Beceriyi https://github.com/antvis/chart-visualization-skills adresinden şu şekilde ekleyebilirsiniz:

npx skills add antvis/chart-visualization-skills

Ardından verilerinizi sağlayın veya istediğiniz görselleştirmeyi tanımlayın. Beceri, 25+ grafik türü arasından akıllıca seçim yapacak ve sizin için grafiği oluşturacaktır.

🚰 SSE veya Streamable taşıma ile çalıştırma

Doğrudan çalıştırma

Paketi global olarak kurun.

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

Sunucuyu tercih ettiğiniz taşıma seçeneğiyle çalıştırın:

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

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

Ardından sunucuya şu adresten erişebilirsiniz:

• SSE taşıma: http://localhost:1122/sse
• Streamable taşıma: http://localhost:1122/mcp

Docker dağıtımı

Docker dizinine girin.

cd docker

docker-compose kullanarak dağıtın.

docker compose up -d

Ardından sunucuya şu adresten erişebilirsiniz:

• SSE taşıma: http://localhost:1123/sse
• Streamable taşıma: http://localhost:1122/mcp

🎮 CLI Seçenekleri

MCP sunucusunu çalıştırırken aşağıdaki CLI seçeneklerini de kullanabilirsiniz. Komut seçenekleri, cli'yi -H ile çalıştırarak.

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

⚙️ Ortam Değişkenleri

Değişken	Açıklama	Varsayılan	Örnek
VIS_REQUEST_SERVER	Özel dağıtım için özel grafik oluşturma hizmeti URL'si	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	Grafik oluşturma kayıtları için hizmet tanımlayıcısı	-	your-service-id-123
DISABLED_TOOLS	Devre dışı bırakılacak araç adlarının virgülle ayrılmış listesi	-	generate_fishbone_diagram,generate_mind_map

📠 Özel Dağıtım

MCP Server Chart varsayılan olarak ücretsiz bir grafik oluşturma hizmeti sağlar. Özel dağıtım ihtiyacı olan kullanıcılar, kendi grafik oluşturma hizmetlerini özelleştirmek için VIS_REQUEST_SERVER kullanmayı deneyebilirler.

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

Özel bir ortamda bir HTTP hizmeti dağıtmak için AntV'nin GPT-Vis-SSR projesini kullanabilir ve ardından URL adresini VIS_REQUEST_SERVER env değişkeni aracılığıyla iletebilirsiniz.

• Yöntem: POST
• Parametre: GPT-Vis-SSR öğesine işleme için iletilecektir. Örneğin, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
• Dönüş: HTTP hizmetinin dönüş nesnesi.
  • success: boolean Grafik görüntüsünün başarıyla oluşturulup oluşturulmadığı.
  • resultObj: string Grafik görüntüsü URL'si.
  • errorMessage: string success = false olduğunda hata mesajını döndürür.

[!NOTE] Özel dağıtım çözümü şu anda 3 aracı içeren coğrafi görselleştirme grafiği oluşturmayı desteklememektedir: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Kayıt Oluşturma

Varsayılan olarak, kullanıcıların sonuçları kendilerinin kaydetmesi gerekir, ancak biz ayrıca grafik oluşturma kayıtlarını görüntülemek için bir hizmet de sağlıyoruz; bu, kullanıcıların kendileri için bir hizmet tanımlayıcısı oluşturmasını ve yapılandırmasını gerektirir.

Kişisel bir hizmet tanımlayıcısı oluşturmak için mini programı açmak üzere Alipay ile tarayın (aşağıdaki "Benim" menüsüne tıklayın, "Hizmetlerim" sayfasına girin, "Oluştur" düğmesine tıklayın ve başarılı olduktan sonra "Kopyala" düğmesine tıklayın):

Ardından, MCP sunucu yapılandırmasına SERVICE_ID ortam değişkenini eklemeniz gerekir. Örneğin, Mac için yapılandırma aşağıdaki gibidir (Windows sistemleri için, yalnızca env değişkenini ekleyin):

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

MCP Sunucu yapılandırmasını güncelledikten sonra, AI istemci uygulamanızı yeniden başlatmanız ve MCP Sunucusunu başarıyla başlatıp bağlanıp bağlanmadığınızı tekrar kontrol etmeniz gerekir. Ardından haritayı tekrar oluşturmayı deneyebilirsiniz. Oluşturma başarılı olduktan sonra, mini programın "Haritalarım" sayfasına giderek harita oluşturma kayıtlarınızı görüntüleyebilirsiniz.

🎛️ Araç Filtreleme

DISABLED_TOOLS ortam değişkenini kullanarak belirli grafik oluşturma araçlarını devre dışı bırakabilirsiniz. Bu, belirli araçların MCP istemcinizle uyumluluk sorunları olduğunda veya mevcut işlevselliği sınırlamak istediğinizde kullanışlıdır.

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

Filtreleme için kullanılabilir araç adları ✨ Özellikler bölümüne bakın.

🔨 Geliştirme

Bağımlılıkları kurun:

npm install

Sunucuyu derleyin:

npm run build

MCP sunucusunu başlatın:

npm run start

MCP sunucusunu SSE taşıma ile başlatın:

node build/index.js -t sse

MCP sunucusunu Streamable taşıma ile başlatın:

node build/index.js -t streamable

📄 Lisans

MIT@AntV.