Show HN: Fanfa – Interactive and animated Mermaid diagrams
by bairess on 12/4/2025, 1:16:54 PM
Comments
by: me_bx
Congrats on launching.<p>It might be worth considering a feature to time/schedule each flow's animation, rather than having them run in an infinite loop, all at the same time.<p>UX feedback:<p>* The animation and the whole interface are sluggish on firefox/linux. There's about 1 sec delay after each action (like clicking on an option). * The site's CSS does not load on an old version of Chrome - v90 - (and the chart and animation don't either).
12/9/2025, 7:57:50 AM
by: jankovicsandras
Looks cool!<p>Here's some feedback:<p>- the diagram is not centered and zoomed by default, this is easy to fix<p>- it would be great to have better animation controls, like progressbar, play half speed, etc.<p>- it would be great to be able to export animation to video, animgif, etc. e. g. with ffmpeg.js
12/9/2025, 7:25:18 AM
by: frankhsu
I love it. I saw a comment in this thread saying that adding animation to a chart is pointless.<p>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.<p>Your work has a nice launch here in HackerNews but no upvotes on ProductHunt, so I just voted there to support you
12/9/2025, 2:40:13 AM
by: tillcarlos
Awesome idea! I'm trying to use it for a YouTube video.<p>This graph here has display issues. And the CPU is used waay too much on firefox<p>``` flowchart TD Step1["*Step 1: POC* (4 weeks)<br/>Vibe code for ONE tenant"]<p><pre><code> 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</code></pre> ```
12/9/2025, 2:36:08 AM
by: knuit
I would love an option to export as a gif that loops perfectly.
12/9/2025, 5:43:51 AM
by: Oras
Nice! I always looked for a solution to animate diagrams as it would help a lot in visualising the workflow.<p>Feedback:<p>1. I tried different mermaid diagrams from <a href="https://mermaid.live/" rel="nofollow">https://mermaid.live/</a>, 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).<p>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.<p>I appreciate that this is just a start, but it looks promising and has great potential. Good luck!
12/8/2025, 11:51:51 PM
by: mal10c
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?
12/8/2025, 10:52:29 PM
by: larodi
I don't understand who in the world needs animated something on his diagrams.
12/8/2025, 11:40:48 PM
by: difosfor
I don't see anything animated except a bit on load? I don't get it. This is on iOS Safari.
12/8/2025, 11:32:58 PM
by: max002
wow, this is cool, to be frank im working on something similar so we might end up being competition xD but i dont want to hijack thread, nice work and congrats on release, upvoted you on producthunt!
12/9/2025, 7:30:41 AM
by: 2muchcoffeeman
Can’t tell from that link. Is there a better layout engine?
12/8/2025, 10:01:57 PM
by: fwip
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.<p>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.
12/8/2025, 10:15:54 PM
by: yakbarber
love it!
12/8/2025, 10:23:15 PM