This is a shot tutorial for developing Flowchart Maker using Org Chatr JS.
This is step by step tutorial on how to develop Flowchart Maker using Org Chart JS.
Step 1 - Installation
If you are already familiar with BALKAN OrgChartJS you can skip this step. There are two installation options: standalone or using npm
standalone installation
See our getting started page
npm installation
npm i @balkangraph/orgchart.js
Step 2 - Create BALKAN OrgChartJS instance
var chart = new OrgChart(document.getElementById("tree"), {
align: OrgChart.align.orientation, // use this option to start from the top
nodeBinding: {
field_0: "name" // bind the node text
},
});
chart.load([{"id":1,"name":"start","tags":["start"]}]) // load the start of the chart
Step 3 - Add your templates for the flowchart elements
OrgChart.templates.start = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.start.defs = '<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path fill="#7e7e7e" d="M 0 0 L 10 5 L 0 10 z" /></marker>';
OrgChart.templates.start.size = [200, 70];
OrgChart.templates.start.node = '<rect x="0" y="0" height="{h}" width="{w}" fill="#415a5f" rx="40" ry="40"></rect>';
OrgChart.templates.start.field_0 = '<text data-width="200" style="font-size: 20px;" fill="#ffffff" x="100" y="40" text-anchor="middle">{val}</text>';
OrgChart.templates.start.link = '<path marker-start="url(#dotBlue)" marker-end="url(#arrow)" stroke-linejoin="round" stroke="#7e7e7e" stroke-width="3px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} L{xd},{yd}" />';
OrgChart.templates.start.link_field_0 = '<text text-anchor="middle" fill="#7e7e7e" data-width="290" x="0" y="-20" style="font-size:24px;">{val}</text>';
OrgChart.templates.start.plus = "";
OrgChart.templates.start.minus = "";
OrgChart.templates.end = Object.assign({}, OrgChart.templates.start);
OrgChart.templates.process = Object.assign({}, OrgChart.templates.start);
OrgChart.templates.process.size = [200, 80];
OrgChart.templates.process.node = '<rect x="0" y="0" height="{h}" width="{w}" fill="#ce6664"></rect>';
OrgChart.templates.process.field_0 = '<text data-width="200" style="font-size: 20px;" fill="#ffffff" x="100" y="45" text-anchor="middle">{val}</text>';
OrgChart.templates.input = Object.assign({}, OrgChart.templates.process);
OrgChart.templates.input.size = [200, 80];
OrgChart.templates.input.node = '<svg width="200" height="80"><rect width="165" height="80" x="35" y="0" fill="#f1b57a" transform="skewX(-25)" /></svg>'
OrgChart.templates.decision = Object.assign({}, OrgChart.templates.process);
OrgChart.templates.decision.size = [200, 100];
OrgChart.templates.decision.node = '<path d="M 100,0 L 0,50 L 100,100 L 200,50 L 100,0 Z" fill="#96d1ab" stroke="#96d1ab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0 0"/>'
OrgChart.templates.decision.field_0 = '<text data-width="200" style="font-size: 20px;" fill="#ffffff" x="100" y="55" text-anchor="middle">{val}</text>';
Step 4 - Add the tags in the configuration for these templates
var chart = new OrgChart(document.getElementById("tree"), {
...
tags: {
start: {
template: "start"
},
end: {
template: "end"
},
process: {
template: "process"
},
input: {
template: "input"
},
decision: {
template: "decision"
}
}
...
Step 5 - Add link field for yes/no after a desicion
linkBinding: {
link_field_0: "bool"
},
Step 6 - Add in the HTML the sidebar elements that you will drag and drop to the chart
<div id="items">
<div data-name="end" class="item" width="50" height="50">
<svg width="120" height="60">
<rect class="element" width="110" x="5" y="5" height="50" rx="30" ry="30" />
</svg>
</div>
<div data-name="input/output" class="item" width="50" height="50">
<svg width="120" height="70">
<rect class="element" width="80" height="60" x="40" y="5" transform="skewX(-30)" />
</svg>
</div>
<div data-name="process" class="item" width="50" height="50">
<svg width="120" height="70">
<rect class="element" width="100" height="60" x="5" y="5" />
</svg>
</div>
<div data-name="decision" class="item" width="50" height="50">
<svg width="120" height="70">
<path class="element" d="M 50,0 L 0,25 L 50,50 L 100,25 L 50,0 Z" stroke-linecap="round"
stroke-linejoin="round" stroke-dasharray="0 0" />
</svg>
</div>
</div>
Step 7 - Add the CSS for these elements
#items {
width: 20%;
height: 100%;
padding-top: 100px;
}
.item {
margin: auto;
margin-bottom: 20px;
text-align: center;
width: 150px;
user-select: none;
}
.element {
fill: #f2f2f2;
stroke: #F57C00;
stroke-width: 2;
}
Step 8 - Make these elements draggable
var items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.draggable = true;
item.ondragstart = function (ev) {
ev.dataTransfer.setData("name", ev.target.getAttribute('data-name'));
}
};
Step 9 - Use "redraw" event to create the logic for adding the elements to the flowchart
// add these variables that you will use in the "redraw" event:
var currentNode = '';
var clientXY = [0, 0];
var initialized = false;
var chart = new OrgChart(document.getElementById("tree"), {
...
chart.on('redraw', function () {
var nodeElements = document.querySelectorAll('[data-n-id]');
for (var i = 0; i < nodeElements.length; i++) {
var nodeElement = nodeElements[i];
nodeElement.ondrop = function (ev) {
ev.preventDefault();
clientXY = [ev.clientX, ev.clientY];
var name = ev.dataTransfer.getData("name");
var item = document.querySelector('[data-name="' + name + '"]');
var id = OrgChart.randomId();
var nodeElement = ev.target;
var tags = [];
switch (name) {
case "end": tags = ["end"];
break;
case "input/output": tags = ["input"];
break;
case "process": tags = ["process"];
break;
case "decision": tags = ["decision"]
}
while (!nodeElement.hasAttribute('data-n-id')) {
nodeElement = nodeElement.parentNode;
}
var pid = nodeElement.getAttribute('data-n-id');
var bool = null;
if (chart.get(pid).name == "decision") bool = "yes";
chart.addNode({
id: id,
pid: pid,
name: name,
tags: tags,
bool: bool
}, null, true);
}
nodeElement.ondragover = function (ev) {
ev.preventDefault();
}
}
});
That's it. Now you can use your flowchart creator. Feel free to comment or ask questions.
Edit in Code