哈嘍，大家好，我是指北君。

指北君最近在畫一些流程圖的時候突發(fā)感想，你說像MD語法這樣能不能搞一個流程圖呢？
于是指北君在GitHub搜索了一番，發(fā)現(xiàn)了mermaid-js項(xiàng)目，它通過一些MD類似的語法就能繪制各種圖表，一起來看看吧！

在線編輯器

首先給大家介紹一下該項(xiàng)目提供的在線編輯器，這個在線編輯器一共給我們提供了三個部分，左上是編輯窗口
左下是操作按鈕，能夠把繪制后的圖形導(dǎo)出為各種格式，右邊是渲染后的圖形。

繪制圖表

接下來，我們就用在線編輯器來操作一番，看看使用起來效果如何。

支持常見的形狀

一些常見的圖形基本都支持，同時可以發(fā)現(xiàn)形狀和標(biāo)簽還是有一些關(guān)聯(lián)的。通過一些簡單的語法就能繪制出
一個個不同的形狀，可謂是讓繪圖變得極致簡單。

流程圖

通過一些基本的圖形我們就能夠繪制出一個流程圖了，流程圖的繪制也是充分體現(xiàn)了什么叫做方便快捷。大家一起看下面這個圖。

可以看到這個項(xiàng)目繪制流程圖的強(qiáng)大了吧，簡單幾行符號就能繪制一個流程圖，當(dāng)然了該項(xiàng)目不僅僅能用來繪制流程圖，我們接著往下看。

時序圖

時序圖也是在項(xiàng)目開發(fā)中經(jīng)常被繪制，用來表示交互的流程，或者對象之間的調(diào)用關(guān)系等，我們這就看下使用是否方便。

看到這里我真的驚呆了，如果是你畫一個這樣的時序圖需要多久，對于指北君這種潔癖癌來說，
光是調(diào)整樣式可能就要花費(fèi)五到十分鐘，這個語法寫下來也就是四五分鐘搞定。
而這個項(xiàng)目看下來和寫代碼一樣的格式，指北君覺得更加適合程序員來進(jìn)行繪圖，整個標(biāo)簽寫下來形如流水。

類圖

這個類圖看起來就更像代碼語法了，完全符合程序員的習(xí)慣。

第三方集成

只能繪圖只能滿足一小部分人的需求，然后指北君發(fā)現(xiàn)了更加強(qiáng)大的功能，第三方集成，這樣我們就能把這種功能遷移到我們自己經(jīng)常使用的系統(tǒng)了，
趕快看下有沒有支持你使用的系統(tǒng)吧。

HTML渲染

當(dāng)然了，不用多想這種項(xiàng)目肯定會通過JS把相關(guān)語法在HTML進(jìn)行渲染，這樣我們就能隨心的修改樣式了。

指北君有話說

指北君在這里只是簡單的介紹了一些該項(xiàng)目的皮毛，如果你感興趣可以自己去探索哦，
該項(xiàng)目對于不想動手畫各種圖表的各位客官來說可以去了解下該項(xiàng)目。

關(guān)注開源指北公眾號，后臺回復(fù)mermaid獲取資源。

這里是開源指北，立志做最好的開源分享平臺，分享有趣實(shí)用的開源項(xiàng)目。
同時也歡迎加入開源指北交流群，群里你可以摸魚、劃水、吐槽、咨詢， 還有簡歷模板、各種技術(shù)面試資料等100G的資源等著你領(lǐng)取哦?？靵硪黄饋砹囊涣陌桑?/p>

以上就是本次推薦的全部內(nèi)容，我是指北君，感謝各位的觀看。