DEV Community

Simone Morellato
Simone Morellato

Posted on

Animation Plugin for draw.io Documentation & Deep Dive

Special thanks to Colin

Special thanks to my dear friend Colin for his great video that inspired and guided this documentation. Colin's thorough exploration and hands-on testing were crucial for uncovering the Animation.js plugin's capabilities. Props to Colin for making this all possible.

Image description

As a content creator, you're always looking for ways to make your diagrams and visual aids more engaging and impactful. Enter the Animation.js plugin for draw.io, a hidden gem that can transform your static diagrams into dynamic, animated masterpieces.

In this comprehensive post, we'll dive deep into this powerful yet undocumented feature, uncover its secrets, and equip you with the knowledge to bring your diagrams to life.

Discovering the Animation.js Plugin

The Animation.js plugin is a built-in feature of draw.io, the popular diagramming and visual collaboration platform. However, finding information on how to use this plugin can be a real challenge. This guide is designed to be the most comprehensive documentation for Animation.js available.

The existence of Animation.js is not widely known, and the official draw.io docs offer little guidance. Colin explored the codebase and experimented with features to unlock practical usage. Those lessons are shared here.

Setting the Stage: Activating the Animation.js Plugin

To enable the Animation.js plugin in draw.io:

  1. Go to the Extras menu and select Plugins
  2. In the Plugins window, find Animation.js and ensure it is enabled
  3. If not listed, click Add and select it from the dropdown
  4. Restart draw.io if required

With the plugin activated, you're ready for animated diagrams.

Animating Your Diagram Elements

  1. Open the Animations window (under the Extras menu)
  2. Select an element, pick an animation (fade-in, wipe-in, flow for arrows, etc.), and add it to your animation steps
  3. Important: Every element you want visible must have an animation. Unanimated elements will be invisible in playback and export

This can be tedious, but scripting and planning help.

Previewing and Applying Your Animations

  • Preview your animation steps in the Animations window
  • Unanimated elements are set to full transparency, which can look abrupt. Try alternative backgrounds or fades for smoother effects
  • Don’t forget: You must click Apply for your changes to take effect. There is no visual cue if you forget, so save or apply often

Exporting and Sharing Animated Diagrams

To export your animated diagram:

  1. Go to File > Export As > URL
  2. The animation data is encoded in the generated URL
  3. Very important: Manually add p=anim to the query string for animations to play

Example:

https://viewer.diagrams.net/?your_diagram_url&p=anim

If you skip this, the animation won't play.

Animating Text Elements

  • For advanced effects, animate each line of text separately
  • Put each line into its own text box, stack them if needed, and animate each in sequence for full control
  • Every text box must be animated to appear in the final export

Plugin Limitations & Community Contributions

  • Opacity handling, export parameters, and sparse documentation are known quirks
  • With only a handful of contributors, there’s lots of room to improve. Jump in if you can code — even small improvements help the community

Key Functions & Developer Reference

  • Plugin initialization: Adds menu item, actions, and Animation window UI
  • Animation window: Text area for scripting, preview, copy, and apply controls
  • Step script syntax: show, hide, fade, flow, wait actions per element

Functions

  • animateCells
  • mapCell
  • run
  • stop
  • AnimationWindow
  • toggleFlowAnim

Common Step Commands

Command Effect
show CELL [fade] Show a cell, optionally with fade-in effect
hide CELL Fade out a cell
flow CELL start/stop Start or stop a flow animation on a cell
wait MS Wait for MS milliseconds between steps

Replace CELL with the cell’s ID.

Unleash Your Animated Creativity

Animation.js for draw.io is more than a curiosity. It's a toolkit for creating engaging visualizations. Check out Colin’s demos, experiment, and consider contributing to keep the tool improving.

Many thanks again to Colin, my dear friend, for making this all possible.

Top comments (0)