js2flowchart 是一个可视化库,可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。这样一个强大的神器,真的值得你拥有,看下面截图就知道了,有没有很强大。
yarn add js2flowchart
index.html
index.js
我们直接在文本域中输入自己的代码,如下,左边会直接生成流程图,这只是一个简单的示例:
js2flowchart获取您的JS代码并返回SVG流程图,适用于客户端/服务器,支持ES6。
主要特点:
用例场景:
以上所有功能可以直接到github上详细了解,用法太多,这里就不在介绍了!
这么强大的东西,有人肯定说如果在开发的时候实时看到流程图有助于理解代码,官网提供了插件(我在最新版中测试失效了,不知道是否是我使用的有问题还是插件本身的问题),如果感兴趣的可以到扩展商店搜索code-flowchart。如果测试成功,欢迎到评论区分享。以下是我vscode版本和官网的插件使用截图。
如果利用好这个插件,可以开发出Chrome插件,以及其他JavaScript编辑器或者IDEA的插件,由于官方github已经几个月没更新了,所以还不知道未来会不会支持