frontpage.
newsnewestaskshowjobs

Made with ♥ by @iamnishanth

Open Source @Github

fp.

Open in hackernews

Show HN: Fanfa – Interactive and animated Mermaid diagrams

https://fanfa.dev/
129•bairess•5d ago

Comments

2muchcoffeeman•17h ago
Can’t tell from that link. Is there a better layout engine?
fwip•17h ago
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.

bairess•15h ago
There will more a powerful controls for each node soon. For now there is a "Director mode" to control speed and traffic.
yakbarber•17h ago
love it!
mal10c•16h ago
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?
difosfor•16h ago
I don't see anything animated except a bit on load? I don't get it. This is on iOS Safari.
bairess•15h ago
Will take a look let me know the details please
larodi•16h ago
I don't understand who in the world needs animated something on his diagrams.
nantangitan•15h ago
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.

Oras•15h ago
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!

bairess•15h ago
Thanks for the valuable feedback. I already cover most of the issues that you described. Should be good to go in the next release
tillcarlos•13h ago
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
```
bairess•12h ago
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
frankhsu•13h ago
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

tillcarlos•13h ago
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.

scoot•9h ago
Short videos have subtitles for engagement with those watching without sound (a significant proportion)
max002•3h ago
it depends, if I want to create and edit graph fast, make sure style is consistent etc. then this suits my needs better.
bairess•12h ago
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
j45•4h ago
Motion definitely can help charts work better. Especially when the charts get really complex or detailed.
knuit•10h ago
I would love an option to export as a gif that loops perfectly.
jankovicsandras•8h ago
Looks cool!

Here's some feedback:

- the diagram is not centered and zoomed by default, this is easy to fix

- it would be great to have better animation controls, like progressbar, play half speed, etc.

- it would be great to be able to export animation to video, animgif, etc. e. g. with ffmpeg.js

matsz•8h ago
You might not even need ffmpeg.js for that anymore. WebCodecs API is well supported nowadays.

https://developer.mozilla.org/en-US/docs/Web/API/VideoEncode...

max002•8h ago
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!
me_bx•7h ago
Congrats on launching.

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.

UX feedback:

* 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).

marapuru•5h ago
It looks nice at first sight, but which data moves to which point exactly? Every element has blobs with all colours of the rainbow just moving across a line.

Wouldn't it be better if a Red square emits a Red ball that moves to some place? Or at least highlight 'paths' to show how stuff actually moves around?

victor_y•4h ago
Looking quite promising! I would love to use this as a code friendly animated diagraming tool. Some feature requests that would make it stand out for me:

1. Have you thought about creating some react components that would render these? You could then embed them in webpages and docs using something like https://fumadocs.dev/

2. For the animations themselves, you could have more customization options. For instance, adding the support for text cards or different shapes. I think having the option to add text in the moving parts would be really helpful for this kind of use case.

j45•4h ago
This looks great.

For the demo on the screen, it would be great to reveal each subgraph as a step before it all flows together.

Is there any thought / plan / feasibility for adding a "reveal" type verb that could be placed between each subgraph to wait for a keypress to reveal the next subgraph? In the meantime, one could create 3 diagrams I guess of with one more subgraph added.

n0um3n4•3h ago
Huh... I'm not being to login with github :/ it says 404:

https://github.com/login/oauth/authorize?access_type=offline...

emmavis•2h ago
Looks good, can i animate just connection to clicked node?
jadbox•2h ago
- how much is Pro and what does it do?

- can I download as animated gif or mpeg4 to embed into slides?

Show HN: AlgoDrill – Interactive drills to stop forgetting LeetCode patterns

https://algodrill.io
92•henwfan•4h ago•58 comments

Show HN: I built a system for active note-taking in regular meetings like 1-1s

https://withdocket.com
125•davnicwil•17h ago•103 comments

Show HN: Gemini Pro 3 Hallucinates the HN Front Page 10 Years from Today

https://dosaygo-studio.github.io/hn-front-page-2035/news
2•keepamovin•50m ago•1 comments

Show HN: A 3-Tool ETL Pipeline for CSV/TSV/Excel/Parquet in Go

2•mimixbox•52m ago•0 comments

Show HN: I made a nice Anki-app for iOS

https://apps.apple.com/us/app/funky-flashcards/id6755683572
4•quantized_state•55m ago•0 comments

Show HN: I got tired of switching AI tools, so I built an IDE with 11 of them

https://hivetechs.io
2•hivetechs•1h ago•0 comments

Show HN: Fanfa – Interactive and animated Mermaid diagrams

https://fanfa.dev/
129•bairess•5d ago•30 comments

Show HN: A TSP game I wanted for 10 years - built in 4 hours

https://www.graphhopper.com/blog/2025/12/08/a-tsp-game-10-years-in-the-making-built-in-4-hours/
3•oblonski•1h ago•0 comments

Show HN: OpenDataLoader – Safe, Open, High-Performance PDF Loader for AI

https://opendataloader.org/
2•Julia_Katash•2h ago•0 comments

Show HN: Free Logo API – logos for any company or domain

https://logos.apistemic.com/
7•lorey•3h ago•3 comments

Show HN: DuckDB for Kafka Stream Processing

https://sql-flow.com/docs/tutorials/intro/
70•dm03514•22h ago•13 comments

Show HN: I got 50% of my traffic from ChatGPT instead of Google

https://localpdf.online/
6•ulinycoin•4h ago•3 comments

Show HN: Vieta Space, a visual LaTeX math editor

https://docs.vietaspace.com/guide/features
3•liamhawtin•5h ago•1 comments

Show HN: Lockenv – Simple encrypted secrets storage for Git

https://github.com/illarion/lockenv
99•shoemann•1d ago•33 comments

Show HN: Octopii, a runtime for writing distributed applications in Rust

https://github.com/octopii-rs/octopii
14•puterbonga•15h ago•0 comments

Show HN: I built a website that runs itself. Roast my AI-generated content

https://www.stvck.dev
2•since•6h ago•3 comments

Show HN: I replaced Markov Chains with Biomechanics to predict word transitions

https://github.com/Professor-Sam-Sepi0l/biomechanical-linguistics-poc
3•Sam_Sep10l•6h ago•2 comments

Show HN: ReadyKit – Superfast SaaS Starter with Multi-Tenant Workspaces

https://readykit.dev/
120•level09•1w ago•35 comments

Show HN: DeChecker – Detect AI-generated text

https://dechecker.ai
2•GrammarChecker•7h ago•0 comments

Show HN: Diesel-guard – Lint Diesel migrations for unsafe PostgreSQL patterns

https://github.com/ayarotsky/diesel-guard
16•ayarotsky•22h ago•0 comments

Show HN: Zonformat– 35–60% fewer LLM tokens using zero-overhead notation

https://zonformat.org
2•ronibhakta•8h ago•2 comments

Show HN: Persistent memory for Claude Code sessions

https://github.com/TonyStef/Grov
20•tonyystef•6d ago•13 comments

Show HN: Cdecl-dump - represent C declarations visually

https://github.com/bbu/cdecl-dump
35•bluetomcat•1d ago•12 comments

Show HN: A "bank of my parents" for my young kids

https://www.bankofmyparents.com
3•aintitthetruitt•12h ago•1 comments

Show HN: Spotify Wrapped but for LeetCode

https://github.com/collinboler/leetcodewrapped
27•collinboler2•1d ago•11 comments

Show HN: Tool to detect malware left behind after patching CVE-2025-55182

3•Just_Clive•15h ago•0 comments

Show HN: Kraa – Writing App for Everything

https://kraa.io/about
127•levmiseri•5d ago•73 comments

Show HN: Web app that lets you send email time capsules

https://resurf.me
44•walrussama•1d ago•28 comments

Show HN: Onlyrecipe 2.0 – I added all features HN requested – 4 years later

https://onlyrecipeapp.com/?url=https://www.allrecipes.com/turkish-pasta-recipe-8754903
201•AwkwardPanda•5d ago•157 comments

Show HN: RamScout – Search eBay RAM Listings by Price per GB (US/UK)

https://www.ramscout.com/
5•chinskee•17h ago•1 comments