EditorialDiagram
Diagrams

Data Visualization

Editorial Sankey Diagram Designer — No Shadows, No Mermaid Slop

Follow a balanced 12,000-minute CI budget through test stages into Passed, Failed and Flaked outcomes. Eight node bars and twelve proportional ribbons share one scale so the diagram’s area agrees with its printed quantities.

Explore the example for free
100%
Example preview
Where 12,000 CI minutes went.One scale: 0.02 pixels per minute. Each stage totals 12,000 minutes; the flaky-test path is the editorial focus.Where 12,000 CI minutes went.ILLUSTRATIVE SAMPLE / ENGINEERCI BUDGETTEST STAGEOUTCOMEMuted / ordinary allocation Accent / flaky-test pathOne scale: 0.02 pixels per minute. Each stage totals 12,000 minutes; the flaky-test path is the editorial focus.CI minutes12,000 minUnit tests5,200 minE2E4,000 minBuild2,000 minLint800 minPassed9,400 minFailed1,600 minFlaked1,000 min
Checking geometry…

Take it with you

Free PNG includes an EditorialDiagram watermark.

Thin lines. Considered type. No shadows.

Layout Grammar & Anti-Patterns

Four rules for this diagram

  1. 01

    Use exactly three stage columns. Every bar and ribbon shares one finite pixels-per-unit scale; each stage must balance to the same total.

  2. 02

    Draw 12px-wide vertical node bars. Round real-data heights to the 4px grid, reconcile offsets at the node level and merge flows thinner than 4px into other.

  3. 03

    Use filled, closed ribbons without arrowheads. Both Bézier controls sit at the columns’ horizontal midpoint, preserving horizontal arrival and departure tangents.

  4. 04

    Center middle-column labels in clear gutters without opaque masks. Paint ordinary muted ribbons first and the single focal path last.

Three mistakes to avoid

  • Different scales by column or unbalanced totals make the visual allocation mathematically false.
  • A degenerate control point at the destination makes the ribbon arrive at a slant and look detached.
  • Rainbow flows, overlapping attach offsets and opaque middle-label masks compete with the quantitative story.

Engineer vs. Executive

The two renders use the same illustrative source. Executive mode groups detail deliberately; read the captions before using an overview for a technical review.

Engineer / source detail
Where 12,000 CI minutes went.One scale: 0.02 pixels per minute. Each stage totals 12,000 minutes; the flaky-test path is the editorial focus.Where 12,000 CI minutes went.ILLUSTRATIVE SAMPLE / ENGINEERCI BUDGETTEST STAGEOUTCOMEMuted / ordinary allocation Accent / flaky-test pathOne scale: 0.02 pixels per minute. Each stage totals 12,000 minutes; the flaky-test path is the editorial focus.CI minutes12,000 minUnit tests5,200 minE2E4,000 minBuild2,000 minLint800 minPassed9,400 minFailed1,600 minFlaked1,000 min

Eight bars and twelve ribbons preserve the exact 12,000-minute example at one shared scale.

Executive / decision overview
Where 12,000 CI minutes went.One scale: 0.02 pixels per minute. Each stage totals 12,000 minutes; the flaky-test path is the editorial focus.Where 12,000 CI minutes went.ILLUSTRATIVE SAMPLE / EXECUTIVECI BUDGETTEST STAGEOUTCOMEMuted / ordinary allocation Accent / flaky-test pathOne scale: 0.02 pixels per minute. Each stage totals 12,000 minutes; the flaky-test path is the editorial focus.CI minutes12,000 minTests9,200 minBuild + lint2,800 minPassed9,400 minFailed1,600 minFlaked1,000 min

Six bars combine test and build categories while preserving all three outcome totals.

When to use another diagram instead

Flowchart

Use a flowchart when the links describe decisions rather than quantities that split and merge.

Swimlane Diagram

Use swimlanes when the primary question is who owns each stage.

Wardley Map

Use a Wardley map for qualitative build-or-buy positioning instead of measured allocation.

Questions about this diagram

Do the example’s quantities balance across all three stages?

Yes. The source is 12,000 CI minutes. Unit tests, E2E, Build and Lint sum to 12,000, as do Passed, Failed and Flaked. Every ribbon uses 0.02 pixels per minute, and these chosen quantities land exactly on the 4px grid, so no rounding changes the displayed totals.

Why do the ribbons have no arrowheads or orthogonal elbows?

Their thickness encodes quantity, rather than a protocol or process edge. Left-to-right stage order gives direction. Closed cubic bands leave and arrive horizontally at the bars; arrowheads and elbow routing would obscure the area encoding and are explicitly excluded by the Sankey reference.

Does the Executive view change the total CI budget?

No. It combines Unit tests and E2E into Tests, and Build and Lint into one stage category. Passed, Failed and Flaked still total 12,000 minutes. The six-node overview aggregates categories without inventing minutes or dropping the flaky-test outcome.

Worked examples use illustrative data. Edited sources require an AI provider; cached previews are ready immediately.

Cached examples are free. Starter Pack is $9.9 once; Pro Pass is $8.9 per month. Every generation costs 10 credits, including one automatic geometry repair. Pricing