Flowgorithm is an excellent software for drawing flowcharts. To save the data, it use an XML format stored in files with the .fprg extension.
FlowgorithmJS is a third-party tool written in Javascript that can read and display the .fprg files on a web page using SVG format.
All elements supported by FlowgorithmJS (version 0.16) and their design:
(Image generated by the following file: fprg/_elements.fprg )
<script src="lib/jquery-3.5.0.min.js"></script>
<script src="flowgorithm.js"></script>drawFlowchartFromSource(xmlString,tagId,options);or
drawFlowchartFromUrl(fprgUrl,tagId,options);<?xml version="1.0"?>
<flowgorithm fileversion="2.11">
<attributes>
<attribute name="name" value="Next number"/>
<attribute name="authors" value="Andrea Vallorani"/>
<attribute name="about" value="Print the next of a given number"/>
<attribute name="saved" value="2018-01-23 06:36:28 PM"/>
<attribute name="created" value="YW5kcmVhO3VidW50dTsyMDE4LTAxLTIzOzA1OjMxOjMxIFBNOzI1Njg="/>
<attribute name="edited" value="YW5kcmVhO3VidW50dTsyMDE4LTAxLTIzOzA2OjM2OjI4IFBNOzQ7MjY5MQ=="/>
</attributes>
<function name="Main" type="None" variable="">
<parameters/>
<body>
<declare name="N, NEXT" type="Integer" array="False" size=""/>
<input variable="N"/>
<assign variable="NEXT" expression="N+1"/>
<output expression="NEXT"/>
</body>
</function>
</flowgorithm><!DOCTYPE html>
<html>
<head>
<script src="lib/jquery-3.5.0.min.js"></script>
<script src="flowgorithm.js"></script>
<script>
$(function(){
drawFlowchartFromUrl('http://domain/file.fprg','#f');
});
</script>
</head>
<body>
<div id="f"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="lib/jquery-3.5.0.min.js"></script>
<script src="flowgorithm.js"></script>
<script>
var xml = `<?xml version="1.0"?>
<flowgorithm fileversion="2.6">
<attributes>
<attribute name="name" value="Next number"/>
<attribute name="authors" value="Andrea Vallorani"/>
<attribute name="about" value="Print the next of a given number"/>
</attributes>
<function name="Main" type="None" variable="">
<parameters/>
<body>
<declare name="N, NEXT" type="Integer" array="False" size=""/>
<input variable="N"/>
<assign variable="NEXT" expression="N+1"/>
<output expression="NEXT"/>
</body>
</function>
</flowgorithm>`;
$(function(){
drawFlowchartFromSource(xml,'#f');
});
</script>
</head>
<body>
<div id="f"></div>
</body>
</html>- View file from local computer: https://andreaval.github.io/FlowgorithmJS/drawLocal.html
- View file from online folder: https://andreaval.github.io/FlowgorithmJS/drawWeb.html