[HN Gopher] Show HN: Fanfa - Interactive and animated Mermaid di...
___________________________________________________________________
Show HN: Fanfa - Interactive and animated Mermaid diagrams
Author : bairess
Score : 138 points
Date : 2025-12-04 13:16 UTC (5 days ago)
(HTM) web link (fanfa.dev)
(TXT) w3m dump (fanfa.dev)
| 2muchcoffeeman wrote:
| Can't tell from that link. Is there a better layout engine?
| fwip wrote:
| 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 wrote:
| There will more a powerful controls for each node soon. For now
| there is a "Director mode" to control speed and traffic.
| yakbarber wrote:
| love it!
| mal10c wrote:
| 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 wrote:
| I don't see anything animated except a bit on load? I don't get
| it. This is on iOS Safari.
| bairess wrote:
| Will take a look let me know the details please
| larodi wrote:
| I don't understand who in the world needs animated something on
| his diagrams.
| nantangitan wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Short videos have subtitles for engagement with those
| watching without sound (a significant proportion)
| max002 wrote:
| it depends, if I want to create and edit graph fast, make
| sure style is consistent etc. then this suits my needs
| better.
| bairess wrote:
| 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 wrote:
| Motion definitely can help charts work better. Especially when
| the charts get really complex or detailed.
| knuit wrote:
| I would love an option to export as a gif that loops perfectly.
| jankovicsandras wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Huh... I'm not being to login with github :/ it says 404:
|
| https://github.com/login/oauth/authorize?access_type=offline...
| emmavis wrote:
| Looks good, can i animate just connection to clicked node?
| jadbox wrote:
| - how much is Pro and what does it do?
|
| - can I download as animated gif or mpeg4 to embed into slides?
___________________________________________________________________
(page generated 2025-12-09 23:02 UTC)