Impact-Site-Verification: 41b53a0c-6d04-458b-a457-fe9e29acde1a

Developer Tools/UnknowndiagramsMermaidinteractiveanimated·

Fanfa

Interactive and animated Mermaid diagrams for developers

Fanfa

What it does

Fanfa is a web-based tool that transforms static Mermaid.js diagrams into interactive, animated visualizations. It provides a live editor where users can write or paste Mermaid syntax and see the diagram update instantly with smooth, physics-based animations. The tool offers cinematic rendering with themes like Aurora and Cyberpunk, and supports video export (MP4/WebM) for embedding in presentations or documentation. Additionally, Fanfa includes AI-assisted design to generate Mermaid syntax from natural language prompts.

Who it is for

Fanfa is designed for developers, architects, and technical writers who need to create compelling visual narratives for documentation, presentations, and team onboarding. It is particularly useful for those working with system architectures, data flows, and complex user flows who want to move beyond static diagrams.

Why it matters

Traditional diagram tools produce static images that can be difficult to follow for complex processes. Fanfa's animations help viewers understand the flow and interactions in a diagram, making technical concepts more accessible. The ability to export videos and share links simplifies collaboration and integration into various media. By supporting standard Mermaid syntax, Fanfa lowers the barrier for developers already familiar with Mermaid.

Launch signal

Fanfa was launched on Hacker News as a "Show HN" post titled "Fanfa – Interactive and animated Mermaid diagrams." The website is live at fanfa.dev and offers a quick tour, templates, and a sign-in feature. The tool is described as open-source, though the repository is not linked on the page.

Brand and naming

The name "Fanfa" is short, memorable, and suggests a playful, dynamic tool (evoking "fanfare"). The tagline "Visual Brain" and the description "Live Mermaid render with cinematic flow" position it as a creative, developer-friendly alternative to static diagramming tools. The branding emphasizes animation and interactivity, differentiating it from traditional Mermaid editors.

Founder

bairess

Get more like this in our weekly newsletter.