# How to Enable Animated Connectors in Next AI Draw.io Diagrams

> Learn to enable animated connectors in Next AI Draw.io diagrams easily. Toggle the animate checkbox or update XML style for dynamic visuals.

- Repository: [Dayuan Jiang/next-ai-draw-io](https://github.com/DayuanJiang/next-ai-draw-io)
- Tags: how-to-guide
- Published: 2026-07-13

---

**To enable animated connectors in Next AI Draw.io, either toggle the "Animate" checkbox in the editor's Style panel for specific edges, or programmatically inject `animated=1` into the connector's XML style attribute.**

Next AI Draw.io leverages the open-source **draw.io (diagrams.net)** editor embedded within the application to render AI-generated diagrams. Animated connectors are a native draw.io feature that makes connection lines flow continuously, visually indicating data flow or process dynamics. Whether you are editing interactively or generating diagrams via prompts in the `DayuanJiang/next-ai-draw-io` repository, you can enable this effect through the UI or by manipulating the underlying XML.

## What Are Animated Connectors?

Animated connectors are moving lines between shapes that illustrate active data flow or process transitions. In the draw.io editor, this effect is controlled by the `animated=1` style attribute. When applied to a connector (edge), the line renders with a continuous animation loop that persists in both the editor preview and exported files.

## Method 1: Enable Animation via the UI (Recommended)

For interactive editing, use the built-in Style panel to toggle animation on specific connectors. This is the fastest way to animate individual connections without modifying code.

### Step-by-Step Instructions

1. Open a diagram in the Next AI Draw.io editor.
2. Click the connector line you wish to animate.
3. In the right-hand **Style** pane (gear ⚙️ icon), locate the **Connector** section.
4. Check the **"Animate"** checkbox. This appends `animated=1` to the connector's style string.
5. Save the diagram to persist the animation state.

The style string for the edge will now contain the `animated=1` flag, causing the line to animate immediately in the canvas.

## Method 2: Enable Animation Programmatically

When generating diagrams via AI prompts or manipulating XML directly, you can inject the animation flag programmatically. This is essential for templates or batch processing.

### Injecting the Style Flag in XML

The animation state is stored in the diagram's XML as a style attribute on `mxCell` elements. To enable animation, ensure the connector's style includes `animated=1`:

```xml
<mxCell id="5" style="edgeStyle=orthogonal;rounded=0;animated=1;" source="2" target="3"/>

```

If generating diagrams through the AI prompt system (such as requesting "animated connector diagrams" in the chat interface), the backend stores the XML in template storage. You can preprocess this XML to inject the animation flag before saving.

### Using URL Parameters

When embedding the draw.io editor via iframe, you can force all connectors to animate by passing the `animation=1` query parameter:

```

https://embed.diagrams.net/?embed=1&ui=sketch&animation=1

```

According to the source code, the **diagram-loader** component (referenced in [`components/diagram-editor.tsx`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/components/diagram-editor.tsx)) reads this parameter and automatically applies `animated=1` to every edge at load time.

## Automating Animation in Template Storage

For diagrams generated via AI prompts, you can automatically enable animation before persisting to storage. The [`lib/template-storage.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/lib/template-storage.ts) module handles saving and loading of diagram XML, making it the ideal location to inject animation flags.

Here is a practical example that processes AI-generated XML to add `animated=1` to every connector before saving:

```tsx
import { saveDiagram } from '@/lib/template-storage';

// Load the XML generated by the AI
let xml = await fetchDiagramFromAI(promptText);

// Inject animation flag into every edge
xml = xml.replace(
  /<mxCell([^>]*?)style="([^"]*?)"/g,
  (_, before, style) => {
    const newStyle = style.includes('animated=1')
      ? style
      : `${style};animated=1`;
    return `<mxCell${before}style="${newStyle}"`;
  }
);

// Persist the updated diagram
await saveDiagram(userId, xml);

```

This approach ensures all connectors animate regardless of whether the AI initially included the attribute.

## Key Implementation Files

Understanding where animation logic resides in the codebase helps with customization:

- **[`components/chat-example-panel.tsx`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/components/chat-example-panel.tsx)** (lines 183-188): Contains the UI panel offering pre-written prompts, including the *animated connector* example that suggests the phrasing "animated connector" to the AI.

- **`app/[lang]/about/page.tsx`** (lines 170-192): The marketing page describing the feature set, which explicitly mentions "animated connectors" in the user-facing documentation.

- **[`lib/template-storage.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/lib/template-storage.ts)**: Handles persistence of diagram XML. This is where you can programmatically inject `animated=1` into saved diagrams.

- **[`components/diagram-editor.tsx`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/components/diagram-editor.tsx)**: Embeds the draw.io iframe and parses URL parameters such as `animation=1` to apply global animation settings at load time.

## Summary

- **Animated connectors** in Next AI Draw.io use the native draw.io `animated=1` style attribute.
- **Interactive method**: Select a connector and check the **Animate** checkbox in the Style panel.
- **Programmatic method**: Inject `animated=1` into the XML style string or use the `animation=1` URL parameter.
- **Template automation**: Use [`lib/template-storage.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/lib/template-storage.ts) to preprocess AI-generated XML and ensure connectors animate before saving.
- **UI reference**: Find example prompts in [`components/chat-example-panel.tsx`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/components/chat-example-panel.tsx) that demonstrate requesting animated diagrams.

## Frequently Asked Questions

### What is the exact style attribute to enable connector animation?

The exact attribute is `animated=1`. When added to a connector's style string in the XML (e.g., `style="edgeStyle=orthogonal;animated=1;"`), draw.io renders the line with continuous movement. Checking the **Animate** checkbox in the UI automatically appends this value to the style.

### Can I enable animation for all connectors at once?

Yes. When loading the diagram editor via URL, append the `animation=1` query parameter. The diagram-loader component reads this flag and applies `animated=1` to every connector automatically. Alternatively, programmatically process the XML using string replacement (as shown in the template storage example) to inject the flag into all `mxCell` elements with edge styles.

### Does the animation persist when exporting the diagram?

Yes. The `animated=1` style is stored in the diagram's XML definition. When you export or save the file, the attribute remains in the markup. The animation will display in any draw.io viewer or editor that supports the feature, including the embedded Next AI Draw.io viewer.

### Where can I find an example of requesting animated connectors in the UI?

Navigate to the **Chat Example Panel** in the application interface. The file [`components/chat-example-panel.tsx`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/components/chat-example-panel.tsx) (lines 183-188) contains a button that populates the prompt input with text including "animated connector," demonstrating the exact phrasing used to request animated diagrams from the AI backend.