Fields

HTML fields

To display information inside node just add text property to the nodes data

 
       Copy 
var chart = new FlowChart('#chart');
chart.load({
   nodes: [
      { id: 1, templateId: 'process', x: 400, y: 150, text: "This is my text" }
   ]
});
     

Edit in BALKAN Code

If you want to display more data override html method of the template, here is an example

 
       Copy 

FlowChart.shapeTemplates.process.html = function(node){
      return `<div style="padding: 10px;">
    <h1 data-field="title"> ${ node.title }</h1>                       
    <div data-field="text"> ${ node.text }</div>                    
            </div>`;
}

var chart = new FlowChart('#chart');
chart.load({
   nodes: [
      { id: 1, templateId: 'process', x: 400, y: 150, text: "This is my text", title: 'My Title' }
   ]
});
     

Edit in BALKAN Code

To edit the node just double click on the field and start typing, with Tab key you can move the cursor to the next field.

Note that data-field="title" attribute from the html function specifies the field name that will be updated.

SVG fields

To add SVG field edit svg function

 
       Copy 
FlowChart.shapeTemplates.process.svg = function(node){
    var svg = `<text x="${node.width / 2}" y="${node.height / 2}" text-anchor="middle" fill="#fff">${node.mySvgField}</text> `
    return FlowChart.shapeTemplates.base.svg(node) + svg;
}

FlowChart.shapeTemplates.process.html = function(node){
    return ''
}

var chart = new FlowChart(document.getElementById("chart"));

chart.load({
        nodes: [
            { id: 1, templateId: 'process', x: 0, y: 0, text: 'HTML field', mySvgField: 'SVG field'},
        ]
    }
);
 

Edit in BALKAN Code