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

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:

<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) 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 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:

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 (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: Handles persistence of diagram XML. This is where you can programmatically inject animated=1 into saved diagrams.

• 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 to preprocess AI-generated XML and ensure connectors animate before saving.
• UI reference: Find example prompts in 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 (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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}