js2flowchart.js小白知识_将任何 JavaScript 转换成漂亮的 SVG 流程图的可视化的图表库

js2flowchart.js小白知识

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

js2flowchart.js小白知识_将任何 JavaScript 转换成漂亮的 SVG 流程图的可视化的图表库

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

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;

最后的运行效果如下:

海计划公众号
(0)
上一篇 2020/03/06 09:13
下一篇 2020/03/06 09:13

您可能感兴趣的内容

  • octotree使用帮助_一款可在线浏览github项目代码的插件

    octotree使用帮助 官方网址:https://www.octotree.io/ GitHub:https://github.com/ovity/octotree 简介描述:一…

    2020/03/06
  • 不同浏览器的内核小白攻略_浏览器基础教程

    什么是浏览器内核?网页上所用到的语言有:html, css, JavaScript等,其中,前两者通常决定了该页面长什么样,它们是可以说都是约定的规范。不同的浏览器在获取到某页面的代码文件后,负责根据这套规范将代码渲染出来呈现给用户,浏览器内核所做的就是这个渲染工作。因此,浏览器内核,也被称为排版引擎(layout engine)、渲染引擎(renderin

    2020/03/26
  • wysihtml5零基础入门_基于 HTML5 的开源富文本编辑器

    wysihtml5零基础入门 官方网址:http://xing.github.com/wysihtml5/ GitHub:https://github.com/tiff/wysih…

    2020/03/06
  • 怎么学JavaScript?入门教程_学习入门教程

    正题开始,前端怎么学,应该因人而异,别人的方法未必适合自己。就说说我的学习方法吧。我把大部分时间放在学习js上了。因为这个js的学习曲线,先平后陡。项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题。我是怎么学的呢,看书,分析源码。 第一个问题是,看书有啥好处?好处应该是不言而明的,书看多了,基础会逐渐夯实起来。看多了,自己的判断力,自然就上来了

    2020/03/30
  • vue项目中的菜单权限控制小白基础_菜单入门教程

    在pc 管理系统这种类型的产品,通常会涉及到账号权限的控制,不同的账号权限能浏览的功能模块是不同的,对应侧边栏菜单模块的显示也会不同。场景一、(电商类管理系统)登录登录后,依次获取账号 tokenId、店铺列表、默认店铺ID、菜单列表通过菜单列表生成侧边栏,注意router 文件里面定义了全部的页面路由,所以配置新菜单时候需要提供给后端前端定义的页面路径me

    2020/03/29
  • JSON.parse 比 Object 字面量语法更快菜鸟教程下载_json小白帮助

    针对太长不看的读者因为 JSON 语法比 Javascript 的语法更简单,因此解析 JSON 比解析 Javascript 更高效。当一个 web app 需要加载在首次加载时,解析一个非常复杂的、大型的、符合 JSON 规范的对象字面量配置对象时(比如配置 redux 的 store),我们可以根据这一点来提升首屏加载性能。为什么 JSON.parse

    2020/03/22
  • js中的attributes和Attribute的用法和区别基础指南_区别使用教程

    一:Attribute的几种用法和含义getAttribute:获取某一个属性的值;setAttribute:建立一个属性,并同时给属性捆绑一个值;createAttribute:仅建立一个属性;removeAttribute:删除一个属性;getAttributeNode:获取一个节点作为对象;setAttributeNode:建立一个节点;removeA

    2020/03/26
  • Calltoidea小白教程_收集优秀UI组件元素设计的站点

    Calltoidea小白教程 官方网址:https://www.calltoidea.com/ 简介描述:收集优秀UI组件元素设计的站点 Calltoidea是一个针对网页设计师而…

    2020/03/10
  • Docker常用指令攻略教程_指令菜鸟攻略

    主要总结一些docker常用指令,方便大家查询使用1. 运行主机docker run
    一般运行主机时会-it组合使用,用以建立一个可在终端交互的容器,比如:docker run -it –name local_nginx nginx:latest /bin/bash2. 列出正在运行的主机docker ps3. 切换到指定的主机上docker attac

    2020/03/24
  • Js深浅拷贝原理指南教程_原理基础指南

    如果拷贝的值是基本数据类型,拷贝的是基本类型的值。如果是引用类型拷贝的是内存地址。浅拷贝只解决了第一层的问题,拷贝第一层的基本类型值,以及第一层的引用类型地址。也就是说:只能保证第一层数据为基本数据类型时,不会随原数据改变。原数据中包含子对象时,随原数据变化。1.1 浅拷贝的使用场景1. Object.assign()该方法用于将所有可枚举属性的值从一个或多

    2020/03/24
  • 为什么要初始化css样式?使用指南_样式新手入门

    为什么要初始化css样式1.浏览器差异不同浏览器对有些标签的默认值是不同的,如果没对css初始化会出现浏览器之间的页面显示差异2.提高编码质量如果不初始化,整个页面做完会很糟糕,重复的css样式很多最简单的初始化方法是:(不建议)* {padding: 0; margin: 0;}淘宝样式 样式初始化body, h1, h2, h3, h4, h5, h6,

    2020/03/29
  • 微信内打开外部默认浏览器下载app基础入门_微信入门指南

    使用微信打开网址时,对于安卓端而言无法打开常用下载软件,手机APP等。大家常用的方法是,弹出一个遮罩提示用户在新的浏览器窗口打开。 但是我们基于微信接口开发了一款全新的手机端微信中推广助手,用户在微信中点击的话,可以实现微信中点击链接直接跳转手机默认浏览器打开指定链接 。在很久之前发布过一篇文章,讲解了微信跳转外部浏览器打开的代码实现,地址:http:/

    2020/03/26
  • Jest指南攻略Facebook开发的一个对javascript进行单元测试的工具

    Jest基础入门 官方网址:https://facebook.github.io/jest/ GitHub:https://github.com/facebook/jest 简介描…

    2020/03/05
  • js事件冒泡和默认事件处理(原生js、vue)菜鸟指南_事件教程视频

    一、默认事件何为默认事件?比如 a 会跳转页面,submit 会提交表单等。1. 普通js方法e.preventDefault()函数。百度
    function stopDef(e){e.preventDefault();
    }2. Vue.j

    2020/04/03
  • Taro开发多端应用新手入门_Taro小白常识

    官方解释: 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。
    使用前
    第一次看到Taro是在github搜索React插件时看到(个人习惯,有时候会去搜索一个语言的插件在GitHub再按照Star排名,看看各个插件功能,

    2020/03/30
  • 链式调用和argument攻略教程_argument使用攻略

    面试题目(头条):设计一个sum函数,使其满足以下要求sum(1, 2).sumOf() // 返回 3sum(1, 2)(3).sumOf() // 返回 6sum(1)(2, 3, 4).sumOf() // 返回 10sum(1, 2)(3, 4)(5).sumOf() // 返回 15答案解析:这道题目主要考察以下两点:函数参数 arguments

    2020/03/24