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

言

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

要整理你的页面重量，但是要保持所有的酷功能吗?继续阅读，看看一个开发人员如何摆脱SVG，并在它的位置使用CSS。

获得高级管理人员手册的重要趋势、技巧和战略，以竞争和赢得数字经济。

在这个假期过后，我们中的许多人都想减掉一点体重，那就是体重。在我的应用中，我广泛地使用SVG元素作为图像、徽标和图标。直到最近，我都直接在HTML中呈现SVG元素。这是最简单的方法。正如您可能通过我的intro语句所猜测的那样，我一直在通过从HTML中删除SVG元素来减少页面权重。它的效果如何?在进行更改之前，主页是14kb (77kb解压缩)。更改后，主页为6kb(未压缩的30kb)。这是每一页的“超过有线”字节的57%。我到底做了什么，我做了哪些权衡来获得一个更小的页面?让我们看看以前如何使用SVG。

这是原始的SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg fill="#fff" class="issue-icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="m8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm0 14c-3.309 0-6-2.692-6-6s2.691-6 6-6c3.307 0 6 2.692 6 6s-2.693 6-6 6z" clip-rule="evenodd" fill-rule="evenodd"/>
<path d="M8.5,3h-1C7.224,3,7,3.224,7,3.5v6C7,9.776,7.224,10,7.5,10h1 C8.776,10,9,9.776,9,9.5v-6C9,3.224,8.776,3,8.5,3z" clip-rule="evenodd" fill-rule="evenodd"/>
<path d="M8.5,11h-1C7.224,11,7,11.224,7,11.5v1C7,12.776,7.224,13,7.5,13h1 C8.776,13,9,12.776,9,12.5v-1C9,11.224,8.776,11,8.5,11z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>

我将它定义为一个Rails“helper”，它将直接呈现在HTML中。这个元素在页面上重复了很多次，每次我们必须发送完全相同的SVG字符串，该字符串将相同的字节数添加到页面大小。为了解决这个问题，我将SVG代码移动到我的图像目录中，然后我使用链轮来“内联”图像通过一个数据url。

数据URL如何工作?通常，在CSS元素背景下的URL会说“出去，在不同的URL中获取该资产”。相反，一个“数据”URL会编码呈现图像所需的所有数据，而无需创建新的网络请求。这里有一个例子:

background: url("data:image/svg+xml;charset=utf-8,
%3Csvg
version='1.1'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width='512'
height='512'
viewBox='0 0 512 512'
%3E%3Cpath d='M224 387.814v124.186l-192-192 192-192v126.912c223.375 5.24 213.794-151.896 156.931-254.912 140.355 151.707 110.55 394.785-156.931 387.814z'
%3E%3C/path%3E
%3C/svg%3E");

这个“url”包含整个图像内容，不需要发出HTTP请求。

在链轮中，当前支持的数据URL通过创建一个Base64字符串来支持，但是在以后的版本中，它将是URL转义，以避免使用Base64的额外开销。您可以阅读更多关于为什么不使用base64 SVG的内联图像。

以前，我说过我用链轮来做这个改变。在我的项目中，这是sassrails添加警告的咒语。svg作为我的CSS的数据url:

.warning-svg {
width: 16px;
height: 16px;
display: inline-block;
background: asset-data-url("warning.svg");
}

资产数据url被解释为一个指令，它接受警告的内容。svg图像和“inlines”它们使得不需要额外的HTTP请求。如果你用的是ERB，它可能是这样的:

.warning-svg {
width: 16px;
height: 16px;
display: inline-block;
background: url(<%= asset_data_uri 'warning.svg' %>);
}

现在，当您访问该页面时，SVG元素仅通过应用程序发送一次。css，然后被重新使用很多次，通过war- svg类。这意味着为最终用户下载HTML所需的时间更少，而且由于这些资产是与未来的高速缓存头一起服务的，所以它们只会被浏览器下载一次。更好的是，该站点正在Cloudflare CDN的后面服务，因此对于稍微大一点的CSS文件，应用服务器上没有额外的负担。

您可以看到我实现此更改的pull请求。

有什么缺点吗?这种方法(对我来说)最大的问题是，我失去了通过CSS控制SVG元素填充(颜色)的能力。以前在HTML中使用SVG，如果我想改变元素的颜色，很简单，我在CSS中做了。这里有一个例子，可以用CSS将填充色改为红色。

一旦我将SVG元素移出页面，我就无法通过纯CSS进行这种类型的修改。对于这种情况，我决定转换元素，使悬浮状态变得明显:

如果颜色变化是绝对需要的，那么我可以生成两个具有不同填充值的SVG元素，并更改鼠标悬空的背景元素。您可以在其他选项上看到一个堆栈溢出线程。

除了在主页上使用“警告”SVG之外，我还在“repo show”页面上使用它，但是它的填充不同。它是灰色的而不是白色的。在这种情况下，去掉颜色变化是不合适的;但是，我可以使用不透明的CSS属性来近似一个颜色的变化，这将影响SVG元素。

如果您不想在CSS中使用数据URL，您也可以通过标记将其呈现为普通图像。您还可以使用使用标记，它允许您通过HTML发送元素，但之后再使用和操作，就好像它是直接在HTML中一样。

在我的例子中，所有呈现的元素都存在于我的绝大多数页面中，所以将它们放在那些会被浏览器和我的CDN缓存的地方是有意义的。

一些关于将SVG元素转换为内联CSS元素的说明:

您需要确保将高度和宽度设置为元素，因为SVG只是“背景”。
您还需要确保SVG正在被格式化并正确地服务。对我来说，我有一个SVG元素，它缺少xml声明:

<?xml version="1.0" encoding="UTF-8"?>

和相同的一个失踪了xmlns = " http://www.w3.org/2000/svg "属性。如果您在浏览器中通过CSS检查器单击图像URL，它应该显示是否存在错误。您还需要显式地在图像中设置填充属性，否则，它们将默认为黑色。

总的来说，这一变化相当简单，57%的小页面也不太破旧。

虽然仍然有可能希望将SVG元素直接放到HTML中，但是考虑页面的权重和成本。

下这个例子显示了，在html中单击命令按钮设定svg中的矩形的填充颜色，并且调用svg的js函数FunCallByHtmlJs，产生个消息框。

在svg中，单击矩形时，设置html中的text的文本内容，并且调用html的js函数FunCallBySvgJs，产生个消息框。

svg文档以嵌入在html文档中运行。

例子在IE 6.0 + Adobe SVG Viewer 3.03中文版下测试通过。

svg文件的代码：

//文件名：Svg&HtmlInteractive.svg

var svgDoc = null ;

var svgRoot = null ;

var parentWnd = null ; //保存html的window对象

//初始化

function init(evt)

{

svgDoc = evt.target.ownerDocument ;

svgRoot = svgDoc.documentElement ; //在html中的第二种交互方式会用到

parentWnd = window.parent ; //ASV 3.0可以这么写。英文6.0版的要换种写法

if(parentWnd.document.title == null || parentWnd.document.title == '')

{

alert("请不要直接在浏览器中打开'svg'文档！");

//下面的代码作用是不提示确认关闭窗口

parentWnd.opener = null ;

parentWnd.open('', '_self') ;

parentWnd.close() ;

}

svgDoc.svgWnd = window ; //这里人为进行设定，以便在html中的第一种交互方式中可以取的到svg的window对象

}

function FunCallByHtmlJs()

{

alert('这个消息框是在html的js中调用svg的js函数产生的。') ;

}

function Click(evt)

{

var id = evt.target.id ;

if(id == 'rect') //单击在矩形上，而不是背景上时

{

if(parentWnd)

{

parentWnd.txt.value = '在svg中设置html中的text的文本内容' ;

parentWnd.FunCallBySvgJs() ; //调用html中的js函数

}

</script>

<text font-family="SimSun" font-size="14" fill="yellow" x="50" y="50" id="text">单击svg的矩形，设置html的text文本内容</text>

</svg>

html文件的代码：

//文件名：Svg&HtmlInteractive.html

<html>

<head>

<title>SVG与html的交互</title>

</head>

var svgDoc = null;

var svgRoot = null;

var svgWnd = null; //svg的window对象

function htmInit()

{

txt.value = '';

}

function FunCallBySvgJs()

{

alert('这个消息框是在svg的js中调用html的js函数产生的。');

}

function Btn1Clk()

{

//第一种方式

svgDoc = emSvg.getSVGDocument();

if (svgDoc == null) return;

svgRoot = svgDoc.documentElement;

if (svgRoot == null) return;

var rect = svgRoot.getElementById('rect');

if(rect) rect.setAttribute('fill', 'blue');

svgWnd = svgDoc.svgWnd ; //这个window对象是在svg的初始化里面添加进去的

if (svgWnd) svgWnd.FunCallByHtmlJs(); //调用svg里的js函数

}

function Btn2Clk()

{

//第二种方式

svgWnd = emSvg.window;

if(svgWnd == null) return;

svgRoot = svgWnd.svgRoot; //svgRoot在svg的js中是个全局的变量

if(svgRoot == null) return;

var rect = svgRoot.getElementById('rect');

if(rect) rect.setAttribute('fill', 'red');

svgWnd.FunCallByHtmlJs(); //调用svg里的js函数

}

</script>

</body>

</html>

效果图：

另外: 在aspx 页面中，emSvg对象会找不会，应该使用 document.getElementById("emSvg") 来查找 SVG对象

在线咨询

上一篇：据说这8个是小白也能简单上手的软件，你真的会用吗？看这里！
下一篇：CSS 实现弧形卡片的 3 种方式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商