Vue Flow usage in n8n codebase.

In this article, we review Vue Flow usage in n8n. You will learn:

1. What is Vue Flow?

2. How Vue Flow is used to build workflows in n8n. Press enter or click to view image in full size

What is Vue Flow?

Vue Flow is a bridge to the world of interactive flowcharts and graphs, empowering you to bring dynamism and interactivity to flowcharts and graphic representations. Whether it’s crafting personal diagrams, generating dynamic editors, or anything else your imagination conjures up, Vue Flow is your creative companion.

Vue Flow makes it effortless to customize and extend basic functionalities by allowing the integration of your own bespoke nodes and edges. Additional components such as Background, Minimap, and Controls further enrich the interface, transforming your creations into engaging platforms.

Key Features

1. Seamless setup

2. Customizable

3. Efficient and Responsive

4. Utilities and Composability

5. Additional Components

6. Reliable

Check out the Getting Started guide.

How Vue Flow is used to build workflows in n8n.

I found the Vue Flow imports in the Canvas.vue file. n8n uses Vue in its frontend/editor-ui package.

// in Canvas.vue
import { 
  getRectOfNodes, 
  MarkerType, 
  PanelPosition, 
  useVueFlow, 
  VueFlow } from '@vue-flow/core';

Below is a code snippet I picked from the getting started guide:

<VueFlow :nodes="nodes" :edges="edges">
  <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
  <template #node-special="specialNodeProps">
    <SpecialNode v-bind="specialNodeProps" />
  </template>
 
  <!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
  <template #edge-special="specialEdgeProps">
    <SpecialEdge v-bind="specialEdgeProps" />
  </template>
</VueFlow>

VueFlow component expects nodes and edges. Now that we understand the basics of how nodes and edges are configured, let’s review the VueFlow definition in the Canvas.vue:

<VueFlow
  :id="id"
  :nodes="vueFlowNodes"
  :edges="connections"
  :class="classes"
  :style="selectionBoxStyle"
  :apply-changes="false"
  :connection-line-options="{ markerEnd: MarkerType.ArrowClosed }"
  :connection-radius="60"
....

For one, this VueFlow component in n8n has a lot of props. You can see them in Canvas.vue L1771.

Below is a how Nodes are defined:

<template #node-canvas-node="nodeProps">
   <slot name="node" v-bind="{ nodeProps }">
    <Node
     v-bind="nodeProps"
     :data="nodeDataById[nodeProps.id]"
     :selected="nodeProps.selected && !fullySelectedGroupMemberIds.has(nodeProps.id)"
     :read-only="readOnly"
     :can-execute="canExecute"
     :event-bus="eventBus"
     :hovered="nodesHoveredById[nodeProps.id]"
...

I only copied a part of the entire component declaration and similarly edges are defined as shown below:

<template #edge-canvas-edge="edgeProps">
   <slot name="edge" v-bind="{ edgeProps, arrowHeadMarkerId }">
    <Edge
     v-bind="edgeProps"
     :marker-end="`url(#${arrowHeadMarkerId})`"
     :read-only="readOnly"
     :hovered="edgesHoveredById[edgeProps.id]"
     :bring-to-front="edgesBringToFrontById[edgeProps.id]"
     @add="onClickConnectionAdd"
     @delete="onDeleteConnection"
     @update:label:hovered="onUpdateEdgeLabelHovered(edgeProps.id, $event)"
    />
   </slot>
</template>

Nodes and Edges components are defined in the elements folder.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

I spent 3+ years studying OSS codebases and wrote 400+ articles on what makes the production-grade. Now I'm putting that into practice differently - instead of writing every fix myself, I run coding agents that do it.

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

1. github.com/n8n-io/n8n/packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.vue.

2. github.com/n8n-io/n8n/tree/packages/frontend/editor-ui.

3. vueflow.dev/.

4. vueflow.dev/guide/getting-started.html.