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