倉庫網站（睡瞭一覺）

最近，小編逛Github發現一個有趣的開源倉庫：Js sequence diagrams ，估計不少同學都能用得上。目前，已有 7.4k star，是一個方便建立UML的時序圖（序列圖/循序圖）在線工具，使用特別簡單，純 JavaScript 打造！還有，小編發現在任意 GitHub 倉庫按下“.” 即可跳轉至 VScode 預覽該 Repo 所有文件，並進行編輯，這個功能有點酷！下圖便是效果圖：Js sequence diagrams 可以很方便地將簡單的文本行繪制成手繪風（或是簡單的直線條）的流程圖，不需要復雜的數據結構隻需要利用一段簡單的腳本，就可以生成想要的時序圖，腳本內容如下：Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob–>Alice: I am good thanks!效果如下圖：嗯……不過對於設計師來說不是十分實用哈，畢竟設計大佬們能自己徒手畫，但對於咱們這些程序員來說，太有用瞭，目前該倉庫還支持中文字體，不過需要把 theme 改為 simple ，感興趣的同學可以嘗試一下~如何安裝？該倉庫依賴於Snap.svg,web font loader,underscore.js,jQuery等，為瞭大傢安裝方便，建議使用官網推薦的bower，進行安裝。bower可以打包下載工程包，避免漏掉某些依賴庫；安裝bower之前必須先安裝node，npm和git。1、安裝node，npm和git去鏈接到的官網上download後按照提示一直next就ok。2、打開終端命令行。輸入node -v和npm -v檢驗自己是否安裝成功，若成功會顯示版本號3、在終端裡輸入 npm install -g bower 安裝bower4、cd address 打開項目所在路徑（就是你想把代碼包下載到的地方）5、下載結束後指定路徑下出現一個叫做bower_components的文件夾，裡面就是使用js-sequence-diagrams所需的各種文件瞭。運行bower install bramp/js-sequence-diagrams並包含以下腳本：<script src =" {{ bower 目錄}}/bower-webfontloader/webfont.js " />
<script src =" {{ bower 目錄}}/snap.svg/dist/snap.svg-min.js " />
<script src =" {{ bower 目錄}}/underscore/underscore-min.js " />
<script src =" {{ bower 目錄}}/js-sequence-diagrams/dist/sequence-diagram-min.js " />如果你要使用手繪主題，還需要導入 CSS：<link href =" {{涼亭目錄}}/js-sequence-diagrams/dist/sequence-diagram-min.css " rel ="樣式表" /># 如何使用？由於js-sequence-diagrams基於 Snap.svg 和 Underscore.js（或者 lodash）。你可以手動下載這些文件，也可以使用 bower install bramp/js-sequence-diagrams。然後在代碼中包含下列 HTML 代碼：<script src="webfont.js"></script>
<script src="snap.svg-min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>然後你現在有兩個選擇，你可以手動解析文本：<div id="diagram"></div>
<script>
var diagram = Diagram.parse("A->B: Message");
diagram.drawSVG("diagram", {theme: 'hand'});
</script>也可以使用 jQuery 解析文本：<div class="diagram">A->B: Message</div>
<script>
$(".diagram").sequenceDiagram({theme: 'hand'});
</script>說實話，js-sequence-diagrams 的語法一點兒都不難，隻需要啪啪啪幾行代碼，就可使用瞭，目前不少技術網站的 Markdown 也開始支持 js-sequence-diagrams瞭！項目地址：https://github.com/bramp/js-sequence-diagrams官方體驗地址：https://bramp.github.io/js-sequence-diagrams參考https://github.com/bramp/js-sequence-diagramshttps://blog.csdn.net/u012814856/article/details/81459939來源：https://mp.weixin.qq.com/s/YQ4A0F7gfNG_JBDNYinBEg