Skip to content

Getting Creative with Theming

Let's take a tour around the library styles, customization opportunities, and other features that Vue Flow offers out of the box.

Library Styles

Vue Flow values flexibility and allows you to take the lead when it comes to styling. It showcases some obligatory stylings that must be imported, while leaving optional features, such as the default theme, up to your preference.

To import the necessary and optional styles:

css
/* these are necessary styles for vue flow */
@import '@vue-flow/core/dist/style.css';

/* this contains the default theme, these are optional styles */
@import '@vue-flow/core/dist/theme-default.css';

Tweaking the Default Theme

The Vue Flow default theme functions as your baseline, which you can customize and decorate as per your liking using CSS rules, style and class properties, and CSS variables.

Styling with CSS Classes

Here's how you can use CSS classes to add a pop of color or alter the font style for the theme:

css
/* Use a purple theme for our custom node */
.vue-flow__node-custom {
    background: purple;
    color: white;
    border: 1px solid purple;
    border-radius: 4px;
    box-shadow: 0 0 0 1px purple;
    padding: 8px;
}

Using CSS Properties

You can also directly pass a style or class attribute to Vue Flow components and nodes/edges.

Below are a couple of examples on how you can do this:

Directly styling the Vue Flow component:

vue
<VueFlow
  v-model="elements"
  class="my-diagram-class"  
  :style="{ background: 'red' }"
/>

Styling nodes/edges with a style or class attribute:

js
/* Customizing node by assigning class and style properties */
const nodes = ref([
  { 
    id: '1', 
    label: 'Node 1', 
    position: { x: 250, y: 5 },
    
    // Add a class name to the node
    class: 'my-custom-node-class',
    
    // You can pass an object containing CSSProperties or CSS variables
    style: { backgroundColor: 'green', width: '200px', height: '100px' },
  },
])

Redefining Styles with CSS variables

Some of the defined theme styles can be overwritten using CSS variables. These alterations can be implemented either on a global scale or to individual elements.

css
/* Global default CSS variable values */
:root {
    --vf-node-bg: #fff;
    --vf-node-text: #222;
    --vf-connection-path: #b1b1b7;
    --vf-handle: #555;
}
js
const elements = ref([
  { 
    id: '1', 
    label: 'Node 1', 
    position: { x: 100, y: 100 }, 
    /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
    style: { '--vf-node-color': 'blue' } 
  },
])

CSS Variables

Here's a concise list of CSS variables you can consider, along with their effects:

VariableEffect
--vf-node-colorDefines node border, box-shadow, and handle colors
--vf-box-shadowDefines color of node box-shadow
--vf-node-bgDefines node background color
--vf-node-textDefines node text color
--vf-handleDefines node handle color
--vf-connection-pathDefines connection line color

CSS Class Names

Here you'll find a handy reference guide of class names and their respective elements:

Containers

NameContainer
.vue-flowThe outer container
.vue-flow__containerWrapper for container elements
.vue-flow__viewportThe inner container
.vue-flow__backgroundBackground component
.vue-flow__minimapMiniMap component
.vue-flow__controlsControls component

Edges

NameDescription
.vue-flow__edgesWrapper rendering edges
.vue-flow__edgeWrapper around each edge element
.vue-flow__selectionpanePane for handling user selection
.vue-flow__selectionDefines current user selection box
.vue-flow__edge-{type}Edge type (either custom or default)
.vue-flow__edge.selectedDefines the currently selected edge(s)
.vue-flow__edge.animatedDefines an animated edge
.vue-flow__edge-pathSVG path for edge elements
.vue-flow__edge-textWrapper around edge label
.vue-flow__edge-textbgBackground wrapper around edge label
.vue-flow__connectionlineContainer for the connection line elements
.vue-flow__connectionIndividual connection line element
.vue-flow__connection-pathSVG path for connection line

Nodes

NameDescription
.vue-flow__nodesRendering wrapper around nodes
.vue-flow__nodeWrapper around each node element
.vue-flow__node.selectedDefines the currently selected node(s)
.vue-flow__node-{type}Node type (either custom or default)
.vue-flow__nodesselectionDefines selection rectangle for nodes

Node Handles

NameDescription
.vue-flow__handleWrapper around node handle elements
.vue-flow__handle-bottomDefines a handle at bottom
.vue-flow__handle-topDefines a handle at top
.vue-flow__handle-leftDefines a handle at left
.vue-flow__handle-rightDefines a handle at right
.vue-flow__handle-connectingConnection line is over the handle
.vue-flow__handle-validConnection line over handle with valid connection

Released under the MIT License.