SVG Based JS Code Flowchart Generator – js2flowchart

Preview:

Description:

js2flowchart is a pure JavaScript library used to dynamically render JS code flowchart diagrams using SVG.

Installation:

# Yarn
$ yarn add js2flowchart
# NPM
$ npm install js2flowchart --save

How to use it:

Insert the JavaScript file js2flowchart.js into the page.

<script src="/dist/js2flowchart.js"></script>

Create a container element in which you want to place the flowchart.

<div id="svgImage"></div>

Prepare your JavaScript code.

const code = `
function indexSearch(list, element) {
  let currentIndex,
    currentElement,
    minIndex = 0,
    maxIndex = list.length - 1;
  while (minIndex <= maxIndex) {
    currentIndex = Math.floor(maxIndex + maxIndex) / 2;
    currentElement = list[currentIndex];
    if (currentElement === element) {
      return currentIndex;
    }
    if (currentElement < element) {
      minIndex = currentIndex + 1;
    }
    if (currentElement > element) {
      maxIndex = currentIndex - 1;
    }
  }
  return -1;
}`;

Visualize your JavaScript code as a flowchart.

const {createFlowTreeBuilder, createSVGRender} = js2flowchart;
const flowTreeBuilder = createFlowTreeBuilder(),
    svgRender = createSVGRender();
const flowTree = flowTreeBuilder.build(code),
    shapesTree = svgRender.buildShapesTree(flowTree);
const svg = shapesTree.print();
document.getElementById('svgImage').innerHTML = svg;

Customize the default theme.

svgRender.applyColorBasedTheme({
   strokeColor: '#555',
   defaultFillColor: '#fff',
   textColor: '#333',
   arrowFillColor: '#444',
   rectangleFillColor: '#bbdefb',
   rectangleDotFillColor: '#ede7f6',
   functionFillColor: '#c8e6c9',
   rootCircleFillColor: '#fff9c4',
   loopFillColor: '#d1c4e9',
   conditionFillColor: '#e1bee7',
   destructedNodeFillColor: '#ffecb3',
   classFillColor: '#b2dfdb',
   debuggerFillColor: '#ffcdd2',
   exportFillColor: '#b3e5fc',
   throwFillColor: '#ffccbc',
   tryFillColor: '#FFE082',
   objectFillColor: '#d1c4e9',
   callFillColor: '#dcedc8',
   debugModeFillColor: '#666'
});

Changelog:

02/22/2022

• v1.3.3