Now with Director Mode

Transform Diagrams into
Cinematic Animations

Describe your system in plain language, get Mermaid instantly, then animate it into a cinematic story. Share, embed, and export everywhere.

Avg. time to first diagram

< 2 min

Teams using fanfa.dev

1,200+

Export formats

PNG · SVG · PDF · MP4

Scroll
Live Preview

See It in Action

Watch static Mermaid diagrams transform into living, breathing visualizations

fanfa.dev
Animated
Interactive
Cinematic
Before
Static Mermaid
graph LR
    A[Start] --> B{Decision}
    B --> C[Option 1]
    B --> D[Option 2]
    C --> E[End]
    D --> E
After
fanfa.dev Magic
Animated • Interactive • Beautiful
Features

Everything You Need

A complete toolkit for creating, styling, and sharing beautiful diagrams.

Static to Animation

Transform plain Mermaid diagrams into stunning animated visualizations with cinematic transitions.

AI Mermaid Generation

Describe your diagram in natural language and get Mermaid code instantly.

Shareable Links

Generate instant shareable links for your diagrams. Share with anyone, anywhere.

Password Protected

Secure sensitive diagrams with password protection. Control who sees your work.

Embed Anywhere

Embed interactive diagrams in your docs, blogs, or apps with a simple iframe.

Beautiful Themes

Choose from Aurora, Midnight, Forest, Ocean and more stunning visual themes.

Custom Arrows

Stunning arrow styles with animations - flowing, pulsing, electric, and more.

Export Options

Export to PNG, SVG, PDF, or even animated video formats.

Export to Video

Render MP4/WebM exports with motion timing baked in.

Director Mode

Control animation timing, sequences, and effects like a film director.

Use Cases

Who is fanfa.dev for?

Empowering everyone who needs to explain complex ideas simply.

Personalization

Expressive Connector Styles

Customize every arrow to match your diagram's personality.

Solid
Dotted
Dashed
Gradient Flow
Neon Pulse
Cyberpunk
Ghost Trail
Electric
Templates

Start Faster with Templates

Browse our collection of community-contributed diagrams regarding architecture, workflows, and more.

Cloud Architecture

AWS, Azure, and GCP reference architectures ready to customize.

System Design

Sequence diagrams, C4 models, and dependency graphs.

Flowcharts

Business processes, user flows, and decision trees.

Themes

Stunning Visual Themes

Choose from carefully crafted themes for every style and purpose

Aurora

Midnight Glacier

Forest Night

Sunset Ember

+ 7 more themes available
Embed

Embed Anywhere

Add interactive diagrams to your documentation, blogs, Notion pages, or any website with a simple embed code.

<iframe
  src="https://fanfa.dev/e/abc123"
  width="100%"
  height="400"
/>
NotionMediumGitHubConfluenceDocusaurus
your-docs.com
fanfa.dev embed

Ready to flow?

Join thousands of developers and designers creating cinematic diagrams today.

Start for Free

fanfa.dev: The Animated Mermaid Diagram Editor for Developers

Fanfa.dev is the premier open-source tool designed to transform static Mermaid.jsdiagrams into animated, cinematic visualizations. Unlike traditional diagram tools that produce static images, Fanfa's proprietary Motion Engine breathes life into your flowcharts, sequence diagrams, and detailed system architectures.

Why Choose Fanfa for Mermaid Diagrams?

Developers and architects rely on Fanfa to create compelling visual narratives for technical documentation, presentations, and team onboarding. Key capabilities include:

  • Live Animation: Instantly visualize data flow and system interactions with smooth, physics-based animations.
  • Cinematic Rendering: Apply premium themes (like Aurora and Cyberpunk) that elevate standard diagrams into professional assets.
  • Video Export: seamless export logic allows you to download your animated diagrams as high-definition MP4 or WebM videos, perfect for embedding in slides or documentation.
  • AI-Assisted Design: Leverage built-in AI to generate complex Mermaid syntax from simple natural language prompts.

How It Works

  1. Write or Paste Mermaid Code: Use the built-in editor to input standard Mermaid syntax. Fanfa supports flowcharts, sequence diagrams, and more.
  2. Customize Your Visuals: Select from a variety of hand-crafted themes and arrow styles. Adjust animation speeds and traffic density to match your presentation flow.
  3. Export and Share: Generate a shareable link or export a video file to include in your pull requests, wikis, or keynote presentations.

Whether you are documenting a microservices architecture or explaining a complex user flow, Fanfa.dev provides the visual fidelity needed to communicate technical concepts effectively.