MCP Server Chart

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

Bu, grafik oluşturma özelliklerini sağlayan TypeScript tabanlı bir MCP sunucusudur. MCP araçları aracılığıyla çeşitli grafik türleri oluşturmanıza olanak tanır. Bunu Dify uygulamasında da kullanabilirsiniz.

📋 İçindekiler

✨ Özellikler
🤖 Kullanım
🎨 Yetenek Kullanımı
🚰 SSE veya Streamable transport ile çalıştırın
🎮 CLI Seçenekleri
⚙️ Ortam Değişkenleri
📠 Özel Dağıtım
🗺️ Kayıt Oluşturun
🎛️ Araç Filtreleme
🔨 Geliştirme
📄 Lisans

✨ Özellikler

Şu anda 26+ grafik desteklenmektedir.

generate_area_chart: alan grafiği oluşturun, sürekli bağımsız değişken altında verilerin eğilimini göstermek için kullanılır, genel veri eğilimlerinin gözlemlenmesine izin verir.
generate_bar_chart: çubuk grafiği oluşturun, farklı kategoriler arasında değerleri karşılaştırmak için kullanılır, yatay karşılaştırmalar için uygun.
generate_boxplot_chart: boxplot oluşturun, veri dağılımını, medyanı, dörttebirlikler ve aykırı değerleri göstermek için kullanılır.
generate_column_chart: sütun grafiği oluşturun, farklı kategoriler arasında değerleri karşılaştırmak için kullanılır, dikey karşılaştırmalar için uygun.
generate_district_map - bölge haritası oluşturun, idari bölümleri ve veri dağılımını göstermek için kullanılır.
generate_dual_axes_chart: çift eksenli grafik oluşturun, farklı birimler veya aralıklar ile iki değişken arasındaki ilişkiyi göstermek için kullanılır.
generate_fishbone_diagram: balık kılçığı diyagramı oluşturun, Ishikawa diyagramı olarak da bilinir, bir problemin kök nedenlerini tanımlamak ve göstermek için kullanılır.
generate_flow_diagram: akış şeması oluşturun, bir sürecin adımlarını ve sırasını göstermek için kullanılır.
generate_funnel_chart: huni grafiği oluşturun, farklı aşamalardaki veri kaybını göstermek için kullanılır.
generate_histogram_chart: histogram oluşturun, 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ılır.
generate_line_chart: çizgi grafiği oluşturun, zamanla veya başka bir sürekli değişkenle verilerin eğilimini göstermek için kullanılır.
generate_liquid_chart: sıvı grafiği oluşturun, veri oranını göstermek için kullanılır, yüzdeleri görsel olarak su dolu küreler şeklinde temsil eder.
generate_mind_map: zihin haritası oluşturun, düşünce süreçlerini ve hiyerarşik bilgileri göstermek için kullanılır.
generate_network_graph: ağ grafiği oluşturun, düğümler arasındaki ilişkileri ve bağlantıları göstermek için kullanılır.
generate_organization_chart: örgütsel grafik oluşturun, bir örgütün yapısını ve personel ilişkilerini göstermek için kullanılır.
generate_path_map - yol haritası oluşturun, POI'ler için rota planlama sonuçlarını göstermek için kullanılır.
generate_pie_chart: pasta grafiği oluşturun, veri oranını göstermek için kullanılır, bunu her kısmın yüzdesini gösteren sektörler tarafından temsil edilen parçalara böler.
generate_pin_map - pim haritası oluşturun, POI'lerin dağılımını göstermek için kullanılır.
generate_radar_chart: radar grafiği oluşturun, çok boyutlu verileri kapsamlı şekilde göstermek için kullanılır, birden çok boyutu radar benzeri bir biçimde gösterir.
generate_sankey_chart: sankey grafiği oluşturun, veri akışını ve hacmini göstermek için kullanılır, farklı düğümler arasında verilerin hareketini Sankey stili biçimde temsil eder.
generate_scatter_chart: dağılım grafiği oluşturun, iki değişken arasındaki ilişkiyi göstermek için kullanılır, veri noktalarını koordinat sisteminde dağılmış noktalar olarak gösterir.
generate_treemap_chart: ağaç haritası oluşturun, hiyerarşik verileri göstermek için kullanılır, verileri dikdörtgen biçimlerde gösterir; burada dikdörtgenlerin boyutu verilerin değerini temsil eder.
generate_venn_chart: venn diyagramı oluşturun, kesişimler, birleşimler ve farklar da dahil olmak üzere kümeler arasındaki ilişkileri göstermek için kullanılır.
generate_violin_chart: keman grafiği oluşturun, veri dağılımını göstermek için kullanılır, boxplot'lar ve yoğunluk grafiklerinin özelliklerini birleştirerek veri dağılımının daha ayrıntılı bir görünümünü sağlar.
generate_word_cloud_chart: kelime bulutu oluşturun, metinsel verilerde kelime sıklığını göstermek için kullanılır, yazı tipi boyutları her kelimenin sıklığını gösterir.
generate_spreadsheet: Tablosal verileri göstermek için bir elektronik tablo veya pivot tablo oluşturun. 'rows' veya 'values' alanları sağlandığında, pivot tablo (çapraz tabülasyon) olarak işlenir; aksi takdirde normal bir tablo olarak işlenir.

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

🤖 Kullanım

Claude, VSCode, Cline, Cherry Studio, Cursor gibi Masaüstü Uygulaması ile kullanmak için aşağıdaki MCP sunucusu 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 aliyun, modelscope, glama.ai, smithery.ai veya HTTP, SSE Protokolü ile diğer platformlarda kullanabilirsiniz.

🎨 Yetenek Kullanımı

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

Yeteneği şu adresten ekleyebilirsiniz https://github.com/antvis/chart-visualization-skills:

npx skills add antvis/chart-visualization-skills

Daha sonra verilerinizi sağlayın veya istediğiniz görselleştirmeyi açıklayın. Yetenek akıllıca 25+ grafik türünden seçim yapacak ve grafiği sizin için oluşturacaktır.

🚰 SSE veya Streamable transport ile çalıştırın

Doğrudan çalıştırın

Paketi genel olarak yükleyin.

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

Sunucuyu tercih ettiğiniz transport seçeneği ile çalıştırın:

# SSE transport için (varsayılan endpoint: /sse)
mcp-server-chart --transport sse

# Özel endpoint ile Streamable transport için
mcp-server-chart --transport streamable

Daha sonra sunucuya şu adresten erişebilirsiniz:

SSE transport: http://localhost:1122/sse
Streamable transport: http://localhost:1122/mcp

Docker dağıtımı

Docker dizinine girin.

cd docker

Docker-compose kullanarak dağıtın.

docker compose up -d

Daha sonra sunucuya şu adresten erişebilirsiniz:

SSE transport: http://localhost:1123/sse
Streamable transport: http://localhost:1122/mcp

🎮 CLI Seçenekleri

MCP sunucusunu çalıştırırken aşağıdaki CLI seçeneklerini de kullanabilirsiniz. CLI'yi -H ile çalıştırarak komut seçeneklerini görebilirsiniz.

MCP Server Chart CLI

Options:
  --transport, -t  Taşıma protokolünü belirtin: "stdio", "sse" veya "streamable" (varsayılan: "stdio")
  --host, -h       SSE veya streamable transport için ana bilgisayarı belirtin (varsayılan: localhost)
  --port, -p       SSE veya streamable transport için bağlantı noktasını belirtin (varsayılan: 1122)
  --endpoint, -e   Taşıma için uç noktasını belirtin:
                   - SSE için: varsayılan "/sse"
                   - Streamable için: varsayılan "/mcp"
  --help, -H       Bu yardım mesajını göster

⚙️ 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 VIS_REQUEST_SERVER kullanarak kendi grafik oluşturma hizmetlerini özelleştirebilirler.

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

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

Yöntem: POST
Parametre: GPT-Vis-SSR uygulamasına geçirilecektir. Ö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ü başarıyla oluşturuldu mu.
- resultObj: string Grafik görüntüsü URL'si.
- errorMessage: string success = false olduğunda hata mesajını döndür.

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

🗺️ Kayıt Oluşturun

Varsayılan olarak, kullanıcıların sonuçları kendileri kaydetmeleri gerekir, ancak biz ayrıca grafik oluşturma kayıtlarını görmek için bir hizmet sağlarız; bu, kullanıcıların kendilerine bir hizmet tanımlayıcısı oluşturup yapılandırmasını gerektirir.

Mini uygulamayı açmak için Alipay ile tarayın ve kişisel bir hizmet tanımlayıcısı oluşturun (aşağıda "Benim" menüsüne tıklayın, "Hizmetlerim" sayfasına girin, "Oluştur" düğmesine tıklayın ve başarı sonrasında "Kopyala" düğmesine tıklayın):

Ardından, MCP sunucusu 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 sadece env değişkenini ekleyin):

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

MCP Server yapılandırmasını güncelledikten sonra, AI istemci uygulamanızı yeniden başlatmanız ve MCP Server'ı başarıyla başlattığınız ve bağlandığınızı kontrol etmeniz gerekir. Daha sonra haritayı yeniden oluşturmayı deneyebilirsiniz. Oluşturma başarılı olduktan sonra, mini uygulamanın "Haritalarım" sayfasına giderek harita oluşturma kayıtlarınızı görebilirsiniz.

🎛️ Araç Filtreleme

DISABLED_TOOLS ortam değişkenini kullanarak belirli grafik oluşturma araçlarını devre dışı bırakabilirsiniz. Bu, bazı araçların MCP istemciniz ile uyumluluk sorunları olması veya kullanılabilir işlevselliği sınırlamak istediğinizde yararlı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ı Bkz. ✨ Özellikler.

🔨 Geliştirme

Bağımlılıkları yükleyin:

npm install

Sunucuyu derleyin:

npm run build

MCP sunucusunu başlatın:

npm run start

MCP sunucusunu SSE transport ile başlatın:

node build/index.js -t sse

MCP sunucusunu Streamable transport ile başlatın:

node build/index.js -t streamable

📄 Lisans

MIT@AntV.

antvis/mcp-server-chart

Bu MCP sunucusu hakkında