Context
Mermaidjs does not natively support animation. I need to create gif files similar to this:
The problem with this approach is that the graph is always re-arranged whenever a new node is added to the graph. It makes harder to follow the flow.
My Attempt
My idea was to add all nodes and edges to each "frame" and change their opacity.
In mermaid we could not use rbga
to specify opacity so, I did the following trick.
First frame
graph TD start[Start] middle[Process] stop[Stop] start -- calls --> middle middle -- notifies --> stop %% Step 1 - hide everything except the start %% Step 2 - comment out related assets %% Step 3 - comment out related assets %% Frame 2's assets linkStyle 0 opacity:.1,color:#0001 style middle opacity:.1,color:#0001 %% Frame 3's assets linkStyle 1 opacity:.1,color:#0001 style stop opacity:.1,color:#0001
Middle frame
graph TD start[Start] middle[Process] stop[Stop] start -- calls --> middle middle -- notifies --> stop %% Step 1 - hide everything except the start %% Step 2 - comment out related assets %% Step 3 - comment out related assets %% Frame 2's assets %% linkStyle 0 opacity:.1,color:#0001 %% style middle opacity:.1,color:#0001 %% Frame 3's assets linkStyle 1 opacity:.1,color:#0001 style stop opacity:.1,color:#0001
Last frame
graph TD start[Start] middle[Process] stop[Stop] start -- calls --> middle middle -- notifies --> stop %% Step 1 - hide everything except the start %% Step 2 - comment out related assets %% Step 3 - comment out related assets %% Frame 2's assets %% linkStyle 0 opacity:.1,color:#0001 %% style middle opacity:.1,color:#0001 %% Frame 3's assets %% linkStyle 1 opacity:.1,color:#0001 %% style stop opacity:.1,color:#0001
- The
opacity
controls the shape's opacity level - The
color
's last part controls the text's opacity level
For testing purposes I've used ezgif's maker to animate the mmdc
generated frames:
Problem
It did solve the re-arranging problem but it seems a bit clumsy. The background of the edge's annotation is still visible. In the previous sample I've used 10% opacity. But even if I use 0% is still visible.
Is there anyway to hide the background of the edge's annotation?