Show / Hide Table of Contents

Nodes

Create node

Nodes can be created in two ways, using the load method or chart.nodes.add

Here is how to add node using load 
 
    
chart.load({
    nodes: [{ 
        id: 1, 
        templateId: 'process', 
        x: 400, 
        y: 150 }]
});
Here is how to add node using chart.nodes.add 
 
    
chart.nodes.add({
        id: 1, 
        templateId: 'process', 
        x: 400, 
        y: 150
});

When you create a node with chart.nodes.add onChanged event listener will be called. Mandatory fields are id, templateId, x and y, you also can add one of the Node's properties.

To diaply a text inside node you can set the default text property or add your own property for example thisIsMyNodeContent and change the html template method of the template: 

 
    
let chart = new FlowChart('#chart');
FlowChart.shapeTemplates.process.html = function(node){
    return `<div data-shape-thisIsMyNodeContent="text">${node.thisIsMyNodeContent}</div>`;
}
chart.load({
        nodes: [{ 
            id: 1, 
            templateId: 'process', 
            x: 400, 
            y: 150, 
            thisIsMyNodeContent: "Lorem ipsum"
        }]
    }
);
BALKAN Code Edit in BALKAN Code

To learn more on how to display data inside nodes see Fields help article.

Update node

You can change node properties from the UI, dlouble ckick on the field and start typing or programatically.

Here is how to change node content programmatically 
 
    
var node = chart.nodes.get(1);
node.text = 'new text';
BALKAN Code Edit in BALKAN Code

Here you can see all node methods and properties.

Node size

As you can see from the demo in "Update node" section, when the content of the node changes the size of the node changes as well, this is because the preocess template has dynamic size, width and height properties are set to 'fit'. 

 
    
FlowChart.shapeTemplates.process.width = 'fit';
FlowChart.shapeTemplates.process.height = 'fit';

If you want all nodes with template process to be with fixed size you can change the process template: 

 
    
FlowChart.shapeTemplates.process.width = 200;
FlowChart.shapeTemplates.process.height = 120;
BALKAN Code Edit in BALKAN Code

In case you want the size to be fixed only for specific node, you can set the width and height explicitly for that node

 
    
var node = chart.nodes.get(1);
node.width = 200;
node.height = 120;

Or using the load method

 
    
chart.load({
        nodes: [{ 
            id: 1, 
            templateId: 'process', 
            x: 400, 
            y: 150, 
            width: 200,
            height: 120
        }]
    }
);

Here is an example with two nodes, the secomd node is with fixed width and height

BALKAN Code Edit in BALKAN Code

Node colors

Here is how to change the node color from the template

 

FlowChart.shapeTemplates.document.fill = '#F57C00';

Here is how to change the link color from link data

 

chart.load({
    nodes: [
        { id: 3, x: 900, y: 150, fill: '#FFCA28' },
    ]
});

Here is how to change the link color programmatically

 

var node = chart.nodes.get(1);
node.fill = 'red';
BALKAN Code Edit in BALKAN Code

Node shape

To change the shape override svg method of the template. Here is an example how to create rectangle shape with lines and users icon

 
    
FlowChart.shapeTemplates.process.svg = function(shape){
    return `<line x1="0" y1="0" x2="${shape.width}" y2="0" style="stroke:${shape.stroke}; stroke-width:${shape.strokeWidth};"></line>
    <line x1="0" y1="${shape.height}" x2="${shape.width}" y2="${shape.height}" style="stroke:${shape.stroke}; stroke-width:${shape.strokeWidth};"></line>
    <line x1="${shape.strokeWidth / 2}" y1="${shape.strokeWidth * 4}" x2="${shape.strokeWidth / 2}" y2="${shape.height}" style="stroke:${shape.stroke}; stroke-width:${shape.strokeWidth};"></line>
    <line x1="${shape.width - shape.strokeWidth / 2}" y1="0" x2="${shape.width - shape.strokeWidth / 2}" y2="${shape.height - shape.strokeWidth * 4}" style="stroke:${shape.stroke}; stroke-width:${shape.strokeWidth};"></line>
    `;
}
BALKAN Code Edit in BALKAN Code

Custom node template

If the shape you are looking for is not listed above you can create your own shape. For example lets create Subroutine shape, Subroutine indicates a sequence of actions that perform a specific task embedded within a larger process.

Because Subroutine looks very similar to the process shape you can extend the process shape and add two lines on each side. 

 


FlowChart.shapeTemplates.mySubroutine = class extends FlowChart.shapeTemplates.process{};
FlowChart.shapeTemplates.mySubroutine.displayName = 'My Subroutine';    
FlowChart.shapeTemplates.mySubroutine.displayInShapeBar = false;
FlowChart.shapeTemplates.mySubroutine.displayInPortShapeBar = false;
FlowChart.shapeTemplates.mySubroutine.svg = function(shape){      
        var intent = shape.width / 10;
        return `<rect rx="7" ry="7" x="0" y="0" width="${shape.width}" height="${shape.height}" style="stroke:${shape.stroke}; fill:${shape.fill}; stroke-width:${shape.strokeWidth};"></rect>
    <line x1="${intent}" y1="0" x2="${intent}" y2="${shape.height}" style="stroke:${shape.stroke}; stroke-width:${shape.strokeWidth};"></line>
    <line x1="${shape.width - intent}" y1="0" x2="${shape.width - intent}" y2="${shape.height}" style="stroke:${shape.stroke}; stroke-width:${shape.strokeWidth};"></line>`;
}
BALKAN Code Edit in BALKAN Code

In this article