Charts

bar, line, pie, flow, quadrant and radar charts written as mermaid blocks

A chart is a mermaid code block whose first word names a kind of chart, and the site draws it as a picture instead of showing its text.^[1] It is the block a diagram is written in, described on Diagrams: a diagram draws how something works, and a chart draws how much.

Kinds

Mermaid draws five kinds of chart, each named by the block's first word.^[2] Three of them — xychart-beta, sankey-beta and radar-beta — are Mermaid's beta syntax, which a later release of Mermaid may change.^[3]

Bars and lines

A page's footer gives its reading time in whole minutes at 250 words a minute, so a page at the 500-word budget reads in two and one of 1000 words in four.^[4] One xychart-beta block draws those figures twice, as bars from zero and as a line across the same axes.^[2]

xychart-beta
    accTitle: Reading time by page length
    accDescr: Reading time rises a minute for every 250 words: one minute at 250 words, two at 500, three at 750 and four at 1000.
    title "Reading time by page length"
    x-axis "Words" ["250", "500", "750", "1000"]
    y-axis "Minutes" 0 --> 4
    bar [1, 2, 3, 4]
    line [1, 2, 3, 4]

Shares

A pie chart draws the parts of one whole as slices, and showData prints each value beside its name.^[2]

pie showData
    accTitle: Pages by status
    accDescr: Of forty pages, thirty are approved and ten are drafts.
    title Pages by status
    "Approved" : 30
    "Draft" : 10

Flows

A sankey chart draws a quantity splitting as it passes from one stage to the next, each band as wide as what flows through it.^[2]

sankey-beta
Pages,Approved,30
Pages,Draft,10
Approved,Goals page,30

Two scales

A quadrant chart places each point on two scales at once and names the four quarters they make.^[2]

quadrantChart
    accTitle: Pages by length and citations
    accDescr: Four pages placed by how long they are and how many sources they cite.
    title Pages by length and citations
    x-axis "Short" --> "Long"
    y-axis "Few sources" --> "Many sources"
    "Front page": [0.2, 0.2]
    "Brief": [0.7, 0.4]
    "Commands": [0.8, 0.9]
    "Checks": [0.5, 0.8]

Several scales

A radar chart draws one thing measured on several scales at once, as a shape closing back on itself.^[2]

radar-beta
  accTitle: One page against its budgets
  accDescr: A page measured on length, citations and sections, each against the most it may carry.
  axis length["Length"], sources["Sources"], sections["Sections"]
  curve page["A page"]{4, 5, 3}
  max 5

Drawing

A chart needs no network: Mermaid ships inside wiki-builder, and a build copies it, with its licence, into a site only when some page draws something.^[5] It is drawn in the page's theme, light or dark, and drawn again whenever the theme changes.^[6] Its colours are the wiki's own, one set of six chosen to stay apart for a reader who cannot tell red from green, with the text and rules of the page around it.^[7] Two charts on one page each keep their own box: every drawing on a page is numbered rather than named after the millisecond it began, which two charts share, leaving the second sized against the first and painted over it.^[8] A chart Mermaid cannot read passes wiki check, and the page shows Mermaid's error in its place.^[9]

Numbers

The skill tells an agent that a chart draws only figures the page states and cites, that the sentence introducing it carries the citation, and that a figure changing faster than the page is not drawn at all; no check enforces any of the three.^[10][11] A chart costs nothing against the page's reading budget, because the build counts words with the code blocks taken out.^[12] A page's markdown copy keeps a chart as the block it was written as, which is how an agent reads it.^[13]