I would love an option to export as a gif that loops perfectly.

I love it. I saw a comment in this thread saying that adding animation to a chart is pointless.

However in some public speeches, I've always wanted to add some cool charts to attract attention. Especially at large events, a slightly different presentation can make my stuff stand out and gain more attention.

Your work has a nice launch here in HackerNews but no upvotes on ProductHunt, so I just voted there to support you

Yeah, 100%. Just having something to move around catches the eye. Cheap trick but works - that's why most short videos have subtitles.

I love this idea. Problem is: it competes with "Hey Claude, take this diagram and animate it". The results are different (worse / better in different regards), but you can modify it more to your liking.

Maybe I'm not seeing the exact use case. I was very close to buying the plan (3 usd / m is a steal), but with Claude I can be more specific what I want.

Yes. I could just render the .mmd plain as vanilla and will works just fine for devs but It may not get the attention of non technical folks

Awesome idea! I'm trying to use it for a YouTube video.

This graph here has display issues. And the CPU is used waay too much on firefox

``` flowchart TD Step1["*Step 1: POC* (4 weeks)<br/>Vibe code for ONE tenant"]

    Step1 --> Validate & Hire

    Validate["Validation (4 weeks)"]
    Hire["Hire developer (4 weeks)"]

    Validate & Hire --> Spec

    subgraph Spec["**Step 3: Specification** (with dev)"]
        SpecStart["Parallel"] --> UI["UI prototype"]
        SpecStart --> POC["POCs of all parts"]
        SpecStart --> Arch["Architecture + stack"]
        SpecStart --> Infra["Infrastructure"]
        SpecStart --> FullSpec["Full MVP spec"]
        UI & POC & Arch & Infra & FullSpec --> SpecEnd["Done"]
    end

```

Feel you, Im running FF/macos as well and svg aniamtions over CPU/GPU could be a problem. Im planning to address this issue soon

Nice! I always looked for a solution to animate diagrams as it would help a lot in visualising the workflow.

Feedback:

1. I tried different mermaid diagrams from https://mermaid.live/, and your animation is only working with classes and flowcharts. It didn't work with the sequence diagram (which is the most interesting to me).

2. It would be great to control the animation to be a sequence instead of one animation for all arrows at once. What I would like to do is show fellow devs the workflow from start to finish, according to the spec.

I appreciate that this is just a start, but it looks promising and has great potential. Good luck!

Thanks for the valuable feedback. I already cover most of the issues that you described. Should be good to go in the next release

I don't understand how to use this, but it does touch on an interesting topic. I want to create interactive and animated diagrams. I normally use either Draw.io or plantuml. My goal is to better teach folks about the systems I'm building, through better visualizations. Something like IcePanel (which is way too expensive) sort of shows flows, but I'd like to have full control. Does this tool claim to support something like that? If not, are there options out there that I don't know about?

I don't see anything animated except a bit on load? I don't get it. This is on iOS Safari.

Will take a look let me know the details please

I don't understand who in the world needs animated something on his diagrams.

There's been times in the past when I've had nontechnical stakeholders present for otherwise technical meetings. A little bit of colour and a little bit of animation can go a long way to helping people who may be less familiar with this type of diagram to understand it better.

All the better if I can take an existing diagram and just spruce it up slightly for presentation.

Can’t tell from that link. Is there a better layout engine?

Is there a way to control the mechanics of the animation? I poked around a bit and didn't see a way to configure what was sent down the arrows or how often - just some theming options.

For example, if you're visualizing a user flow, you might want rules about when new "objects" are sent down the pipe (example node rule: wait until received one item from each input), or how fast they travel, etc.

There will more a powerful controls for each node soon. For now there is a "Director mode" to control speed and traffic.

love it!