Flowchart to Image

Get flowchart as an image.

by FakeHeal

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://sebastien.drouyer.com/jquery.flowchart-demo/jquery.panzoom/dist/jquery.panzoom.min.js"></script>
<script src="https://sebastien.drouyer.com/jquery.flowchart-demo/jquery-mousewheel/jquery.mousewheel.min.js"></script>
<script src="https://sebastien.drouyer.com/jquery.flowchart-demo/jquery.flowchart/jquery.flowchart.js"></script>
<link rel="stylesheet" href="https://sebastien.drouyer.com/jquery.flowchart-demo/jquery.flowchart/jquery.flowchart.min.css">
<script src="https://rawgit.com/tsayen/dom-to-image/master/dist/dom-to-image.min.js"></script>
<link rel="stylesheet" href="https://sebastien.drouyer.com/jquery.flowchart-demo/stylesheets/custom.css">
<h4>Basic operator</h4>
<div class="flowchart-example-container" id="example_1"></div>

<button>Create SVG</button>

JavaScript

$(document).ready(function() {
  $('button').click(function() {
    domtoimage.toSvg($("#example_1").get(0))
      .then(function(dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
        console.log(dataUrl)
      })
      .catch(function(error) {
        console.error('oops, something went wrong!', error);
      });
  });
  var data = {
    operators: {
      operator: {
        top: 20,
        left: 20,
        properties: {
          title: 'Operator',
          inputs: {
            input_1: {
              label: 'Input 1',
            },
            input_2: {
              label: 'Input 2',
            }
          },
          outputs: {
            output_1: {
              label: 'Output 1',
            },
            output_2: {
              label: 'Output 2',
            },
            output_3: {
              label: 'Output 3',
            }
          }
        }
      }
    }
  };

  // Apply the plugin on a standard, empty div...
  $('#example_1').flowchart({
    data: data
  });
});