Skip to main content

All available animations and custom action effects

These action effects are available in the Action dialog for custom links attached to cells in the diagram, and in the Animation dialog to set page animations (via File > Page Setup) that autoplay in the lightbox viewer and presentation mode.

  • Each action is applied to the cells in the action's selection lists (Cells, Layers, Tags, Excludes).
  • The Wait, Open, Viewbox, Explore and Tags actions do not need cell IDs.

Actions are grouped into six categories: Visibility, Effects, Style, Navigation, Tags, and Timing.

Every effect is transient by default

Clicking a custom action — or playing an animation step — only changes what the current viewer sees in their browser. Nothing is recorded on the undo stack, nothing is synced to other people viewing the same diagram, and nothing is saved to the file. A page refresh restores the diagram to its original state before any action was performed.

This makes custom links and page animations both safe to use as presentation overlays on shared diagrams: the diagram data is never altered just because someone clicked on a custom link or watched an animation play.

Note: Legacy persistent effects using a JSON-only transient: false flag can be used to change the diagram display data on the following actions: Show, Hide, Toggle, Set Style, Toggle Style

Visibility​

  • Show - Sets the cell's SVG opacity to 1 (makes it visible).
  • Hide - Sets the cell's SVG opacity to 0 (makes it invisible).
  • Toggle - Flips the cell's SVG opacity between 0 and 1 (invisible/visible).
  • Set Opacity - Sets a specified opacity (0–1).

Effects​

  • Fade In - Animates the cell's opacity from 0 to 1.
  • Fade Out - Animates the cell's opacity from 1 to 0.
  • Fade To - Animates to an explicit opacity (0–1).
  • Wipe In - Reveals the cell with a wipe transition.
  • Wipe Out - Hides the cell with a reverse wipe.
  • Pop In - Scales the cell and fades in.
  • Pop Out - Scales the cell and fades out.

Every Effect above accepts an optional delay in milliseconds. Leave it blank to use the default (400 ms for fades, ~900 ms for wipe/pop).

Styles​

  • Set Style - Changes one style key (e.g. fillColor=#ff0000) on the cell's rendered state and repaints. Reverts on the next view refresh. Start typing a style key or name in the text box to see a list of matching styles.
  • Toggle Style - Flips a style key between two values on the cell's rendered state. Use defaultValue for the "off" state. Reverts on refresh. Click on the colour picker to choose light/dark mode colours for fillColor and strokeColor styles.
  • Highlight - Pulses a colour around the cell. This defaults to lime green (#00FF00) — mxGraph's DEFAULT_VALID_COLOR. Click on the colour picker to choose a differen highlight colour. Set an optional duration (ms) and opacity (%).
  • Flow - Toggles a "flow" animation on a connector by adding/removing a CSS class, set start: true/false to force and initial on/off state or omit this to toggle. This is different from toggling the flowAnimation style attribute (which IS persistent — set this with the Set Style action and edit the JSON of that action to use transient: false).
  • Select - Selects the cells on the canvas (only works when in the diagram editor and not in the lightbox viewer or presentation mode).
  • Scroll To - Scrolls the diagram to the the first matching cell. Select Transition to animate the pan with an ease-out curve instead of jumping directly to the target.
  • View - Zooms / pans to fit a rectangle in graph coordinates. Click Use Current button to capture the current viewport and preserve the current zoom level. Select Transition to animate this change — in the lightbox viewer or presentation mode a CSS transition is applied; in the draw.io editor the zoom changes immediately to the target but the pan animates with an ease-out curve.
  • Open - Opens a URL https://app.diagrams.net or jump to another diagram page using data:page/id,… Add the target page ID directly after the comma, e.g. data:page/id,ttOyNaaBSf6ha2BtVIuw
  • Explore - Opens the Explore viewer from the shape that has the custom link. Enter the number of levels of connected shapes to show when it opens (1 to 6). Select Classic to open the classic Explore viewer instead. This action is only available for custom links, not for page animations. Click the Play icon to open the Explore viewer from the shape whose link you are editing.

Tags​

Select existing diagram tags from a tag picker in three lists. The tags action changes the user's "hidden tags" filter — it doesn't change any cell's tags style. Reopening the diagram resets the filter.

  • Toggle: flips visibility for the selected tags.
  • Hide: forces the selected tags to be hidden.
  • Show: shows only the selected tags (all other tags are hidden).

Timing​

Wait - Pauses for N milliseconds before playing the next step.

Page animations settings​

Page animations (via File > Page Setup) have three additional settings for when a diagram is opened in the lightbox viewer or presentation mode.

  • Loop — The animation restarts after the final action finishes. This defaults to on to match the legacy animation plugin's behaviour. Deselect to play the animations once then stop.
  • Disabled — Disable all animations in the lightbox viewer and presentation mode. The Loop checkbox and the action list will be greyed out, but still editable. his defaults to off.
  • Share — Generate a URL with embedded diagram data of the current page set to autoplay. Append &animate=0 to the URL to share a static diagram with animations disabled.

The animation is saved in the page data's animation property as a JSON string (ensure nothing is selected, the click Edit Data in the Diagram tab of the format panel).

The legacy text format (show CELL fade, wait 1000, …) still loads — it converts to JSON the first time you open the dialog.

The optional Title at the top of the dialog is the link text displayed when you hover over the cell in the diagram (e.g. Highlight dependencies or Animate timeline).

Custom links are saved as cell data in a property as a data:action/json,… string.

Run actions in parallel​

By default each action in a sequence runs sequentially where the next step waits for the previous step's blocking effect (fade, wipe, smooth scroll, etc.) to finish before starting.

Tto run them at the same time, click the small Immediate/Wait toggle button that is between the drag handle and the action name. A double arrow indicates the step runs in parallel (immediate: true) and a timer icon indicates it will wait (default).

Step 1: Fade In A    
Step 2: Fade In B ⏩     Both A and B fade together
Step 3: Fade In C ⏱         Starts after both A and B finish fading

The first action is always played immediately as it doesn't need to wait.

You can chain several immediate steps in a row to build a wider parallel batch: every immediate step shares the same start time as its sequential predecessor.

Edit the JSON text​

Select the Edit Text checkbox to see the raw JSON of the custom action sequence or page animation sequence. Changes you make to this JSON string will be reflected when you return to the editor dialog - deselect Edit Text to return.

See the JSON actions reference for more information about writing actions directly.

You must edit the JSON text of a custom link to set transient: false to add a persistent effect to legacy actions: Show, Hide, Toggle, Set Style, Toggle Style.

Troubleshooting​

My animation doesn't play in lightbox mode: Make sure the page has at least one page animation step. Animations only autoplay when the diagram is loaded with ?lightbox=1 (or via View > Chromeless), and only if animate=0 is not set in the URL.

Clicking my cell doesn't perform the custom action: Custom actions on the shapes themselves only work on data:action/json,… links and only in lightbox, read-only or presentation mode, or when the layer/shape is locked. In the editor, select or hover over the unlocked shape to see the link and click on that instead.

My cells stayed faded out after I closed the editor: The dialog restores opacity (and the hidden-tag set) automatically on close, but if you exported the diagram mid-preview the export may capture the preview state. Reopen the custom link or page animation editor and click Reset, then re-export your diagram.

I want a custom action that permanently shows / hides a layer: The default Show / Hide / Toggle effects are transient — the change reverts on refresh. For a persistent change, add the "transient": false flag to the action's parameters via the Edit Text view.

The state of my diagram got messed up when I used the Layers or Tags dialog: If you have layer or tag-based toggle, show/hide actions or style modifications set on custom links, they can become out of sync if you also interact with your diagram via the Layers or Tags dialogs. Open the custom link editor and click Reset to restore the animation sequence to its starting state.