• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

js2flowchart.js 教程

JAVA web前端中文站 3年前 (2017-11-11) 6398次浏览 已收录 0个评论
文章目录[隐藏]

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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> <!-- 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;

最后的运行效果如下:

js2flowchart.js 教程

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

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:js2flowchart.js 教程
喜欢 (2)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址