New Sample Diagram: “Journey”

There’s a new Sample Diagram to try out at the top of the Build-a-Diagram page: Journey, which demonstrates how you can produce traceable paths for multiple players across multiple stages by using a specific approach to encoding your data.

It was added in February of this year. The conditions required for this kind of diagram to work are:

  • Each flow maintains a single color from start to end.
  • All flows for a particular player must be listed together.
  • The “Arrange the Diagram” control must be set to “Using the exact input order”.

In the sample diagram, every flow for every player has the same value (1), but that condition isn’t absolutely necessary as long as the other conditions are met.

This diagram style can be used for such things as a ranking chart for team standings in a league (sometimes called a “bump chart”).

This post prompted me to go track down when each of the other sample diagram types was added, for comparison:


I haven’t written much about my development approach to this project –

It’s not TDD, not BDD, but EDD:
“Embarrassment-Driven Development”.

Basically years of conversations with myself that go like this:

– “Hey, [cool advanced feature] would be really awesome.”
– “It doesn’t support [extremely basic feature] yet though, Steve.”
– “Ouch. You’re right. That’s just embarrassing. Let’s do that first.”

…and repeat, endlessly.

(cross-posted from

Fun things I’ve been learning lately about the modern ways to do things on the web:

  • The Blob API!
    (For generating downloadable export files on demand.)
  • async Promises!
    (For accepting an uploaded file and obtaining its text. Special guest star: Blob.text().)
  • CSS Grid layout!
    (Because I should probably remake the whole layout with it someday.)

As always, MDN Web Docs has been invaluable for documentation and examples.

A cool feature is cooking!

(cross-posted from