SVG based JS código Flowchart generator-js2flowchart

Vista prévia

Descripción

js2flowchart es una biblioteca de JavaScript pura utilizada para renderizar dinámicamente diagramas de diagrama de flujo de código JS usando SVG.

Instalación

# Yarn
$ yarn add js2flowchart

# NPM
$ npm install js2flowchart --save

Funcionamiento

Inserte el archivo JavaScript js2flowchart. js en la página.

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

Cree un elemento contenedor en el que desee colocar el diagrama de flujo.

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

Prepare el código JavaScript.

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;

Personalice el tema predeterminado.

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'
});

Registro de cambios

10/10/2018

• v1.1.6