Customizing Edges in LogicFlow: From BaseEdge to Animated SVG Edges

In a flowchart, an edge connects two nodes and can convey direction, conditions, or animations; LogicFlow models an edge with five modules—line, arrow, text, and adjustment points—allowing developers to extend the base edge class for custom behavior.

The core class BaseEdge defines fundamental attributes such as source and target node IDs, start and end points, text, custom properties, and a list of path vertices. Its companion model BaseEdgeModel provides methods like initEdgeData , setAnchors , initPoints , and formatText , as well as rendering helpers such as getEdgeStyle , getEdgeAnimationStyle , and getArrowStyle .

LogicFlow derives three built‑in edge types from the base edge: straight, polyline, and curve edges, each with specific SVG implementations (line, polyline, and path elements) and custom path‑calculation logic.

To create a custom animated edge, the article shows how to subclass PolylineEdge and PolylineEdgeModel , override getEdge to return a polyline with animation‑related SVG attributes, and register the new edge type:

import { h, PolylineEdge, PolylineEdgeModel } from '@logicflow/core'

class CustomAnimateEdge extends PolylineEdge {
  getEdge() {
    const { model } = this.props
    const { points, arrowConfig } = model
    const style = model.getEdgeStyle()
    return h('g', {}, [
      h('polyline', { points, ...style, ...arrowConfig, fill: 'none', strokeLinecap: 'round' })
    ])
  }
}

class CustomAnimateEdgeModel extends PolylineEdgeModel {}

export default {
  type: 'customAnimatePolyline',
  model: CustomAnimateEdgeModel,
  view: CustomAnimateEdge,
}

The article also demonstrates how to render a canvas with nodes and multiple custom edges, showing the JSON configuration for nodes and edges.

For animation, LogicFlow exposes an EdgeAnimation type that maps directly to SVG and CSS animation properties. By overriding getEdgeAnimationStyle , developers can define dash patterns, durations, colors, and other animation parameters:

class ConveyorBeltEdgeModel extends PolylineEdgeModel {
  getEdgeAnimationStyle() {
    const style = super.getEdgeAnimationStyle()
    style.strokeDasharray = '40 160'
    style.animationDuration = '10s'
    style.stroke = 'rgb(130, 179, 102)'
    return style
  }
}

Further customization adds linear gradients and SVG filters for color transitions and shadows, inserted into the getEdge return value using linearGradient and filter elements.

In conclusion, LogicFlow provides a highly flexible framework for defining and animating edges, enabling developers to tailor visual flowcharts to complex business requirements.