generate_sankey_chart
Visualize data flow between stages or categories, such as user journeys, with a Sankey chart. Customize height, width, node alignment, theme, and output formats (PNG, SVG, or ECharts option).
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
| Name | Required | Description | Default |
|---|---|---|---|
| data | Yes | Data for sankey chart, such as, [{ source: 'Landing Page', target: 'Product Page', value: 50000 }, { source: 'Product Page', target: 'Add to Cart', value: 35000 }]. | |
| height | No | Set the height of the chart, default is 600px. | |
| nodeAlign | No | Alignment of nodes in the sankey chart, such as, 'left', 'right', or 'justify'. | justify |
| outputType | No | The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option. | png |
| theme | No | Set the theme for the chart, optional, default is 'default'. | default |
| title | No | Set the title of the chart. | |
| width | No | Set the width of the chart, default is 800px. |
Implementation Reference
- src/tools/sankey.ts:45-125 (handler)The 'run' function that processes the input parameters to create nodes and links from the data, constructs the ECharts Sankey chart options, and generates the output image using generateChartImage.
run: async (params: { data: Array<{ source: string; target: string; value: number }>; height: number; nodeAlign?: "left" | "right" | "justify"; theme?: "default" | "dark"; title?: string; width: number; outputType?: "png" | "svg" | "option"; }) => { const { data, height, nodeAlign = "justify", theme, title, width, outputType, } = params; // Extract unique nodes from data const nodeSet = new Set<string>(); for (const item of data) { nodeSet.add(item.source); nodeSet.add(item.target); } // Create nodes array const nodes = Array.from(nodeSet).map((name) => ({ name })); // Create links array const links = data.map((item) => ({ source: item.source, target: item.target, value: item.value, })); const series: Array<SeriesOption> = [ { type: "sankey", data: nodes, links: links, emphasis: { focus: "adjacency", }, nodeAlign: nodeAlign, left: "10%", top: "10%", right: "10%", bottom: "10%", label: { position: "right", color: "#000", }, lineStyle: { color: "gradient", curveness: 0.5, }, }, ]; const echartsOption: EChartsOption = { series, title: { left: "center", text: title, }, tooltip: { trigger: "item", triggerOn: "mousemove", }, }; return await generateChartImage( echartsOption, width, height, theme, outputType, "generate_sankey_chart", ); }, - src/tools/sankey.ts:13-44 (schema)Zod schema definitions for the Sankey data structure and the tool's inputSchema including data array, dimensions, theme, title, and outputType.
const data = z.object({ source: z.string().describe("Source node name, such as 'Landing Page'."), target: z.string().describe("Target node name, such as 'Product Page'."), value: z .number() .describe("Flow value between source and target, such as 50000."), }); export const generateSankeyChartTool = { 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: z.object({ data: z .array(data) .describe( "Data for sankey chart, such as, [{ source: 'Landing Page', target: 'Product Page', value: 50000 }, { source: 'Product Page', target: 'Add to Cart', value: 35000 }].", ) .nonempty({ message: "Sankey chart data cannot be empty." }), height: HeightSchema, nodeAlign: z .enum(["left", "right", "justify"]) .optional() .default("justify") .describe( "Alignment of nodes in the sankey chart, such as, 'left', 'right', or 'justify'.", ), theme: ThemeSchema, title: TitleSchema, width: WidthSchema, outputType: OutputTypeSchema, }), - src/tools/index.ts:19-37 (registration)The generateSankeyChartTool is included in the exported 'tools' array, which likely registers it for use in the MCP server.
export const tools = [ generateEChartsTool, generateLineChartTool, generateBarChartTool, generatePieChartTool, generateRadarChartTool, generateScatterChartTool, generateSankeyChartTool, generateFunnelChartTool, generateGaugeChartTool, generateTreemapChartTool, generateSunburstChartTool, generateHeatmapChartTool, generateCandlestickChartTool, generateBoxplotChartTool, generateGraphChartTool, generateParallelChartTool, generateTreeChartTool, ]; - src/tools/index.ts:47-47 (registration)Re-export of generateSankeyChartTool from index.ts for convenient access.
generateSankeyChartTool,