This is a single SVG file created purely through D2 text:
D2 source to reproduce this is here: here, rendered with these parameters.
Brief factsheet:
- Single file, weights 88kb, the vast majority is the embedded fonts so that it looks the same everywhere.
- Well-formatted, readable D2 text (i.e. has newlines) is 85 lines.
- Configurable. This animation has 1400ms intervals, but if you want the animation to linger for longer and shorter, simply change the flags.
- Easily split into 2 separate SVGs (the default behavior of CLI when a flag is not passed in to animate).
Typically, when you're making a diagram primarily to show change in a single image, you put them side by side. And the user scans. Their eyes are darting back and forth, piecing together the deltas.
Instead, you can overlay and switch back and forth in place, making that process much easier and clarifying the differences.
Showing versions is a form of showing change. An example of this is conveyed in the first example above.
Take the viewer through a sequence of steps
Or a journey to build up to something.
D2 is not yet 1.0. Of the many things planned in the near term, better ergonomics for
creating these are a priority. The source code for all of these diagrams can be found
here. Some of
these are currently verbose and repetitive. We've released early to get feedback from the
community, but in-progress things like globs (being able to target objects with *) and
classes will make creating these animations much easier than they currently are.
--animate-interval is available to use in D2 0.3.0 (install
here), hope you can check it out and let us
know what you think!