Skip to main content
Glama

generate_sankey_chart

Visualize data flow between stages or categories using a sankey chart, such as tracking user journeys from landing to purchase completion, with customizable styles and themes.

Instructions

Generate a sankey chart to visualize the flow of data between different stages or categories, such as, the user journey from landing on a page to completing a purchase.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
dataYesDate for sankey chart, such as, [{ source: 'Landing Page', target: 'Product Page', value: 50000 }, { source: 'Product Page', target: 'Add to Cart', value: 35000 }, { source: 'Add to Cart', target: 'Checkout', value: 25000 }, { source: 'Checkout', target: 'Payment', value: 15000 }, { source: 'Payment', target: 'Purchase Completed', value: 8000 }].
heightNoSet the height of chart, default is 400.
nodeAlignNoAlignment of nodes in the sankey chart, such as, 'left', 'right', 'justify', or 'center'.center
styleNoCustom style configuration for the chart.
themeNoSet the theme for the chart, optional, default is 'default'.default
titleNoSet the title of chart.
widthNoSet the width of chart, default is 600.

Implementation Reference

  • Generic handler for the generate_sankey_chart tool (and all chart tools). Maps 'generate_sankey_chart' to chart type 'sankey' at line 29, validates arguments using the sankey schema, and calls generateChartUrl to produce the chart.
    export async function callTool(tool: string, args: object = {}) { logger.info(`Calling tool: ${tool}`); const chartType = CHART_TYPE_MAP[tool as keyof typeof CHART_TYPE_MAP]; if (!chartType) { logger.error(`Unknown tool: ${tool}`); throw new McpError(ErrorCode.MethodNotFound, `Unknown tool: ${tool}.`); } try { // Validate input using Zod before sending to API. // Select the appropriate schema based on the chart type. const schema = Charts[chartType].schema; if (schema) { // Use safeParse instead of parse and try-catch. const result = z.object(schema).safeParse(args); if (!result.success) { logger.error(`Invalid parameters: ${result.error.message}`); throw new McpError( ErrorCode.InvalidParams, `Invalid parameters: ${result.error.message}`, ); } } const isMapChartTool = [ "generate_district_map", "generate_path_map", "generate_pin_map", ].includes(tool); if (isMapChartTool) { // For map charts, we use the generateMap function, and return the mcp result. const { metadata, ...result } = await generateMap(tool, args); return result; } const url = await generateChartUrl(chartType, args); logger.info(`Generated chart URL: ${url}`); return { content: [ { type: "text", text: url, }, ], _meta: { description: "This is the chart's spec and configuration, which can be renderred to corresponding chart by AntV GPT-Vis chart components.", spec: { type: chartType, ...args }, }, }; // biome-ignore lint/suspicious/noExplicitAny: <explanation> } catch (error: any) { logger.error( `Failed to generate chart: ${error.message || "Unknown error"}.`, ); if (error instanceof McpError) throw error; if (error instanceof ValidateError) throw new McpError(ErrorCode.InvalidParams, error.message); throw new McpError( ErrorCode.InternalError, `Failed to generate chart: ${error?.message || "Unknown error."}`, ); } }
  • Zod-based input schema and tool metadata (name, description, inputSchema) for generate_sankey_chart.
    const data = z.object({ source: z.string(), target: z.string(), value: z.number(), }); const schema = { data: z .array(data) .describe( "Date for sankey chart, such as, [{ source: 'Landing Page', target: 'Product Page', value: 50000 }, { source: 'Product Page', target: 'Add to Cart', value: 35000 }, { source: 'Add to Cart', target: 'Checkout', value: 25000 }, { source: 'Checkout', target: 'Payment', value: 15000 }, { source: 'Payment', target: 'Purchase Completed', value: 8000 }].", ) .nonempty({ message: "Sankey chart data cannot be empty." }), nodeAlign: z .enum(["left", "right", "justify", "center"]) .optional() .default("center") .describe( "Alignment of nodes in the sankey chart, such as, 'left', 'right', 'justify', or 'center'.", ), style: z .object({ backgroundColor: BackgroundColorSchema, palette: PaletteSchema, texture: TextureSchema, }) .optional() .describe( "Style configuration for the chart with a JSON object, optional.", ), theme: ThemeSchema, width: WidthSchema, height: HeightSchema, title: TitleSchema, }; const tool = { name: "generate_sankey_chart", description: "Generate a sankey chart to visualize the flow of data between different stages or categories, such as, the user journey from landing on a page to completing a purchase.", inputSchema: zodToJsonSchema(schema), };
  • src/server.ts:64-77 (registration)
    MCP server tool handler setup. listTools dynamically includes generate_sankey_chart from Charts.sankey.tool (via getEnabledTools()), and tools/call requests are dispatched to callTool with the tool name and arguments.
    function setupToolHandlers(server: Server): void { logger.info("setting up tool handlers..."); server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: getEnabledTools().map((chart) => chart.tool), })); // biome-ignore lint/suspicious/noExplicitAny: <explanation> server.setRequestHandler(CallToolRequestSchema, async (request: any) => { logger.info("calling tool", request.params.name, request.params.arguments); return await callTool(request.params.name, request.params.arguments); }); logger.info("tool handlers set up"); }
  • Helper function called by the handler to POST the chart type ('sankey') and configuration to an external visualization server, returning the rendered chart URL.
    export async function generateChartUrl( type: string, // biome-ignore lint/suspicious/noExplicitAny: <explanation> options: Record<string, any>, ): Promise<string> { const url = getVisRequestServer(); const response = await axios.post( url, { type, ...options, source: "mcp-server-chart", }, { headers: { "Content-Type": "application/json", }, }, ); const { success, errorMessage, resultObj } = response.data; if (!success) { throw new Error(errorMessage); } return resultObj; }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/antvis/mcp-server-chart'

If you have feedback or need assistance with the MCP directory API, please join our Discord server