Chart MCP Server

offiziell

Ein Model Context Protocol-Server zur Generierung visueller Diagramme mit AntV.

Dokumentation

MCP Server Chart

Ein Model Context Protocol Server zur Erstellung von Diagrammen mit AntV. Wir können diesen MCP-Server für die Diagrammerstellung und Datenanalyse verwenden.

Dies ist ein TypeScript-basierter MCP-Server, der Funktionen zur Diagrammerstellung bietet. Er ermöglicht es Ihnen, verschiedene Diagrammtypen über MCP-Tools zu erstellen. Sie können ihn auch in Dify verwenden.

📋 Inhaltsverzeichnis

✨ Funktionen
🤖 Verwendung
🎨 Skill-Nutzung
🚰 Ausführung mit SSE- oder Streamable-Transport
🎮 CLI-Optionen
⚙️ Umgebungsvariablen
📠 Private Bereitstellung
🗺️ Aufzeichnungen generieren
🎛️ Tool-Filterung
🔨 Entwicklung
📄 Lizenz

✨ Funktionen

Derzeit werden über 26 Diagramme unterstützt.

generate_area_chart: Erzeugt ein area-Diagramm, das verwendet wird, um den Trend von Daten unter einer kontinuierlichen unabhängigen Variable anzuzeigen und die Beobachtung allgemeiner Datentrends zu ermöglichen.
generate_bar_chart: Erzeugt ein bar-Diagramm, das verwendet wird, um Werte über verschiedene Kategorien hinweg zu vergleichen, geeignet für horizontale Vergleiche.
generate_boxplot_chart: Erzeugt ein boxplot, das verwendet wird, um die Verteilung von Daten anzuzeigen, einschließlich Median, Quartilen und Ausreißern.
generate_column_chart: Erzeugt ein column-Diagramm, das verwendet wird, um Werte über verschiedene Kategorien hinweg zu vergleichen, geeignet für vertikale Vergleiche.
generate_district_map - Erzeugt ein district-map, das verwendet wird, um Verwaltungsgliederungen und Datenverteilung anzuzeigen.
generate_dual_axes_chart: Erzeugt ein dual-axes-Diagramm, das verwendet wird, um die Beziehung zwischen zwei Variablen mit unterschiedlichen Einheiten oder Bereichen anzuzeigen.
generate_fishbone_diagram: Erzeugt ein fishbone-Diagramm, auch bekannt als Ishikawa-Diagramm, das verwendet wird, um die Ursachen eines Problems zu identifizieren und anzuzeigen.
generate_flow_diagram: Erzeugt ein flowchart, das verwendet wird, um die Schritte und die Reihenfolge eines Prozesses anzuzeigen.
generate_funnel_chart: Erzeugt ein funnel-Diagramm, das verwendet wird, um Datenverluste in verschiedenen Phasen anzuzeigen.
generate_histogram_chart: Erzeugt ein histogram, das verwendet wird, um die Verteilung von Daten anzuzeigen, indem es in Intervalle unterteilt und die Anzahl der Datenpunkte in jedem Intervall gezählt wird.
generate_line_chart: Erzeugt ein line-Diagramm, das verwendet wird, um den Trend von Daten über die Zeit oder eine andere kontinuierliche Variable anzuzeigen.
generate_liquid_chart: Erzeugt ein liquid-Diagramm, das verwendet wird, um den Anteil von Daten anzuzeigen und Prozentsätze visuell in Form von wassergefüllten Kugeln darzustellen.
generate_mind_map: Erzeugt ein mind-map, das verwendet wird, um Denkprozesse und hierarchische Informationen anzuzeigen.
generate_network_graph: Erzeugt einen network-Graphen, der verwendet wird, um Beziehungen und Verbindungen zwischen Knoten anzuzeigen.
generate_organization_chart: Erzeugt ein organizational-Diagramm, das verwendet wird, um die Struktur einer Organisation und Personalbeziehungen anzuzeigen.
generate_path_map - Erzeugt ein path-map, das verwendet wird, um Routenplanungsergebnisse für POIs anzuzeigen.
generate_pie_chart: Erzeugt ein pie-Diagramm, das verwendet wird, um den Anteil von Daten anzuzeigen, indem es in Teile unterteilt wird, die durch Sektoren dargestellt werden, die den Prozentsatz jedes Teils zeigen.
generate_pin_map - Erzeugt ein pin-map, das verwendet wird, um die Verteilung von POIs anzuzeigen.
generate_radar_chart: Erzeugt ein radar-Diagramm, das verwendet wird, um mehrdimensionale Daten umfassend anzuzeigen und mehrere Dimensionen in einem radarähnlichen Format darzustellen.
generate_sankey_chart: Erzeugt ein sankey-Diagramm, das verwendet wird, um Datenfluss und -volumen anzuzeigen und die Bewegung von Daten zwischen verschiedenen Knoten in einem Sankey-ähnlichen Format darzustellen.
generate_scatter_chart: Erzeugt ein scatter-Diagramm, das verwendet wird, um die Beziehung zwischen zwei Variablen anzuzeigen und Datenpunkte als verstreute Punkte in einem Koordinatensystem darzustellen.
generate_treemap_chart: Erzeugt ein treemap, das verwendet wird, um hierarchische Daten anzuzeigen und Daten in rechteckigen Formen darzustellen, wobei die Größe der Rechtecke den Wert der Daten repräsentiert.
generate_venn_chart: Erzeugt ein venn-Diagramm, das verwendet wird, um Beziehungen zwischen Mengen anzuzeigen, einschließlich Schnittmengen, Vereinigungsmengen und Differenzmengen.
generate_violin_chart: Erzeugt ein violin-Diagramm, das verwendet wird, um die Verteilung von Daten anzuzeigen und Merkmale von Boxplots und Dichtediagrammen zu kombinieren, um eine detailliertere Ansicht der Datenverteilung zu bieten.
generate_word_cloud_chart: Erzeugt ein word-cloud, das verwendet wird, um die Häufigkeit von Wörtern in Textdaten anzuzeigen, wobei die Schriftgrößen die Häufigkeit jedes Wortes angeben.
generate_spreadsheet: Erzeugt ein spreadsheet oder eine Pivot-Tabelle zur Anzeige tabellarischer Daten. Wenn die Felder 'rows' oder 'values' bereitgestellt werden, wird es als Pivot-Tabelle (Kreuztabelle) dargestellt; andernfalls wird es als normale Tabelle dargestellt.

[!NOTE] Das obige Tool zur Erstellung geografischer Visualisierungsdiagramme verwendet den AMap-Dienst und unterstützt derzeit nur die Kartenerstellung innerhalb Chinas.

🤖 Verwendung

Zur Verwendung mit Desktop APP, wie Claude, VSCode, Cline, Cherry Studio, Cursor usw., fügen Sie die folgende MCP-Server-Konfiguration hinzu. Auf einem Mac-System:

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

Auf einem Windows-System:

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

Sie können es auch auf aliyun, modelscope, glama.ai, smithery.ai oder anderen mit HTTP, SSE-Protokoll verwenden.

🎨 Skill-Nutzung

Wenn Sie eine KI-IDE mit Skill-Unterstützung verwenden (wie Claude Code), können Sie den chart-visualization-Skill nutzen, um automatisch den besten Diagrammtyp auszuwählen und Visualisierungen zu generieren.

Sie können den Skill von https://github.com/antvis/chart-visualization-skills hinzufügen mit:

npx skills add antvis/chart-visualization-skills

Geben Sie dann Ihre Daten an oder beschreiben Sie die gewünschte Visualisierung. Der Skill wählt intelligent aus über 25 Diagrammtypen aus und generiert das Diagramm für Sie.

🚰 Ausführung mit SSE- oder Streamable-Transport

Direkte Ausführung

Installieren Sie das Paket global.

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

Führen Sie den Server mit Ihrer bevorzugten Transportoption aus:

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

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

Dann können Sie auf den Server zugreifen unter:

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

Docker-Bereitstellung

Wechseln Sie in das Docker-Verzeichnis.

cd docker

Stellen Sie es mit docker-compose bereit.

docker compose up -d

Dann können Sie auf den Server zugreifen unter:

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

🎮 CLI-Optionen

Sie können auch die folgenden CLI-Optionen verwenden, wenn Sie den MCP-Server ausführen. Befehlsoptionen durch Ausführen der CLI mit -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

⚙️ Umgebungsvariablen

Variable	Beschreibung	Standard	Beispiel
`VIS_REQUEST_SERVER`	Benutzerdefinierte Diagrammerstellungsdienst-URL für private Bereitstellung	`https://antv-studio.alipay.com/api/gpt-vis`	`https://your-server.com/api/chart`
`SERVICE_ID`	Dienstkennung für Diagrammerstellungsaufzeichnungen	-	`your-service-id-123`
`DISABLED_TOOLS`	Kommagetrennte Liste der zu deaktivierenden Tool-Namen	-	`generate_fishbone_diagram,generate_mind_map`

📠 Private Bereitstellung

MCP Server Chart bietet standardmäßig einen kostenlosen Diagrammerstellungsdienst. Für Benutzer, die eine private Bereitstellung benötigen, können sie versuchen, VIS_REQUEST_SERVER zu verwenden, um ihren eigenen Diagrammerstellungsdienst anzupassen.

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

Sie können das AntV-Projekt GPT-Vis-SSR verwenden, um einen HTTP-Dienst in einer privaten Umgebung bereitzustellen, und dann die URL-Adresse über die Umgebungsvariable VIS_REQUEST_SERVER übergeben.

Methode: POST
Parameter: Welcher an GPT-Vis-SSR zum Rendern übergeben wird. Zum Beispiel { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
Rückgabe: Das Rückgabeobjekt des HTTP-Dienstes.
- success: boolean Ob das Diagrammbild erfolgreich generiert wurde.
- resultObj: string Die URL des Diagrammbildes.
- errorMessage: string Wenn success = false, wird die Fehlermeldung zurückgegeben.

[!NOTE] Die private Bereitstellungslösung unterstützt derzeit keine geografischen Visualisierungsdiagramme, einschließlich 3 Tools: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Aufzeichnungen generieren

Standardmäßig müssen Benutzer die Ergebnisse selbst speichern, aber wir bieten auch einen Dienst zum Anzeigen der Diagrammerstellungsaufzeichnungen an, der erfordert, dass Benutzer eine Dienstkennung für sich generieren und konfigurieren.

Verwenden Sie Alipay zum Scannen und Öffnen des Miniprogramms, um eine persönliche Dienstkennung zu generieren (klicken Sie unten auf das Menü "Mein", gehen Sie zur Seite "Meine Dienste", klicken Sie auf die Schaltfläche "Generieren" und klicken Sie nach Erfolg auf die Schaltfläche "Kopieren"):

Als Nächstes müssen Sie die Umgebungsvariable SERVICE_ID zur MCP-Server-Konfiguration hinzufügen. Zum Beispiel ist die Konfiguration für Mac wie folgt (für Windows-Systeme fügen Sie einfach die Variable env hinzu):

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

Nachdem Sie die MCP-Server-Konfiguration aktualisiert haben, müssen Sie Ihre KI-Client-Anwendung neu starten und erneut überprüfen, ob Sie den MCP-Server erfolgreich gestartet und verbunden haben. Dann können Sie erneut versuchen, die Karte zu generieren. Nach erfolgreicher Generierung können Sie zur Seite "Meine Karte" des Miniprogramms gehen, um Ihre Kartenerstellungsaufzeichnungen anzuzeigen.

🎛️ Tool-Filterung

Sie können bestimmte Diagrammerstellungstools mit der Umgebungsvariable DISABLED_TOOLS deaktivieren. Dies ist nützlich, wenn bestimmte Tools Kompatibilitätsprobleme mit Ihrem MCP-Client haben oder wenn Sie die verfügbare Funktionalität einschränken möchten.

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

Verfügbare Tool-Namen zur Filterung Siehe die ✨ Funktionen.

🔨 Entwicklung

Abhängigkeiten installieren:

npm install

Server bauen:

npm run build

MCP-Server starten:

npm run start

MCP-Server mit SSE-Transport starten:

node build/index.js -t sse

MCP-Server mit Streamable-Transport starten:

node build/index.js -t streamable

📄 Lizenz

MIT@AntV.