Skip to content

README.md

Latest commit

History

History
111 lines (100 loc) · 3.14 KB

README.md

File metadata and controls

111 lines (100 loc) · 3.14 KB
Raw

FlowgorithmJS

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:

Elements 0.16

(Image generated by the following file: fprg/_elements.fprg )

Include library

<scriptsrc="lib/jquery-3.5.0.min.js"></script><scriptsrc="flowgorithm.js"></script>

Using

drawFlowchartFromSource(xmlString,tagId,options);

or

drawFlowchartFromUrl(fprgUrl,tagId,options);

Example 1

http://domain/file.fprg

<?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>

http://domain/home.html

<!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>

Example 2

<!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>

Demo