將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。

主要特點：

定義抽象級別以僅渲染導入/導出，類/函數名稱，函數依賴性以逐步學習/解釋代碼。
自定義抽象級別支持創(chuàng)建自己的抽象級別
表示生成器，以生成不同抽象級別的SVG列表
定義流樹修改器以映射眾所周知的API，例如[] .map，[]。forEach，[] .filter到方案上的循環(huán)結構等。
銷毀修飾符，用于在方案上用一個形狀替換代碼塊
自定義流樹修改器支持創(chuàng)建自己的流修改器
流樹忽略過濾器完全省略一些代碼節(jié)點，如日志行
聚焦節(jié)點或整個代碼邏輯分支突出顯示方案的重要部分
模糊節(jié)點或整個代碼邏輯分支以隱藏不太重要的東西
定義的樣式主題支持選擇您喜歡的樣式
自定義主題支持創(chuàng)建自己的主題，更好地適合您的上下文顏色
自定義顏色和樣式支持提供方便的API來更改特定樣式而無需樣板

用例場景：

通過流程圖解釋/記錄您的代碼
通過視覺理解學習其他代碼
為有效JS語法簡單描述的任何進程創(chuàng)建流程圖

以上所有功能可以直接到github上詳細了解，用法太多，這里就不在介紹了！

vscode擴展

這么強大的東西，有人肯定說如果在開發(fā)的時候實時看到流程圖有助于理解代碼，官網提供了插件（我在最新版中測試失效了，不知道是否是我使用的有問題還是插件本身的問題），如果感興趣的可以到擴展商店搜索code-flowchart。如果測試成功，歡迎到評論區(qū)分享。以下是我vscode版本和官網的插件使用截圖。

如果利用好這個插件，可以開發(fā)出Chrome插件，以及其他JavaScript編輯器或者IDEA的插件，由于官方github已經幾個月沒更新了，所以還不知道未來會不會支持！

總結

js2flowchart是一個比較實用的Javascript插件，可以用來做很多事情，不管是自己寫代碼。還是閱讀別人的代碼，都無疑是一大助力，能夠幫助我們提升我們的代碼能力，更容易的閱讀代碼，這樣學習起來就快了，希望對你有所幫助！如果有什么好的建議，也可以到評論區(qū)分享！

要整理你的頁面重量，但是要保持所有的酷功能嗎?繼續(xù)閱讀，看看一個開發(fā)人員如何擺脫SVG，并在它的位置使用CSS。

獲得高級管理人員手冊的重要趨勢、技巧和戰(zhàn)略，以競爭和贏得數字經濟。

在這個假期過后，我們中的許多人都想減掉一點體重，那就是體重。在我的應用中，我廣泛地使用SVG元素作為圖像、徽標和圖標。直到最近，我都直接在HTML中呈現SVG元素。這是最簡單的方法。正如您可能通過我的intro語句所猜測的那樣，我一直在通過從HTML中刪除SVG元素來減少頁面權重。它的效果如何?在進行更改之前，主頁是14kb (77kb解壓縮)。更改后，主頁為6kb(未壓縮的30kb)。這是每一頁的“超過有線”字節(jié)的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中。這個元素在頁面上重復了很多次，每次我們必須發(fā)送完全相同的SVG字符串，該字符串將相同的字節(jié)數添加到頁面大小。為了解決這個問題，我將SVG代碼移動到我的圖像目錄中，然后我使用鏈輪來“內聯(lián)”圖像通過一個數據url。

數據URL如何工作?通常，在CSS元素背景下的URL會說“出去，在不同的URL中獲取該資產”。相反，一個“數據”URL會編碼呈現圖像所需的所有數據，而無需創(chuàng)建新的網絡請求。這里有一個例子:

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”包含整個圖像內容，不需要發(fā)出HTTP請求。

在鏈輪中，當前支持的數據URL通過創(chuàng)建一個Base64字符串來支持，但是在以后的版本中，它將是URL轉義，以避免使用Base64的額外開銷。您可以閱讀更多關于為什么不使用base64 SVG的內聯(lián)圖像。

以前，我說過我用鏈輪來做這個改變。在我的項目中，這是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元素僅通過應用程序發(fā)送一次。css，然后被重新使用很多次，通過war- svg類。這意味著為最終用戶下載HTML所需的時間更少，而且由于這些資產是與未來的高速緩存頭一起服務的，所以它們只會被瀏覽器下載一次。更好的是，該站點正在Cloudflare CDN的后面服務，因此對于稍微大一點的CSS文件，應用服務器上沒有額外的負擔。

您可以看到我實現此更改的pull請求。

有什么缺點嗎?這種方法(對我來說)最大的問題是，我失去了通過CSS控制SVG元素填充(顏色)的能力。以前在HTML中使用SVG，如果我想改變元素的顏色，很簡單，我在CSS中做了。這里有一個例子，可以用CSS將填充色改為紅色。

一旦我將SVG元素移出頁面，我就無法通過純CSS進行這種類型的修改。對于這種情況，我決定轉換元素，使懸浮狀態(tài)變得明顯:

如果顏色變化是絕對需要的，那么我可以生成兩個具有不同填充值的SVG元素，并更改鼠標懸空的背景元素。您可以在其他選項上看到一個堆棧溢出線程。

除了在主頁上使用“警告”SVG之外，我還在“repo show”頁面上使用它，但是它的填充不同。它是灰色的而不是白色的。在這種情況下，去掉顏色變化是不合適的;但是，我可以使用不透明的CSS屬性來近似一個顏色的變化，這將影響SVG元素。

如果您不想在CSS中使用數據URL，您也可以通過標記將其呈現為普通圖像。您還可以使用使用標記，它允許您通過HTML發(fā)送元素，但之后再使用和操作，就好像它是直接在HTML中一樣。

在我的例子中，所有呈現的元素都存在于我的絕大多數頁面中，所以將它們放在那些會被瀏覽器和我的CDN緩存的地方是有意義的。

一些關于將SVG元素轉換為內聯(lián)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小時內與您取得聯(lián)系。

整合營銷服務商