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