Mermaid XY Chart Generator

Quickly draw data relationship charts based on coordinate axes, suitable for trend analysis, data comparison and metric display.

What is an XY chart

An XY chart is a type of chart that displays data relationships based on a two-dimensional coordinate system, representing the correspondence between different variables using the X and Y axes.

Use cases

Data trend analysis

Show data trends over time through line charts, helping discover growth, decline and periodic changes.

Data comparison analysis

Compare differences between different objects through multiple line or bar data series.

Sales performance analysis

Show changes in business metrics such as sales revenue, order volume and user growth.

Experiment result display

Used in scientific research, testing and analysis scenarios to show relationships and change patterns between variables.

Business data reports

Visualize key business metrics for weekly reports, monthly reports and management analysis.

XY chartFree templates

FIFA World Cup Revenue Growth

FIFA World Cup Revenue Growth

Website User Growth

Website User Growth

How to generate an XY chart with Mermaid

1

Multiple editing methods

You can generate XY charts by writing Mermaid code, pasting Mermaid code, AI generation, image recognition, code summary and more. You can also draw XY charts using our built-in XY chart templates.

2

Auto rendering

After entering Mermaid syntax, XY charts are generated and previewed in real time, with support for custom XY chart styles and themes.

3

Export or share

You can download XY charts and save them locally. We support exporting XY charts to PNG, PDF, SVG, JPG, Markdown and other formats, or clicking the “Share” button to share the link with others.

4

Edit again

If you are not satisfied with the result, click the “Visual editing” button to edit the XY chart again in the ProcessOn editor.

XY chartCommon syntax

Syntax
Graphic
Meaning
xychart-beta
XY coordinate chart
Create an XY coordinate chart
xychart-beta horizontal
Horizontal XY coordinate chart
Create a horizontal XY coordinate chart
title "name"
Title
Define the XY chart title
x-axis "axisTitle" [a,b,c]
X-axis
Define horizontal axis categories and title
y-axis "axisTitle" min --> max
Y-axis
Define vertical axis range and title
y-axis "axisTitle"
Y-axis with title only
Set only the vertical axis name; the value range adapts automatically
bar [num1, num2, num3]
Bar chart
Define bar chart data series
line [num1, num2, num3]
Line chart
Define line chart data series
More Syntax

Why choose us

Online editing tool

Free templates

Powerful AI capabilities

Real-time preview

Export in multiple formats

Supports re-editing

XY chartDrawing questions

What is an XY chart

A Mermaid XY chart is a chart that shows data relationships based on coordinate axes, used to present trend changes and data comparisons.

What scenarios are Mermaid XY charts suitable for?

Mermaid XY charts are suitable for data trend analysis, experiment result display, metric change observation and more.

Can Mermaid XY charts show line data?

Yes. Mermaid XY charts support showing relationships between different data points based on coordinate data.

How to create a Mermaid XY chart?

Enter X-axis and Y-axis data, and the Mermaid editor will generate the corresponding XY chart.

What is the difference between Mermaid XY charts and regular chart tools?

Mermaid XY charts generate diagrams from text definitions, making them more suitable for technical documentation and code management scenarios.