js2flowchart.js 教程

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

js2flowchart.js是一个可以将任何JavaScript代码转换成漂亮的SVG流程图的可视化库。该插件目前已开源到github，有超过1300多个star。本文介绍js2flowchart.js的相关教程。

js2flowchart能做什么？

js2flowchart以您的JS代码并返回SVG流程图，在客户端/服务器上运行，支持ES6。

主要特点：

• 定义的抽象级别仅呈现导入/导出，类/函数名称，函数依赖关系来逐步学习/解释代码。
• 自定义抽象层次支持创建你自己的
• 演示生成器生成SVG列表以便获取不同的抽象级别
• 定义流程树修饰符来映射众所周知的API，比如ie [] .map，[] .forEach，[] .filter到Loop结构等等。
• 销毁修饰符来替换方案中的一个形状的代码块
• 自定义流程树修饰符支持创建您自己的一个
• 流树忽略过滤器完全省略一些代码节点，即日志行
• 重点节点或整个代码逻辑分支来突出重点部分的方案
• 模糊节点或整个代码逻辑分支来隐藏不太重要的东西
• 定义的样式主题支持选择一个你喜欢的
• 自定义主题支持创建自己的一个更适合您的上下文颜色
• 自定义颜色和样式支持提供方便的API来更改特定的样式，而无需样板

安装

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

yarn add js2flowchart

基本用法

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

<div>
  <p id="svgImage"></p>
</div>
<!-- 业余草：www.xttblog.com -->

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

最后的运行效果如下：

另外js2flowchart还提供了很多常用的api，建议大家到它的官网进行深入的学习。

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » js2flowchart.js 教程