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),sha pest ree = svgRender.buildSha pest ree(flowTree);
const svg = sha pest ree.print();
document.getElementById('svgImage').innerhtml = svg;
最后的运行 效果 如下：
GitHub: https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
网站描述: 将任何 JavaScript 转换成漂亮的 SVG 流程图的可视化的图表库
js2flowchart.js官方网站
官方网站：
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。