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 )
<scriptsrc="lib/jquery-3.5.0.min.js"></script><scriptsrc="flowgorithm.js"></script>drawFlowchartFromSource(xmlString,tagId,options);or
drawFlowchartFromUrl(fprgUrl,tagId,options);<?xml version="1.0"?>
<flowgorithmfileversion="2.11">
<attributes>
<attributename="name"value="Next number"/>
<attributename="authors"value="Andrea Vallorani"/>
<attributename="about"value="Print the next of a given number"/>
<attributename="saved"value="2018-01-23 06:36:28 PM"/>
<attributename="created"value="YW5kcmVhO3VidW50dTsyMDE4LTAxLTIzOzA1OjMxOjMxIFBNOzI1Njg="/>
<attributename="edited"value="YW5kcmVhO3VidW50dTsyMDE4LTAxLTIzOzA2OjM2OjI4IFBNOzQ7MjY5MQ=="/>
</attributes>
<functionname="Main"type="None"variable="">
<parameters/>
<body>
<declarename="N, NEXT"type="Integer"array="False"size=""/>
<inputvariable="N"/>
<assignvariable="NEXT"expression="N+1"/>
<outputexpression="NEXT"/>
</body>
</function>
</flowgorithm><!DOCTYPE html><html><head><scriptsrc="lib/jquery-3.5.0.min.js"></script><scriptsrc="flowgorithm.js"></script><script>$(function(){drawFlowchartFromUrl('http://domain/file.fprg','#f');});</script></head><body><divid="f"></div></body></html><!DOCTYPE html><html><head><scriptsrc="lib/jquery-3.5.0.min.js"></script><scriptsrc="flowgorithm.js"></script><script>varxml=`<?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><divid="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