← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid line chart online editor

Show change over time or across ordered values with a line. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Line Chart editor See an example

WHAT IT IS FOR

Make the important relationships clear

Make change over time visible with a line chart for trends, measurements, and ordered values.

  • Show product growth
  • Track service metrics
  • Explain changes across a timeline
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 active users"
  x-axis [1Month, 2Month, 3Month, 4Month]
  y-axis "User" 0 --> 100
  line [20, 38, 52, 78]

HOW TO START

Create your diagram in four steps

  1. 1Put ordered values on the x-axis.
  2. 2Use a consistent scale and unit.
  3. 3Add points in the correct sequence.
  4. 4Describe the important changes and turning points.

WRITING TIPS

Keep the diagram useful

Use ordered x-axis values.

Call out important changes in the surrounding text.

FAQ

Frequently asked questions

What is a line chart used for?+

Line charts are useful for showing how a value changes across time or another naturally ordered sequence.

Can Mermaid line charts show multiple series?+

The XY chart syntax can represent chart values in a compact, code-based format for comparison and trend documentation.

TEMPLATES

Start from a related template

Monthly active users line chart

Show the growth trend of monthly active users over time.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

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

Read the guide

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid class diagram

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

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

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

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Ready to make a Line Chart?

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

Start in Mermaid Studio