Creating Flow Diagrams: How to Set Up Drawflow JS

3 min readNov 13, 2024

Drawflow is a JavaScript library that makes creating interactive, visual workflows on the web easy.

If you’ve explored its documentation, you might have found it detailed but a bit challenging to follow for beginners. This tutorial series will guide you through:

- setting up Drawflow
- adding basic nodes
- adding connected nodes
- customizing your nodes and connecting lines

In this first part, we’ll cover the essentials to add Drawflow to your project, create a canvas, and add a basic “Hello World” node to make sure everything is working.

Step 1: Include Drawflow in Your Project

Option 1: Add Drawflow via CDN

Using a CDN is the fastest way to include Drawflow in a project, especially if you’re testing things out or building a quick prototype.

1. Add the following `<script>` and `<link>` tags to your HTML file inside the `<head>` section:

<link rel="stylesheet" href="https://unpkg.com/drawflow@0.0.60/dist/drawflow.min.css" />
<script src="https://unpkg.com/drawflow@0.0.60/dist/drawflow.min.js"></script>

This links directly to Drawflow’s JavaScript and CSS files via the CDN.

Option 2: Install Drawflow via NPM

If you’re working on a larger project and prefer package management, you can install Drawflow via NPM.

1. In your project directory, run:

npm install drawflow

2. Then, import Drawflow into your JavaScript file:

import Drawflow from 'drawflow';
import styleDrawflow from 'drawflow/dist/drawflow.min.css'

Step 2: Set Up the HTML Canvas

Drawflow needs a parent HTML container(which I like calling the canvas) to render the nodes and connections. Here’s how to set it up:

1. Add a `<div>` with an ID and class of `drawflow` in your HTML file. This will serve as the main canvas where all nodes and workflows will appear.

<div id="drawflow" class="drawflow"></div>

2. Next, style the canvas to give it some space and make it easy to view:

#drawflow {
 width: 100%;
 height: 600px;
 border: 1px solid #ddd;
}

Step 3: Initialize Drawflow in JavaScript

Once you have the Drawflow library included and the HTML canvas set up, you need to initialize the Drawflow instance.

1. Add a `<script>` tag at the end of your HTML file, or include the following JavaScript code in a dedicated file.

const drawflowContainer = document.getElementById('drawflow');
const editor = new Drawflow(drawflowContainer);
editor.start();

This initializes Drawflow on the canvas we created.

Step 4: Add a Basic Node (“Hello World”)

To confirm everything is working, let’s add a basic node with the text “Hello Drawflow”

1. Inside the `<script>` tag (or in your JavaScript file), use the following code to add a node:

const nodeId = editor.addNode(
 'hello',
 1, // Number of inputs
 1, // Number of outputs
 100, // x position
 100, // y position
 'Hello Node', // Class name to be used for additional styling in CSS
 {}, // Data (if any)
 '<div>Hello Drawflow</div>' // HTML content
);

Here’s what each parameter does:
— `‘hello’`: a unique identifier for the node.
— `1` and `1`: specify one input and one output for the node.
— `100`, `100`: the x and y coordinates where the node will appear.
— `’node’`: an optional CSS class name.
— `{}`: data associated with the node (leave it empty for now).
— `’<div>Hello Drawflow</div>’`: the HTML content of the node.

— -

The code for the full page should be as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Drawflow Demo Hello World</title>
 <link rel="stylesheet" href="https://unpkg.com/drawflow@0.0.60/dist/drawflow.min.css" />
 <style>
 #drawflow {
 width: 100%;
 height: 600px;
 border: 2px solid #e2e8f0;
 border-radius: 0.375rem;
 }
 </style>
</head>
<body>
 <script src="https://unpkg.com/drawflow@0.0.60/dist/drawflow.min.js"></script>
 <div id="drawflow"></div>
<script>
 var id = document.getElementById("drawflow");
 const editor = new Drawflow(id);
 editor.start();
// Add nodes
 editor.addNode('Hello Node', 1, 1, 100, 100, 'node', {}, `<div>Hello Drawflow!</div>`);
</script>
</body>
</html>