View on GitHub

FlowgorithmJS

*.fprg file viewer for the Web

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

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

Using

drawFlowchartFromSource(xmlString,tagId,options);

or

drawFlowchartFromUrl(fprgUrl,tagId,options);

Example 1

http://domain/file.fprg

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

http://domain/home.html

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

Example 2

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

Demo