html图片切换代码将JavaScript代码转换为英俊的SVG流程图js2flowchart

Github

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

安装利用安装

yarn add js2flowchart利用

index.html

<!DOCTYPE html><html lang=\公众en\"大众><head> <meta charset=\"大众UTF-8\"大众> <meta name=\"大众viewport\"大众 content=\"大众width=device-width, initial-scale=1.0\"大众> <meta http-equiv=\公众X-UA-Compatible\公众 content=\公众ie=edge\"大众> <title>fly测试</title></head><body> <div style=\"大众width:50%;float:left\"大众> <p id=\公众svgImage\公众></p> </div> <div style=\"大众width:50%;float:left\公众> <textarea name=\公众\"大众 id=\公众jsContent\公众 style=\"大众width: 90%;height:900px\公众 oninput=\公众createSVG()\"大众> </textarea> </div> <script src=\"大众./node_modules/js2flowchart/dist/js2flowchart.js\"大众></script> <script src=\公众./index.js\"大众></script></body></html>

index.js

html图片切换代码将JavaScript代码转换为英俊的SVG流程图js2flowchart Ruby

createSVG = () => { document.getElementById(\公众svgImage\"大众).innerHTML = null; let code = document.getElementById(\"大众jsContent\"大众).value; 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;};createSVG();

我们直接在文本域中输入自己的代码，如下，左边会直接天生流程图，这只是一个大略的示例：

js2flowchart的特性以及适用场景（来自官网翻译）

js2flowchart获取您的JS代码并返回SVG流程图，适用于客户端/做事器，支持ES6。

紧张特点：

定义抽象级别以仅渲染导入/导出，类/函数名称，函数依赖性以逐步学习/阐明代码。
自定义抽象级别支持创建自己的抽象级别表示天生器，以天生不同抽象级别的SVG列表定义流树修正器以映射众所周知的API，例如[] .map，[]。
forEach，[] .filter到方案上的循环构造等。
销毁润色符，用于在方案上用一个形状更换代码块自定义流树修正器支持创建自己的流修正器流树忽略过滤器完备省略一些代码节点，如日志行聚焦节点或全体代码逻辑分支突出显示方案的主要部分模糊节点或全体代码逻辑分支以隐蔽不太主要的东西定义的样式主题支持选择您喜好的样式自定义主题支持创建自己的主题，更好地适宜您的高下文颜色自定义颜色和样式支持供应方便的API来变动特定样式而无需样板

用例场景：

通过流程图阐明/记录您的代码通过视觉理解学习其他代码为有效JS语法大略描述的任何进程创建流程图

以上所有功能可以直接到github上详细理解，用法太多，这里就不在先容了！

vscode扩展

这么强大的东西，有人肯定说如果在开拓的时候实时看到流程图有助于理解代码，官网供应了插件（我在最新版中测试失落效了，不知道是否是我利用的有问题还是插件本身的问题），如果感兴趣的可以到扩展商店搜索code-flowchart。
如果测试成功，欢迎到评论区分享。
以下是我vscode版本和官网的插件利用截图。

如果利用好这个插件，可以开拓出Chrome插件，以及其他JavaScript编辑器或者IDEA的插件，由于官方github已经几个月没更新了，以是还不知道未来会不会支持！

总结

js2flowchart是一个比较实用的Javascript插件，可以用来做很多事情，不管是自己写代码。
还是阅读别人的代码，都无疑是一大助力，能够帮助我们提升我们的代码能力，更随意马虎的阅读代码，这样学习起来就快了，希望对你有所帮助！
如果有什么好的建议，也可以到评论区分享！