DEV Community: avic ndugu

Drawflow Tutorial: 1. How to Set Up Drawflow

avic ndugu — Sat, 23 Nov 2024 00:00:00 +0000

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.

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.

In your project directory, run:

npm install drawflow

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:

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>

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.

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”

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>

Step 5: Test Your Setup

Open your HTML file in a browser. You should see a workflow canvas with a single node displaying “Hello Drawflow.”

If you see this, congratulations — you’ve setup a working Drawflow project.

In the next tutorial, we’ll dive deeper into adding connected nodes.

Drawflow Tutorial: 2. Automatically Show Nodes When Page Loads

avic ndugu — Mon, 18 Nov 2024 00:00:00 +0000

In our first tutorial, we set up Drawflow, created a canvas, and added a simple “Hello World” node.

Now, let’s move forward and explore how to add multiple nodes that are connected to each other right from page load.

This tutorial will guide you through adding new nodes and establishing connections between them.

Method 1: For Simple or Example Workflows

Use this method if you want to preload example workflows that users will delete when they begin to create their own workflows.

1. Add Multiple Nodes

To create connected nodes, we need to add each node to the canvas individually and assign them positions. We’ll add two nodes in this example and position them side by side.

Inside your <script> tag, let’s define these nodes:

// Add Node 1
const nodeId1 = editor.addNode(
  'node1',
  1, // Number of inputs
  1, // Number of outputs
  200, // x position
  200, // y position
  'node-class-1', // Class name (optional)
  {}, // Data (if any)
  '<div>Node 1</div>' // HTML content
);

// Add Node 2
const nodeId2 = editor.addNode(
  'node2',
  1, // Number of inputs
  1, // Number of outputs
  700, // x position, placing this to the right of Node 1
  200, // y position
  'node-class-2', // Class name (optional)
  {}, // Data (if any)
  '<div>Node 2</div>' // HTML content
);

This code will add two nodes labeled “Node 1” and “Node 2” to the canvas at specified positions.

2. Connect the Nodes

With our nodes added, let’s create a connection between them. In Drawflow, connections are established by specifying the output port of one node and the input port of another.

To connect Node 1’s output to Node 2’s input, add this line right after the nodes are created:

Here’s a breakdown of the addConnection parameters:

nodeId1: ID of the starting node.
nodeId2: ID of the destination node.
'output_1': the output port of Node 1 (we used a single output when adding the node).
'input_1': the input port of Node 2.

This will draw a line connecting Node 1 to Node 2, creating a visual workflow connection.

3. Putting It All Together

With the node creation and connection code in place, the full page code should appear 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>
    const drawflowContainer = document.getElementById('drawflow');
    const editor = new Drawflow(drawflowContainer);
    editor.start();

    // Add Node 1
    const nodeId1 = editor.addNode(
      'node1',
      1, // 1 input
      1, // 1 output
      200, // x position
      200, // y position
      'node-class-1',
      {},
      '<div>Node 1</div>'
    );

    // Add Node 2
    const nodeId2 = editor.addNode(
      'node2',
      1, // 1 input
      1, // 1 output
      700, // x position, right of Node 1
      200, // y position
      'node-class-2',
      {},
      '<div>Node 2</div>'
    );

    // Connect Node 1 to Node 2
    editor.addConnection(nodeId1, nodeId2, 'output_1', 'input_1');

  </script>

</body>
</html>

4. Test Your Connected Nodes

Save your HTML file and open it in a browser. You should see two nodes on the canvas, with Node 1 connected to Node 2 by a line.

Method 2: For User Generated Workflows

Creating each node individually as we did earlier can quickly become inefficient and tiresome.

Fortunately, Drawflow allows you to add nodes and connections on page load using data export and import. This approach is ideal for larger workflows, and workflows where users can create and edit workflows.

1: Define the Workflow Data

Drawflow uses JSON data to structure workflows, including the nodes and their connections. Let’s create a sample data object, dataToImport, that includes multiple nodes and their connections.

Each node in Drawflow requires properties like:

id : A unique identifier.
name : A label for the node.
html : The HTML content displayed within the node.
inputs and outputs : The input/output ports for connections.
pos_x and pos_y : The node’s position on the canvas.

Here’s an example of a JSON structure with two nodes that are connected:

const dataToImport = {
    "drawflow": {
        "Home": {
            "data": {
                "1": {
                    "id": 1,
                    "name": "node1",
                    "data": {},
                    "class": "",
                    "html": "<div>Node 1</div>",
                    "typenode": false,
                    "inputs": {},
                    "outputs": {
                        "output_1": {
                            "connections": [
                                {
                                    "node": "2",
                                    "output": "input_1"
                                }
                            ]
                        }
                    },
                    "pos_x": 200,
                    "pos_y": 200
                },
                "2": {
                    "id": 2,
                    "name": "node2",
                    "data": {},
                    "class": "",
                    "html": "<div>Node 2</div>",
                    "typenode": false,
                    "inputs": {
                        "input_1": {
                            "connections": [
                                {
                                    "node": "1",
                                    "input": "output_1"
                                }
                            ]
                        }
                    },
                    "outputs": {
                        "output_1": {
                            "connections": [
                                {
                                    "node": "3",
                                    "output": "input_1"
                                }
                            ]
                        }
                    },
                    "pos_x": 700,
                    "pos_y": 200
                },
                "3": {
                    "id": 3,
                    "name": "node3",
                    "data": {},
                    "class": "",
                    "html": "<div>Node 3</div>",
                    "typenode": false,
                    "inputs": {
                        "input_1": {
                            "connections": [
                                {
                                    "node": "2",
                                    "input": "output_1"
                                }
                            ]
                        }
                    },
                    "outputs": {},
                    "pos_x": 200,
                    "pos_y": 500
                }
            }
        }
    }
}

In this example:

Node 1 has one output (output_1) connected to the input of Node 2 (input_1).
Node 2 has one output (output_1) connected to the input of Node 3 (input_1).
Each node is positioned on the canvas using pos_x and pos_y.

2: Import the Data with `editor.import()`

Now, with your dataToImport defined, you’ll initialize Drawflow, then load this data directly into the canvas.

Set up a basic HTML structure with a Drawflow container.
Use editor.import(dataToImport); to load the nodes and connections on page load.

Here’s the complete code in action:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drawflow Workflow with Import</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" class="drawflow" style="width: 100%; height: 600px; border: 1px solid #ddd;"></div>

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

    const dataToImport = {
        "drawflow": {
            "Home": {
                "data": {
                    "1": {
                        "id": 1,
                        "name": "node1",
                        "data": {},
                        "class": "",
                        "html": "<div>Node 1</div>",
                        "typenode": false,
                        "inputs": {},
                        "outputs": {
                            "output_1": {
                                "connections": [
                                    {
                                        "node": "2",
                                        "output": "input_1"
                                    }
                                ]
                            }
                        },
                        "pos_x": 200,
                        "pos_y": 200
                    },
                    "2": {
                        "id": 2,
                        "name": "node2",
                        "data": {},
                        "class": "",
                        "html": "<div>Node 2</div>",
                        "typenode": false,
                        "inputs": {
                            "input_1": {
                                "connections": [
                                    {
                                        "node": "1",
                                        "input": "output_1"
                                    }
                                ]
                            }
                        },
                        "outputs": {
                            "output_1": {
                                "connections": [
                                    {
                                        "node": "3",
                                        "output": "input_1"
                                    }
                                ]
                            }
                        },
                        "pos_x": 700,
                        "pos_y": 200
                    },
                    "3": {
                        "id": 3,
                        "name": "node3",
                        "data": {},
                        "class": "",
                        "html": "<div>Node 3</div>",
                        "typenode": false,
                        "inputs": {
                            "input_1": {
                                "connections": [
                                    {
                                        "node": "2",
                                        "input": "output_1"
                                    }
                                ]
                            }
                        },
                        "outputs": {},
                        "pos_x": 200,
                        "pos_y": 500
                    }
                }
            }
        }
    }

    editor.import(dataToImport);

  </script>

</body>
</html>

When you load this HTML file in a browser, you should see two nodes on the canvas, with a connection linking Node 1 to Node 2.

3. Export and Save Workflow Data (Bonus)

If you want to save or reload a user-created workflow, you can use editor.export() to capture the current state of the canvas as JSON. This is helpful for workflows that need to be saved, edited, or reused later.

To export the workflow data:

const currentWorkflowData = editor.export();
console.log(JSON.stringify(currentWorkflowData));

This will output the current workflow JSON data to the console, which you can then save and re-import as needed.

In the next tutorial, you’ll learn how to add nodes through drag and drop.

9 steps to creating a web page using HTML [Illustrated guide]

avic ndugu — Fri, 07 Jun 2019 14:00:48 +0000

If you have ever wondered how HTML is used to make websites with pictures and videos, you have landed at the right place. I am going to walk you through the 9 steps of building a one page website using HTML. If you can build a one page website, you can build a multi-page website.

Requirements

You only need two things: a text editor and a browser. If you know how to use these two, skip the requirements section and go to the 9 steps process.

1. A text editor

You need a text editor to write the HTML code. Every computer has a text editor so don’t be in a hurry to install anything yet. You can use Notepad on Windows, Gedit on Ubuntu and TextEdit on MacOS X.

You will hear about fancy text editors that you should install. However, for your first HTML webpage, you don’t need to install anything. Use the text editors already in your computer.

After building your first webpage, you can check some of the other tools I use when making webpages that will make your work more comfortable.

2. A browser

You will be using Firefox, Chrome, Chromium, Safari or any other web browser already installed in your computer.

3. Content of the webpage

All webpages always contain some kind of information in various format like text, images, videos etc. For you to make a webpage, you need to some content or use dummy text and images.

If you just want to practice, you can copy the content I already prepared here.

If you want to create a unique webpage, you will have to:

Write the Content

Write or copy the text content that you will use on your webpage and save it on a document. If you copied some of content from other sources online, remember to copy the URL of the source. Then, save this in a document.

If you cannot find a topic for the webpage, pick a topic on 100 topic ideas for your first webpage.

Download the images or copy image URL

Find some relevant and useful images. Once you have found them, download the images or copy the url of the image and save it in document.

Once you have the text and image, its time to move on to the next step.

4. The website design

For your first webpage, I would recommend that you stick with a simple design web page. The web design is how the website looks. Remember, you are just practicing how to build webpages not design them.

You can choose from this simple html projects collection I prepared.

For this tutorial we will be building a webpage about Crickets For Food.

This webpage is not fancy but it a good first project. I made it one column to keep things beginner friendly.

7 steps to create your first HTML webpage

Step 1: Open a text/ html editor

Remember the text editor I talked about earlier on, time to open and use it. If you have used one before, skip to the next section. If you don’t know how, the instructions below will help you depending on the kind of computer you use.

How to open a text editor on a Ubuntu [Youtube]
How to open a text editor on a Window computer [Youtube]
How to open a text editor on a Mac [Youtube]

After opening the text editor of your choice, create a new file. Then, you can proceed to the next step.

Step 2: Write some html code

We are now going to add the HTML boiler plate code. This is the code that will allow the browser to correctly display your webpage.

Copy and paste the code below into your file. Your file should look like this now:

<!DOCTYPE html>
<html>
  <head>
   <title></title>
  </head>
  <body>
   Your content here.
  </body>
</html>

Save the html page by pressing CTRL + S or click on file option then save option. Ensure that you name the file in the following format: “name” then “.html” examples index.html, cooking.html.

You can use these two guidelines when naming webpage file:

use .html file name extension: The file name extension html tells the computer that that file is a web page and should be viewed by a web browser.
Use underscore or hyphen instead of space: If you choose to name your file to have more than one word, use hyphen or underscore between the words. If you put spaces in the file name, the webpage may not be found by the web browser.

Choose where to save the file. Once you have choosen a place to save the file, click save.

To view the file. Use your file manager to navigate to the folder your HTML file is. Right click on the file and open it with a browser. You should see something like this.

Step 3: Add the text content

Copy the content you wrote earlier or the ready made content I arranged for you to use. Paste it in between the body tags.

Refresh the webpage on the browser. It will look like a blob of text with no paragraphs or headings shown below.

Step 4: Add the html tags.

Headings

First, we shall tackle the headings. Check which part or the text was the main heading.In our example it is “Insect eating: The ultimate guide to eating crickets”.

Place this text between h1 tags as shown below:

  <h1>
    Insect eating: The ultimate guide to eating crickets
  </h1>

Save your work and check the result on the browser.

Paragraphs

For the paragraphs of text, place each paragraph of text between the <p></p> html tags.Example:

<p>
  When you hear about eating insects most people gross out. However, Insects are concidered a delicacy in many parts of the world. Most of the insects eaten are farm grown but in some places, they don' shy away from eating insects collected from the wild.
</p>
<p>
  Eating insects is concidered:
</p>
  healthy since insects have less fat content.
  enviromentally friendly: It takes less amount of food/plants to rear insects compared to cows.
  people who don't eat milk and meat products can try out insects as protein substitute.

View the result on the browser.

Step 6: Add a list

Lists make reading a group of things easier on our eyes and brain. Lets add a bullet points type list:

<ul>
  <li>healthy since insects have less fat content.</li>
  <li>enviromentally friendly: It takes less amount of food/plants to rear insects compared to cows.</li>
  <li>people who don't eat milk and meat products can try out insects as protein substitute.</li>
</ul>

Refresh and view the result on the browser.

Step 7: Add images

Remember the URL’s or the images you saved. Now is the time to unleash them.

We are going to use the HTML’s img tag <img src="URL" alt="Shown when image cannot load"> to add your images on the webpage.

If you just copied the images’ URL, you will add the URL inside the quotes of src attribute. Remember to add alt attribute that shows when the image cannot be displayed. Example:

<img src="https://avicndugu.github.io/practice-projects-html/cricket-eating/final/img/fried-crickets.jpg" alt="Fried crickets on display">

Step 8: Embed a youtube video

Search for relevant video on youtube. Once you have found it, click on share button/ link. You will get a popup. Click on embed option.

Click on the copy button to copy the code that is displayed.

Paste your code on your webpage where you want the video to be displayed. For my case this is the code that i got:

<iframe width="560" height="315" src="https://www.youtube.com/embed/BwC4WRKi5QY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

View the html page on a browser.

If you have completed all the 8 steps, you should have a working HTML page that you should be proud of.

Step 9: Add a link to your source of information

If you copied some content from another web page, it is concidered appropriate to add a URL pointing to the original source of information.

You can add a link using <a href="URL">Words explaining what you will find if you click on the link</a> HTML tag.

<a href="https://avicndugu.github.io/practice-projects-html/cricket-eating/final/">HTML and CSS Cricket Project</a>

View the html page on a browser. You should now have a link at the bottom with the words: “HTML and CSS Cricket Project”.

Additional Tips

Test your links to make sure they are working. You can test your link by clicking on them to see if they take you to the right page.
Optional: Publish the web page online. Once you are ready, you can share your works online. You can use github or on codepen to publish your webpage online.
Optional: Add some CSS to make the webpage look great. Once you compete working on the HTML, you can proceed to style the webpage using CSS. Here are some of the things you can do to make the webpage great:
Adjust the font-size and font type of the text.
Adjust the size of the images. If you downloaded your images, we are going to put them in one folder. It is common practice to place all images to be used on one folder. So, lets create an folder called img. Add all your downloaded images here.