Simple Layout

When handling large sets of automatically generated data, manually specifying coordinates for every node is inefficient. While Flow remains lightweight by not bundling exhaustive layout algorithms, it is designed to integrate perfectly with industry-standard layout engines like dagre or ELK.

Dagre Auto-Layout Demo

Click the buttons below to trigger the Dagre algorithm. It will calculate the optimal hierarchical structure for the nodes and batch-update their positions instantly.

Node 1

Node 2

Node 3

Node 4

Node 5

Dagre Hierarchical Layout

Implementation Workflow

To apply an external layout to your flow, follow these steps:

1. Initialize the Engine: Create an instance of your chosen layout library (e.g., Dagre).
2. Sync the Topology: Loop through your nodes and edges arrays to mirror the structure in the layout engine. Note: Most layout engines require you to provide node dimensions (width/height) to calculate spacing accurately.
3. Run Calculations: Execute the layout command.
4. Rehydrate State: Extract the resulting x, y values from the layout engine and batch-update your reactive nodes collection in Vue.

TIP

For a more polished user experience, you can complement layout changes with CSS transitions to make nodes glide to their new positions. See the Layout & Animation section for details.

500+ Nodes: Enterprise Performance Tuning

When rendering and laying out 500, 1000, or even more AI orchestration nodes on the canvas, a traditional full for loop calculation (like native dagre/d3-force algorithms) will completely freeze the browser for several seconds, severely degrading the user experience. As a geek-grade toolkit, YH-UI Flow natively offers a "Performance Lift-off" strategy from two dimensions:

1. Dynamic Streaming & Collision (Living Simulation)

If you use the built-in createLayoutPlugin({ type: 'force' }), the core engine has been thoroughly refactored into a time-sliced architecture based on requestAnimationFrame (rAF). The physical repulsion of hundreds of iterations is distributed across multiple frames. This means:

• Never blocks the main thread: During the layout process, you can still scroll, drag, and click with explosive fluidity.
• Cellular-level visual FX: The layout process is no longer a dull "freeze-and-snap". Hundreds of nodes will stretch dynamically and distribute elastically just like biological cells, delivering a truly visual physical world interaction.

2. Web Worker Deep Offloading

For algorithms that must synchronously compute and return results (such as Dagre), we officially reserved a complete offloading interface in LayoutOptions:

import { createLayoutPlugin } from '@yh-ui/flow'

// Specify Web Worker usage when installing the plugin
flowRef.value.usePlugin(
  createLayoutPlugin({
    type: 'dagre',
    useWebWorker: true // Enables full cross-thread offscreen calculation
    // workerUrl: '/my-custom-layout-worker.js' // Can be passed manually if your bundler cannot handle it automatically
  })
)

TIP

Thanks to the specialized optimizations of the native architecture mentioned above, YH-UI Flow explicitly outcompetes traditional secondary-wrapper component libraries in interactive feel when displaying massive datasets!