Layout-fidelity scorecard

Latest run (means over samples)

Trend (last 20 recorded runs)

Runs recorded before 12.1.0 were measured against mermaid 11.17.2 (dagre) and cover flowcharts only. The reference changed engine, so do not read a trend across that change.

Edge labels (ASCII)

Where an edge label sits between its two nodes (0 = source end, 1 = target end; official mermaid centres it at about 0.5), averaged over the cases in scripts/label-position-oracle.ts. Delta is the mean absolute difference between the two renderers. Descriptive only, no floor.

Sequence diagrams (order)

Sequence has no layout engine to compare, so the share of agreeing pairs is taken for participant left-to-right order and message top-to-bottom order, and the share of messages pointing the same way (scripts/sequence-oracle.ts). Every sample must score 100% (SEQUENCE_FLOOR; --thresholds exits 1 otherwise), so this guards against regressions in a grid that agrees today. It says nothing about pixel positions or spacing.

Pie charts (angles)

A pie has no nodes, so the share of drawn slices whose start and sweep angle agree (within ANGLE_TOLERANCE), of slices printing the same percentage and of legend rows with the same text is taken (scripts/pie-oracle.ts). Slices are matched by position, so a different slice order counts as an angle disagreement. Every sample must score 100% (PIE_FLOOR; --thresholds exits 1 otherwise). It says nothing about radius, centre or fonts.

C4 diagrams (placement)

C4 has no layout engine to compare, so the share of box pairs on the same side of each other (columns and rows, within PLACE_TOLERANCE), of boxes inside the same boundaries, of relationships with the same label and technology text and of relationships running the same way is taken (scripts/c4-oracle.ts). Every sample must score 100% (C4_FLOOR; --thresholds exits 1 otherwise) except those held lower in C4_SAMPLE_FLOORS, where our placement really differs. It says nothing about box sizes or fonts.

XY charts (axes and data)

An xychart has no nodes, so the share of axis labels with the same text, of axis labels at the same fraction of their axis and of bars and line points at the same category and value fraction is taken (scripts/xychart-oracle.ts). Positions are fractions of the axis, so canvas size does not count. Every sample must score 100% (XYCHART_FLOOR; --thresholds exits 1 otherwise). It says nothing about colors, fonts or bar widths.

Architecture diagrams (placement)

Mermaid places architecture services with cytoscape fcose, constrained by the L/R/T/B sides in the source. A force layout moves with its seed and font metrics, so only relative placement is scored: the share of service pairs above / below / beside each other and of (service, group) pairs agreeing on containment, with services within ARCH_TOLERANCE (half an icon) counted as level (scripts/architecture-oracle.ts). Every sample must stay at or above ARCH_FLOOR (--thresholds exits 1 otherwise), a regression guard, not a parity claim. It says nothing about distances or edge routes.

Per sample

Flowchart (lowest first)

State (lowest first)

Not scored (the oracle errored): zombie-mermaid.

Class (lowest first)

ER (lowest first)

Diagram types not scored

sequence: mermaid draws it on a fixed grid (participants left to right in declaration order, messages top to bottom in source order), not with a layout engine, so node placement says nothing. Order and direction are scored separately, in the Sequence section.

architecture-beta: mermaid places services with cytoscape fcose constrained by the explicit L/R/T/B port sides in the source, a force layout whose distances are not comparable. Relative placement and group containment are scored separately, in the Architecture section.

xychart-beta: no nodes: positions come from axis labels and data values. Label text, tick positions and bar/line data positions are scored separately, in the XY charts section.

pie: no nodes: positions come from data values. Slice angles, percentages and legend rows are scored separately, in the Pie section.

c4: mermaid places C4 boxes on a fixed grid in shape order, not with a layout engine over edges. Box placement, boundary containment and relationships are scored separately, in the C4 section.