专栏首页IT大咖说将JavaScript代码转换为漂亮的SVG流程图——js2flowchart

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

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

Github

安装使用

  • 安装
yarn add js2flowchart
  • 使用

index.html

index.js

我们直接在文本域中输入自己的代码,如下,左边会直接生成流程图,这只是一个简单的示例:

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

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

主要特点:

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

用例场景:

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

以上所有功能可以直接到github上详细了解,用法太多,这里就不在介绍了!

vscode扩展

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

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

本文分享自微信公众号 - IT大咖说(itdakashuo),作者:最美分享Coder

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何写出优质干净的代码

    先列举出编写干净代码的一些好处,再提出6个技巧用于编写干净代码,供开发者进行参考学习。

    IT大咖说
  • 三年0故障是如何做到的?

    近段时间我的团队,其他团队一直在强调代码质量,减少故障。入职快三年半了,距离我上次故障也快三年半了,所以在这方面有些感触和大家分享一下,我从 个人经历 , 代码...

    IT大咖说
  • 为你揭秘全球最大软件公司的代码评审机制

    微软代码评审是一种被广泛采用的工程实践。成千上万的工程师认为这是一个伟大的最佳实践。大多数高绩效团队花费大量时间进行代码评审。

    IT大咖说
  • 如何写出漂亮的代码?

    疑惑一 程序员如何戒掉二指禅 这个问题一般是对初级人员才有的问题,老手都一练出来了。新手程序员如和戒掉二指禅?咋在学校的时候lol撸多了,哪去些什么代码。短时间...

    程序员互动联盟
  • 【云+社区年度征文】浅谈java企业应用开发代码规范

    很多时候我们项目迭代到后期,项目会变得很混乱,往往只有少数人能知道某段代码是干嘛的和该如何去改,或者是干脆谁都不知道,只能靠通过注释去猜测这段代码可能的作用。原...

    六个核弹
  • 毁掉你代码的35个不良习惯

    近日web开发专家Christian Maioli总结了导致程序猿效率低下,代码像意大利面条一样难以维护的35条恶习(归为代码组织、团队工作、写代码、测试与维护...

    华章科技
  • 写出整洁的代码,是每个程序员的追求

    《Clean Code》指出,要想写出好的代码,首先得知道什么是肮脏代码、什么是整洁代码;然后通过大量的刻意练习,才能真正写出整洁的代码。

    沉默王二
  • 什么是整洁的代码

    来源 | https://www.cnblogs.com/xybaby/p/11335829.html

    五分钟学算法
  • 如何写出让同事好维护的代码?

    写出整洁的代码,是每个程序员的追求。《clean code》指出,要想写出好的代码,首先得知道什么是肮脏代码、什么是整洁代码;然后通过大量的刻意练习,才能真正写...

    Java技术栈
  • 代码审查如何保证软件质量

    在软件行业,您可能经常会听到术语“代码审查”。但是,代码审查的概念经常被误解。人们通常认为它在软件开发生命周期中被忽视执行测试应足以满足验证过程。因此,他们倾向...

    FunTester

扫码关注云+社区

领取腾讯云代金券