FreeFlowChart

It's a simple component for drawing flow charts. Still got bugs to fix and function to add.

Usage:

You can simply import this component by including the FreeFlowChart.min.js file, without other dependencies.

<script src="FreeFlowChart.min.js"></script>

Check directory example for more infomation. And a example of usage is shown as below:

let flowChart = FreeFlowChart({ el: '#draw-main', toolbar: { el: '#draw-tools' } })

Options:

You can custom your freeflowchart by change the setting. The options is shown as below:

option	usage	values	default	isNecessary
el	the div of component	div element	none	true
shapes	enabled shapes	'process','decision','terminator','storedData'	all	false
toolbar	toolbar information	el, tools	none	false

toolbar option	usage	values	default	isNecessary
el	the div of toolbar	div element	none	true
tools	enabled tools	'undo', 'redo', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'fontColor', 'fillStyle', 'strokeStyle', 'lineWidth', 'lineDash', 'linkerType', 'arrowType'	all	false

Interfaces:

function	usage	input	output
FreeFlowChart	Create the instance of freeflowchart or return the created instance.	options / none	instance
generateImage	generate a image of current shapes and lines.	none	image object
clear	clear canvas.	none	none
getModel	get the data model of canvas.	none	json
addModel	add the model info the current canvas.	model	none
setModel	reset the canvas.	model	none

Important:

Because this module use singleton pattern to create component. Each page can only have one freeflowchart.