mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.63k stars 6.05k forks source link

Allow linkStyle to be animated #5574

Open cmnstmntmn opened 2 weeks ago

cmnstmntmn commented 2 weeks ago

Proposal

I'm using Github gists for documentation, and i would like to have a way to allow animation between the notes.

I was trying to add custom css, but keyframes are not supported.

Possible solutions:

Add new char for lines to mark that that link is animated

Current implementation - no animation

Length 1 2 3
Normal --- ---- -----
Normal with arrow --> ---> ---->
Thick === ==== =====
Thick with arrow ==> ===> ====>
Dotted -.- -..- -...-
Dotted with arrow -.-> -..-> -...->

How to mark a line for having an animated behaviour

Length 1 2 3
Normal ---^ ----^ -----^
Normal with arrow -->^ --->^ ---->^
Thick ===^ ====^ =====^
Thick with arrow ==>^ ===>^ ====>^
Dotted -.-^ -..-^ -...-^
Dotted with arrow -.->^ -..->^ -...->^

Proposed implementation - with animation (preferred)

^ pin operator will mark that:

dotted-line

normal-line

Add a new keyframesDef property

I think adding support for keyframes like keyframesDef, the same way like classDef

graph RL
    A:::className -.-> B
    classDef className fill:green;
    keyframesDef animationName 0% stroke-dashoffset: 0, 100% stroke-dashoffset: 0 color: red
    linkStyle 0 animation: animationName 1s linear infinite;

Example

https://d2lang.com/tour/style#animated

example-nodes

Screenshots

No response