Animating Mermaid graphs as GIFs

I’m a big sucker for text-based graphs, and Mermaid has emerged as the de-facto standard for the web. But when displaying graphs to other people, oftentimes you want to guide them through a process — first A leads to B and C, then A leads to D which leads to F.

But visualizing this piecemeal — building the graph piece by piece — actually ruins the flow of the graph, because the sizes change with elements added, so the initial graph and the final one will have elements in different places, making it harder for your audience to follow.

Instead, we’ll use a combination of

• Invisible components
• Invisible lines

Invisible components can be set by adding

classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000;

and then adding :::invisible to components.

Invisible lines can be done by replacing lines with ~~~ notation

For example, here is a graph with only the initial block visible:

flowchart TD

subgraph Saved game
    Game ~~~ Civs:::invisible ~~~ Cities:::invisible
    Game ~~~ Tiles:::invisible ~~~ Units:::invisible
end

classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; 

Now comes the animation part!

Piece by piece, remove the invisibility from each component. Your final state is now completely visible.

GIF maker

To make this simpler, I made a webpage for this workflow, which uses a simple templating style to render the following:

graph TD
Source {[0 --> |4 ~~~ ]} OldDB
Source {[0 ~~~ |1 --> ]} NewDB{[0 :::invisible |1 ]}
OldDB{[0 |4 :::invisible ]} {[0 --> |3 -.-> |4 ~~~ ]} Destination
NewDB {[0 ~~~ |2 -.-> |3 --> ]} Destination
classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000;

Into a Mermaid graph for each frame, to end up with this:

timing is automated for a clean flow

If your graph introduces a dramatic change, like adding extra components, I recommend treating that as a different animation entirely — since there are no “fixed points” of animation with the original state anyway, you can do that separately

But of course you could use the same technique for building arbitrarily complex graphs gradually :)

If this interests you, ping me with ideas :)