본문으로 건너뛰기

Text to (animated) diagrams

· 약 2분

This is a single SVG file created purely through D2 text:

Normal deploymentlocalgithubawscodedevmasterbuilderss3ec2workflows commitmerge triggerupload and runupload binaries pull binaries Hotfix deploymentlocalgithubawscodedevmasterbuilderss3ec2workflows merge triggerupload binaries pull binaries commitupload and run

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).

Use cases​

Show change​

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.

Current stateyouaccountantturbotaxgovernment You oweus this much A better worldyouaccountantturbotaxgovernment You oweus this much

Showing versions is a form of showing change. An example of this is conveyed in the first example above.

Show steps​

Take the viewer through a sequence of steps

john wickhenchman 1henchman 2big boss john wickhenchman 1henchman 2big boss shoots, misses john wickhenchman 1henchman 2big boss shoots, missesshoots, hits john wickhenchman 1henchman 2big boss shoots, missesshoots, hitsshoots, misses john wickhenchman 1henchman 2big boss shoots, missesshoots, hitsshoots, missesshoots, hits john wickhenchman 1henchman 2big boss shoots, missesshoots, hitsshoots, missesshoots, hitsinjures john wickhenchman 1henchman 2big boss shoots, missesshoots, hitsshoots, missesshoots, hitsinjuresshoots, hits

Or a journey to build up to something.

Dough Tomato sauceCheese baseDough PepperoniSausageMushroomsPineappleTomato sauceCheese baseDough Pepper flakesExtra cheeseRandom garnishPepperoniSausageMushroomsPineappleTomato sauceCheese baseDough Pepper flakesExtra cheeseRandom garnishPepperoniSausageMushroomsPineappleTomato sauceCheese baseDough

Ergonomics will be better soon​

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!

Contents