Mermaid XY-Diagramm-Spickzettel

Ein Liniendiagramm oder ein Balkendiagramm auf zwei Achsen.

Jedes Bild auf dieser Seite wurde gezeichnet von

Mernyx, dem nativen Mermaid-Editor für macOS. Nicht von einem Browser mit Mermaid.js — demselben Renderer, den die App für ihre Leinwand nutzt.

Eine Linie

Die x-Achse listet die Positionen, und die Daten sind eine Zahl pro Position.

xychart
    x-axis [jan, feb, mar, apr]
    y-axis "Revenue" 0 --> 100
    line [10, 40, 60, 90]

Ein Liniendiagramm mit vier Punkten, jan bis apr, von 10 auf 90 steigend.

Balken

bar zeichnet dieselben Daten als Balken statt als Linie.

xychart
    x-axis [jan, feb, mar, apr]
    y-axis "Revenue" 0 --> 100
    bar [10, 40, 60, 90]

Ein Balkendiagramm mit vier Balken, jan bis apr, von 10 auf 90 steigend.

Zwei Serien und ein Titel

Eine Linie und ein Balken können dasselbe Diagramm teilen, und der Titel steht in seiner eigenen Zeile.

xychart
    title "Sales revenue"
    x-axis [jan, feb, mar, apr]
    y-axis "Revenue (in $)" 4000 --> 11000
    line [5000, 6000, 7500, 8200]
    bar [4000, 5500, 7000, 8100]

Ein Diagramm mit dem Titel „Sales revenue“ mit einer Linie und einem Balken über vier Monate, beide steigend, auf einer y-Achse von 4000 bis 11000.

Die x-Achse benennen

Eine Beschriftung vor der Liste benennt die Achse.

xychart
    x-axis "Month" [jan, feb, mar, apr]
    y-axis "Revenue" 0 --> 100
    line [10, 40, 60, 90]

Ein Liniendiagramm mit der x-Achse „Month“ über jan bis apr und einer y-Achse „Revenue“ von 0 bis 100.

Mermaid XY-Diagramm-Spickzettel

Eine Linie

Balken

Zwei Serien und ein Titel

Die x-Achse benennen

In Mernyx zeichnen