Chart MCP Server

resmi

AntV kullanarak görsel grafikler oluşturmak için bir Model Context Protocol sunucusu.

Dokümantasyon

MCP Sunucu Grafiği

AntV kullanarak grafikler oluşturmak için bir Model Bağlam Protokolü 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 Akışkan aktarım ile çalıştırma
🎮 CLI Seçenekleri
⚙️ Ortam Değişkenleri
📠 Özel Dağıtım
🗺️ Oluşturma Kayıtları
🎛️ Araç Filtreleme
🔨 Geliştirme
📄 Lisans

✨ Özellikler

Şu anda 26'dan fazla grafik desteklenmektedir.

generate_area_chart: Bir area grafiği oluşturur, sürekli bir bağımsız değişken altında verinin eğilimini göstermek için kullanılır, genel veri eğilimlerinin gözlemlenmesine olanak tanır.
generate_bar_chart: Bir bar grafiği oluşturur, farklı kategoriler arasındaki değerleri karşılaştırmak için kullanılır, yatay karşılaştırmalar için uygundur.
generate_boxplot_chart: Bir boxplot oluşturur, medyan, çeyrekler ve aykırı değerler dahil olmak üzere verinin dağılımını göstermek için kullanılır.
generate_column_chart: Bir column grafiği oluşturur, farklı kategoriler arasındaki değerleri karşılaştırmak için kullanılır, dikey karşılaştırmalar için uygundur.
generate_district_map - Bir district-map oluşturur, idari bölümleri ve veri dağılımını göstermek için kullanılır.
generate_dual_axes_chart: Bir dual-axes grafiği oluşturur, farklı birimlere veya aralıklara sahip iki değişken arasındaki ilişkiyi göstermek için kullanılır.
generate_fishbone_diagram: Bir fishbone diyagramı oluşturur, aynı zamanda Ishikawa diyagramı olarak da bilinir, bir sorunun kök nedenlerini belirlemek ve göstermek için kullanılır.
generate_flow_diagram: Bir flowchart oluşturur, bir sürecin adımlarını ve sırasını göstermek için kullanılır.
generate_funnel_chart: Bir funnel grafiği oluşturur, farklı aşamalardaki veri kaybını göstermek için kullanılır.
generate_histogram_chart: Bir histogram oluşturur, veriyi aralıklara bölerek ve her aralıktaki veri noktası sayısını sayarak verinin dağılımını göstermek için kullanılır.
generate_line_chart: Bir line grafiği oluşturur, zaman veya başka bir sürekli değişken üzerindeki veri eğilimini göstermek için kullanılır.
generate_liquid_chart: Bir liquid grafiği oluşturur, verinin oranını göstermek için kullanılır, yüzdeleri su dolu küreler şeklinde görsel olarak temsil eder.
generate_mind_map: Bir mind-map oluşturur, düşünce süreçlerini ve hiyerarşik bilgileri göstermek için kullanılır.
generate_network_graph: Bir network grafiği oluşturur, düğümler arasındaki ilişkileri ve bağlantıları göstermek için kullanılır.
generate_organization_chart: Bir organizational grafiği oluşturur, bir organizasyonun yapısını ve personel ilişkilerini göstermek için kullanılır.
generate_path_map - Bir path-map oluşturur, İÇN'ler için rota planlama sonuçlarını göstermek için kullanılır.
generate_pie_chart: Bir pie grafiği oluşturur, verinin oranını göstermek için kullanılır, her bir parçanın yüzdesini gösteren sektörlerle temsil edilen parçalara böler.
generate_pin_map - Bir pin-map oluşturur, İÇN'lerin dağılımını göstermek için kullanılır.
generate_radar_chart: Bir radar grafiği oluşturur, çok boyutlu veriyi kapsamlı bir şekilde göstermek için kullanılır, radar benzeri bir formatta birden çok boyutu gösterir.
generate_sankey_chart: Bir sankey grafiği oluşturur, veri akışını ve hacmini göstermek için kullanılır, Sankey tarzı bir formatta farklı düğümler arasındaki veri hareketini temsil eder.
generate_scatter_chart: Bir scatter grafiği oluşturur, iki değişken arasındaki ilişkiyi göstermek için kullanılır, veri noktalarını bir koordinat sisteminde dağılmış noktalar olarak gösterir.
generate_treemap_chart: Bir treemap oluşturur, hiyerarşik veriyi göstermek için kullanılır, dikdörtgenlerin boyutunun verinin değerini temsil ettiği dikdörtgen formlarda veriyi gösterir.
generate_venn_chart: Bir venn diyagramı oluşturur, kesişimler, birleşimler ve farklar dahil olmak üzere kümeler arasındaki ilişkileri göstermek için kullanılır.
generate_violin_chart: Bir violin grafiği oluşturur, verinin dağılımını göstermek için kullanılır, 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ğlar.
generate_word_cloud_chart: Bir word-cloud oluşturur, metinsel verideki kelimelerin sıklığını göstermek için kullanılır, yazı tipi boyutları her kelimenin sıklığını belirtir.
generate_spreadsheet: Tablo halindeki verileri görüntülemek için bir spreadsheet veya pivot tablo oluşturur. 'rows' veya 'values' alanları sağlandığında, pivot tablo (çapraz tablolama) 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çindeki harita oluşturmayı destekler.

🤖 Kullanım

Claude, VSCode, Cline, Cherry Studio, Cursor gibi Desktop APP 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 (Claude Code gibi), 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 şunu kullanarak 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'ten fazla grafik türü arasından akıllıca seçim yapacak ve sizin için grafiği oluşturacaktır.

🚰 SSE veya Akışkan aktarım ile çalıştırma

Doğrudan çalıştırma

Paketi global olarak yükleyin.

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

Sunucuyu tercih ettiğiniz aktarım 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 aktarımı: http://localhost:1122/sse
Akışkan aktarım: 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 aktarımı: http://localhost:1123/sse
Akışkan aktarım: http://localhost:1122/mcp

🎮 CLI Seçenekleri

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

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 için, kendi grafik oluşturma hizmetlerini özelleştirmek üzere 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 ortam değişkeni aracılığıyla iletebilirsiniz.

Yöntem: POST
Parametre: İşleme için GPT-Vis-SSR'e 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ü 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 araç dahil olmak üzere coğrafi görselleştirme grafik oluşturmayı desteklememektedir: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Oluşturma Kayıtları

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 sağlıyoruz, bu da 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 sadece 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 Sunucusuna başarıyla başlatıp bağlanmadığınızı tekrar kontrol etmeniz gerekir. Ardından haritayı tekrar oluşturmayı deneyebilirsiniz. Oluşturma başarılı olduktan sonra, harita oluşturma kayıtlarınızı görüntülemek için mini programın "Haritalarım" sayfasına gidebilirsiniz.

🎛️ Araç Filtreleme

DISABLED_TOOLS ortam değişkenini kullanarak belirli grafik oluşturma araçlarını devre dışı bırakabilirsiniz. Bu, belirli araçlar MCP istemcinizle uyumluluk sorunları yaşadığında 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ı yükleyin:

npm install

Sunucuyu derleyin:

npm run build

MCP sunucusunu başlatın:

npm run start

MCP sunucusunu SSE aktarımı ile başlatın:

node build/index.js -t sse

MCP sunucusunu Akışkan aktarım ile başlatın:

node build/index.js -t streamable

📄 Lisans

MIT@AntV.