[261024] Generate an SVG chart from a single URL

TLDR

• Core Feature : x-cmd Draw allows you to generate real-time SVG vector charts directly via URL parameters (including data and styles).
• Multiple Types & AI Integration : Supports various charts such as Sankey diagrams and line charts, and integrates with AI Agents to automatically assemble URLs for chart generation.
• Flexible Deployment : Free to use online out-of-the-box, with support for offline npm rendering and self-hosting to ensure data security.

When you want to include a chart in a technical article or add a data visualization to a project, you typically have to search for a drawing tool, organize the data, and adjust the styles.

x-cmd Draw offers a more direct approach: write the chart type and data into a URL to generate an SVG. No need to open design software or set up a dedicated charting service beforehand.

Draw a Website Traffic Sankey Diagram from a Single URL #

For example, if you want to showcase where website visitors come from, along with how many registered versus how many left, you can use a Sankey diagram. The URL below directly generates a Chinese chart:

Here, type=sankey specifies a Sankey diagram, labels sets the node names, links describes the flow and values between nodes, and scheme=dark sets the dark theme.

Data, labels, and styles can all be adjusted directly via parameters. If you want to change the dataset, simply modify the URL. The generated SVG can also be embedded directly into web pages, README files, or technical documentation.

Different Types of Charts for Different Data #

Draw supports a wide variety of types including pie charts, bar charts, line charts, area charts, radar charts, gauges, scatter plots, mixed charts, and Sankey diagrams, alongside different style templates and light/dark themes.

Beyond standard data charts, you can even generate QR codes. Chart labels support different languages like Chinese, eliminating the need to rename business terms into English.

SVG is a vector format, ensuring it remains crystal clear when zoomed in. For project documentation, data reports, and web pages that require frequent updates, keeping the generation parameters makes subsequent revisions effortless.

Let AI Agents Draw for You #

Draw is also designed with AI Agent workflows in mind. With the appropriate Skill, an Agent can understand Draw's parameter rules based on tasks, select the chart type, organize the data, and directly assemble the URL to generate the chart. Opening the link instantly yields the corresponding SVG chart.

For example, you can simply make a request like: Generate a dark-themed bar chart based on this statistical data, label all values, and save it as an SVG file.

The Agent doesn't have to figure out parameters from scratch every time, nor does it need to piece together entire sets of SVG drawing code manually. It can organize data and styles according to Draw's rules and invoke the appropriate method to complete generation.

For users, the main focus is describing the desired chart and providing data, while the remaining parameter organization and generation steps can be handled by the Agent. The resulting output can then be used in project documentation, web pages, or other programs.

Use It Online for Free, or Self-Host #

You can generate charts instantly online using [x-cmd.com/draw](https://x-cmd.com/draw) with no usage limits, requiring zero installation or environment configuration.

If your charts involve internal data or need to be generated in bulk through automated tasks, you can also opt for other usage methods:

• npm Package : Local synchronous rendering supports offline usage without needing to ping online services.
• Local Service : Run Draw locally on your own machine.
• Self-Hosting : Deploy to your own Cloudflare account to manage services and access permissions yourself.

When using the online version, chart parameters are sent to the server. If sensitive data is involved, you can choose local rendering or self-hosting instead. Additionally, note that Draw's permanent short links store data in a public GitHub repository, so they should not be used for sensitive content.

Try Draw Right Now #

To quickly generate a chart, start with a URL; if you want an AI Agent to help you process data and generate SVGs, give the Draw Skill a try.

Give it a set of data and see what it draws.

Please indicate the source and link of this article when reprinting.

Help us make these docs great!

All X-CMD docs are generated from command help and multiple data sources. See something that's wrong or unclear? Feel free to let us know through any of these ways~