编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

将JavaScript代码转换为漂亮的SVG流程图——js2flowchart

wxchong 2024-10-25 17:54:20 开源技术 11 ℃ 0 评论

引言

js2flowchart 是一个可视化库，可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。这样一个强大的神器，真的值得你拥有，看下面截图就知道了，有没有很强大。

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

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插件，可以用来做很多事情，不管是自己写代码。还是阅读别人的代码，都无疑是一大助力，能够帮助我们提升我们的代码能力，更容易的阅读代码，这样学习起来就快了，希望对你有所帮助！如果有什么好的建议，也可以到评论区分享！

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2