Author: | Bogdan-Lyashenko |
---|---|
Views Total: | 1,851 views |
Official Page: | Go to website |
Last Update: | February 22, 2022 |
License: | MIT |
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