js2flowchart.js

js2flowchart.js 介绍

js2flowchart.js一个可以将任何 JavaScript 转换成漂亮的 SVG 流程图的可视化的图表库。可以用来学习别人的代码，设计、重构以及解释自己的代码 。

主要特点：

定义的抽象级别仅呈现导入/导出，类/函数名称，函数依赖关系来逐步学习/解释代码。

自定义抽象层次支持创建你自己的

演示生成器生成SVG列表以便获取不同的抽象级别

定义流程树修饰符来映射众所周知的API，比如ie [] .map，[] .forEach，[] .filter到Loop结构等等。

销毁修饰符来替换方案中的一个形状的代码块

自定义流程树修饰符支持创建您自己的一个

流树忽略过滤器完全省略一些代码节点，即日志行

重点节点或整个代码逻辑分支来突出重点部分的方案

模糊节点或整个代码逻辑分支来隐藏不太重要的东西

定义的样式主题支持选择一个你喜欢的

自定义主题支持创建自己的一个更适合您的上下文颜色

自定义颜色和样式支持提供方便的API来更改特定的样式，而无需样板

安装

js2flowchart是一个从JavaScript代码生成漂亮的SVG流程图的工具。下面我们使用npm来进行安装它。

yarn add js2flowchart

基本用法

首先我们来实现一个简单的demo。HTML代码如下：

<div> <p id="svgImage"></p> </div> <!-- web前端中文站：www.lisa33xiaoq.net -->

剩下的就是最主要的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; };

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;

最后的运行效果如下：

GitHub:https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

网站描述:将任何 JavaScript 转换成漂亮的 SVG 流程图的可视化的图表库

js2flowchart.js

官方网站：