Chart

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 nutzen.

Dies ist ein TypeScript-basierter MCP-Server, der Funktionen zur Diagrammerstellung bereitstellt. Er ermöglicht die Erstellung verschiedener Diagrammtypen über MCP-Tools. Sie können ihn auch in Dify verwenden.

📋 Inhaltsverzeichnis

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

✨ Funktionen

Derzeit werden mehr als 26 Diagrammtypen unterstützt.

1. generate_area_chart: Erzeugt ein area-Diagramm, das zur Anzeige des Trends von Daten unter einer kontinuierlichen unabhängigen Variable verwendet wird und die Beobachtung allgemeiner Datentrends ermöglicht.
2. generate_bar_chart: Erzeugt ein bar-Diagramm, das zum Vergleich von Werten über verschiedene Kategorien verwendet wird und sich für horizontale Vergleiche eignet.
3. generate_boxplot_chart: Erzeugt ein boxplot, das zur Anzeige der Datenverteilung verwendet wird, einschließlich Median, Quartilen und Ausreißern.
4. generate_column_chart: Erzeugt ein column-Diagramm, das zum Vergleich von Werten über verschiedene Kategorien verwendet wird und sich für vertikale Vergleiche eignet.
5. generate_district_map – Erzeugt ein district-map, das zur Anzeige von Verwaltungsbezirken und Datenverteilung verwendet wird.
6. generate_dual_axes_chart: Erzeugt ein dual-axes-Diagramm, das zur Anzeige der Beziehung zwischen zwei Variablen mit unterschiedlichen Einheiten oder Bereichen verwendet wird.
7. generate_fishbone_diagram: Erzeugt ein fishbone-Diagramm, auch bekannt als Ishikawa-Diagramm, das zur Identifizierung und Anzeige der Grundursachen eines Problems verwendet wird.
8. generate_flow_diagram: Erzeugt ein flowchart, das zur Anzeige der Schritte und der Reihenfolge eines Prozesses verwendet wird.
9. generate_funnel_chart: Erzeugt ein funnel-Diagramm, das zur Anzeige von Datenverlusten in verschiedenen Phasen verwendet wird.
10. generate_histogram_chart: Erzeugt ein histogram, das zur Anzeige der Datenverteilung verwendet wird, indem Daten in Intervalle unterteilt und die Anzahl der Datenpunkte in jedem Intervall gezählt wird.
11. generate_line_chart: Erzeugt ein line-Diagramm, das zur Anzeige des Datentrends über die Zeit oder eine andere kontinuierliche Variable verwendet wird.
12. generate_liquid_chart: Erzeugt ein liquid-Diagramm, das zur Anzeige des Datenanteils verwendet wird und Prozentsätze visuell in Form von wassergefüllten Kugeln darstellt.
13. generate_mind_map: Erzeugt ein mind-map, das zur Anzeige von Denkprozessen und hierarchischen Informationen verwendet wird.
14. generate_network_graph: Erzeugt einen network-Graphen, der zur Anzeige von Beziehungen und Verbindungen zwischen Knoten verwendet wird.
15. generate_organization_chart: Erzeugt ein organizational-Diagramm, das zur Anzeige der Struktur einer Organisation und von Personalbeziehungen verwendet wird.
16. generate_path_map – Erzeugt ein path-map, das zur Anzeige der Routenplanungsergebnisse für POIs verwendet wird.
17. generate_pie_chart: Erzeugt ein pie-Diagramm, das zur Anzeige des Datenanteils verwendet wird und Daten in Teile unterteilt, die durch Sektoren dargestellt werden und den Prozentsatz jedes Teils zeigen.
18. generate_pin_map – Erzeugt ein pin-map, das zur Anzeige der Verteilung von POIs verwendet wird.
19. generate_radar_chart: Erzeugt ein radar-Diagramm, das zur umfassenden Anzeige mehrdimensionaler Daten verwendet wird und mehrere Dimensionen in einem radarförmigen Format darstellt.
20. generate_sankey_chart: Erzeugt ein sankey-Diagramm, das zur Anzeige von Datenfluss und -volumen verwendet wird und die Bewegung von Daten zwischen verschiedenen Knoten in einem Sankey-Format darstellt.
21. generate_scatter_chart: Erzeugt ein scatter-Diagramm, das zur Anzeige der Beziehung zwischen zwei Variablen verwendet wird und Datenpunkte als verstreute Punkte in einem Koordinatensystem darstellt.
22. generate_treemap_chart: Erzeugt ein treemap, das zur Anzeige hierarchischer Daten verwendet wird und Daten in rechteckiger Form darstellt, wobei die Größe der Rechtecke den Wert der Daten repräsentiert.
23. generate_venn_chart: Erzeugt ein venn-Diagramm, das zur Anzeige von Beziehungen zwischen Mengen verwendet wird, einschließlich Schnittmengen, Vereinigungen und Differenzen.
24. generate_violin_chart: Erzeugt ein violin-Diagramm, das zur Anzeige der Datenverteilung verwendet wird und Merkmale von Boxplots und Dichteplots kombiniert, um eine detailliertere Ansicht der Datenverteilung zu bieten.
25. generate_word_cloud_chart: Erzeugt ein word-cloud, das zur Anzeige der Häufigkeit von Wörtern in Textdaten verwendet wird, wobei die Schriftgröße die Häufigkeit jedes Wortes angibt.
26. generate_spreadsheet: Erzeugt eine spreadsheet oder Pivot-Tabelle zur Anzeige von Tabellendaten. Wenn die Felder „rows“ oder „values“ angegeben sind, wird sie als Pivot-Tabelle (Kreuztabelle) gerendert; andernfalls als normale Tabelle.

[!NOTE] Das oben genannte 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-Serverkonfiguration hinzu. Auf Mac-Systemen:

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

Auf Windows-Systemen:

{
  "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- oder SSE-Protokoll verwenden.

🎨 Skill-Verwendung

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, indem Sie Folgendes verwenden:

npx skills add antvis/chart-visualization-skills

Geben Sie dann Ihre Daten ein 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ühren mit SSE- oder Streamable-Transport

Direkt ausführen

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 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 Toolnamen	-	generate_fishbone_diagram,generate_mind_map

📠 Private Bereitstellung

MCP Server Chart bietet standardmäßig einen kostenlosen Diagrammerstellungsdienst. Für Benutzer mit Bedarf an privater Bereitstellung 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: Wird an GPT-Vis-SSR zum Rendern übergeben. 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 Gibt an, ob das Diagrammbild erfolgreich generiert wurde.
  • resultObj: string Die URL des Diagrammbilds.
  • errorMessage: string Wenn success = false, wird die Fehlermeldung zurückgegeben.

[!NOTE] Die Lösung für private Bereitstellung 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 selbst generieren und konfigurieren.

Verwenden Sie Alipay, um den QR-Code zu scannen und das Mini-Programm zu öffnen, 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 nach Erfolg auf die Schaltfläche „Kopieren“):

Als Nächstes müssen Sie die Umgebungsvariable SERVICE_ID zur MCP-Serverkonfiguration hinzufügen. Zum Beispiel lautet 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": "***********************************"
      }
    }
  }
}

Nach der Aktualisierung der MCP-Serverkonfiguration müssen Sie Ihre KI-Clientanwendung neu starten und erneut prüfen, ob Sie den MCP-Server gestartet und verbunden haben. Dann können Sie versuchen, die Karte erneut zu generieren. Nach erfolgreicher Generierung können Sie auf der Seite „Meine Karte“ des Mini-Programms Ihre Kartengenerierungsaufzeichnungen anzeigen.

🎛️ Tool-Filterung

Sie können bestimmte Diagrammerstellungstools mithilfe 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 Toolnamen für die Filterung Siehe ✨ Funktionen.

🔨 Entwicklung

Abhängigkeiten installieren:

npm install

Den Server erstellen:

npm run build

Den MCP-Server starten:

npm run start

Den MCP-Server mit SSE-Transport starten:

node build/index.js -t sse

Den MCP-Server mit Streamable-Transport starten:

node build/index.js -t streamable

📄 Lizenz

MIT@AntV.