Skip to content

Latest commit

 

History

History
111 lines (100 loc) · 3.14 KB

README.md

File metadata and controls

111 lines (100 loc) · 3.14 KB

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