wip: Framework for animations

[alixander]

We have a framework in place to make D2 a powerful tool for animated diagrams.

I think of capabilities levels as follows:

Level 1: Static decorators (we are here)

One or two entities can enter an "animated" state, which is a predefined and simple. E.g. stroke-dash animated for connections and a small up-down bounce for shapes.

This is useful for drawing attention to a specific part of the diagram. For example, you want to highlight a certain critical path.

Level 2: Expressive decorators

Same as level 1, but you can choose from a variety of animations. E.g. fade-in, fade-out,

This is useful for showing a specific action. On top of drawing attention to a component, this allows including why. For example, a shape that fades in conveys it's being created. Or a fade-out destroyed. Or flashing could mean it's in an alert state.

Animations in level 2 always start in the same state. E.g. if it's fading in, it starts from opacity 0.

An example of different animations for connections. So an icon animating from source to dest means something different from a persistent connection animating constant flow, which maybe is different from an arrow growing to establish a connection from src to dst.

Level 3: State transitions

On top of the variety from level 2, animations consider previous state. E.g. a shape is red in board 1 and green in board 2, and the animation to change fill color will animate from red to green to show a server going from unhealthy to healthy.

This allows chaining. A request goes to load balancer, one of the 3 outbound requests animate to show it load balanced to that server, which then increases in scale a little to show it's saturated. This would be 3 step boards, with a simple animation in each one that results in an expressive narrative.

A crude example of chained animation

---

Non-goals

There are functionalities that exist in animation creation tools that are out of scope.

We want to keep the focus on diagram-specific animations. The ability to e.g. create a cool logo animation is a non-goal. If the feature set happens to allow some subset of non-diagram-specific animations, which I imagine it will, it's happenstance, and better ergonomics for those use cases will not be considered.

Goals

1. Make D2 the easiest way to create animated diagrams.

• Step 1: make d2 the easiest way to create diagrams.
• So it's really just Step 2: simple to add animations

2. Provide increases in readability and understanding of D2 diagrams through animations.

\n

1. No complex animation keywords. Just style.animated: XXX, for a rich set of XXX. Board composition is how it'll be chained. No timeouts, no easing values, no delays, etc. Keep it dead simple.
2. We only add preset animations which can be tied to a concrete use case for increasing legibility in a software diagram. Tweening from shape to shape is cool, but is there a concrete use case where your database cylinder shape needs to show it's transforming into a circle?

Caveats

Contributing to online slop

Often, animations are fluff. They are misused and slow down UX. Users can easily use D2 to create slop that looks cool but adds no value to readers.

Examples of cool slop (not D2 examples):

333352662-0c1bbc55-c1ce-4cdf-b652-a208941e7418.mp4

That's just a consequence of a rich feature. Users can do what they want. We won't have guardrails for excessive animation of course.

[woile]

Do you have some more examples of how the diagrams would look?

I haven't seen it mentioned, consider allowing the user to modify "time" (or duration) and delays.

If you could specify duration (and maybe delays?), users could create diagrams of latency, deadlocks, networking issues, database transaction isolation problems, event-driven-architectures, etc.

[ivellapillil]

Does D2 support separating style files from diagram files? This would be critical for large scale documentation.

Also ability to organize files with includes.

[BucklerCTO]

Cool, but I am really not sure I would ever use it.

[rajhlinux]

How can we use AI to quickly say "here is this pipeline idea" want to draw it on D2, is this possible?
If so it would be very useful.

[jpike88]

Seems like a feature barely anyone's going to use. Why not focus on supporting swimlane diagrams, as they're such an important tool, and a key way to communicate processes to customers in an easy-to-understand way?