← All diagram types

MERMAID DIAGRAM GUIDE

Mermaid XY chart online editor

Plot values across two axes to show trends and comparisons. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the XY Chart editor See an example

WHAT IT IS FOR

Make the important relationships clear

Plot values across two axes to compare measurements, trends, or relationships in a code-based chart.

Show trends over time
Compare product metrics
Document small data sets in technical notes

Why use Mermaid Studio?

Write the source as versionable Mermaid code.
Preview changes immediately in the browser.
Export the finished diagram as SVG or PNG.
Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

xychart-beta
  title "Monthly projects"
  x-axis [1Month, 2Month, 3Month, 4Month]
  y-axis "Projects" 0 --> 100
  bar [20, 35, 58, 82]
  line [20, 35, 58, 82]

HOW TO START

Create your diagram in four steps

1Define what each axis measures.
2Choose a scale that matches the data.
3Add values in a consistent order.
4Explain the important trend or comparison in the surrounding text.

WRITING TIPS

Keep the diagram useful

Label both axes and their units.

Keep the scale consistent with the data.

FAQ

Frequently asked questions

What is a Mermaid XY chart?+

An XY chart plots values against two axes so readers can compare categories, measurements, or trends.

Should I label the axes?+

Yes. Axis labels and units are essential when a reader needs to interpret the values correctly.

TEMPLATES

Start from a related template

Monthly metrics chart

Plot monthly values to compare product or business performance.

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Ready to make a XY Chart?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio