為一名全棧開發者，我經常喜歡用各類流程圖、思維導圖軟件來梳理與總結當前的技術堆棧。善用圖表的好處，在于能幫我快速地進行跳躍式閱讀思考與知識整理。

將零散的知識點，按樹狀形式依次展開，讓我可以更好地看到整個知識體系的全貌，進而針對一些不足點進行查漏補缺。

為了讓大家能更便捷地使用圖表，對項目架構進行條理性劃分，GitHub 在前幾天將繪圖插件 Mermaid 集成進了 Markdown，并推出了一項「圖表繪制」功能！

看到這里，估計有部分水友可能對 Mermaid 不太了解，下面我簡單介紹一下。

Mermaid 是一款受到 Markdown 語法啟發而誕生的 JavaScript 圖表工具，由開發者 Knut Sveidqvist 所負責維護，目前在 GitHub 已積累 42000 Star，在技術圈內受眾頗廣。

該工具的主要作用，是能直接通過文本，來動態調整與創建各種實用的圖表。

GitHub：https://github.com/mermaid-js/mermaid

在這個功能沒有實現之前，開發者只能在項目文檔中內嵌圖片，用以展示圖表。

這種方式的弊端，在于開發者每次更新圖表時，都需要在繪圖軟件修改源文件，再截圖上傳至 GitHub。這無疑增加了工作成本，且不利于團隊間的協作維護。

因此，在將 Mermaid 集成進 GitHub 之后，我們編寫項目的 README 文件或其它 Markdown 文檔時，便可以借助 mermaid 語法，在文檔中輕松插入各類流程圖、序列圖、甘特圖、類圖、關系圖等圖表。

對于熟悉 Markdown 語法的人來說，上手玩轉 Mermaid 簡直就是易如反掌。

下面我便以 Mermaid 官方提供的流程圖入門示例，為大家做下講解。

首先，我們需要在 Markdown 中使用 mermaid 聲明，表示這是一段 mermaid 專屬語法：

mermaid

然后，用「flowchart TD」語法，表示這是一個從上（Top）到下（Down）的流程圖（flowchart）。

最后一步，就是用「A-->B;」鏈式語法，來清晰表達各個節點之間的連接關系。

完整的流程圖繪制，語法如下所示：

```mermaid
flowchart TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;

將上面這段語法，放到 GitHub 或使用 Markdown 編輯器 Typora 進行渲染，則可呈現流程圖：

除了流程圖之外，Mermaid 還提供了非常多種豐富的圖表類型，你可以根據文檔的不同內容，合理選擇與之相對應的圖表進行表述。

Mermaid 使用手冊：

https://mermaid-js.github.io/mermaid/

正所謂「一圖勝千言」，合理的應用圖表，讓我們在撰寫文檔時，可以達到事半功倍的效果。

對于公司項目來說，開發者通過在文檔中插入項目業務流程圖、技術架構圖、數據庫表設計圖等圖標。一方面，能讓新人更快地了解業務，上手開發。另一方面，公司老人在項目遇到問題時，也可以通過清晰直觀的文檔，快速排查與修補系統漏洞，真可謂一舉兩得！

目前，該功能已正式上線至 GitHub，感興趣的同學，可以上去體驗一下。

如果你想進一步了解這項技術的實現原理，也可以前往 GitHub 官方博客，查看詳細內容：

https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

來源：https://mp.weixin.qq.com/s/SAbLiLWhp9R_UOVnRi31YQ

面我們來說說流程圖該如何制作？如果你也感興趣的話，那就一起來看看吧！今天我們所演示的內容會在這個【迅捷畫圖】網站上進行，它里面還有很多流程圖模板可以使用，小編感覺還挺不錯的。

一、流程圖制作過程

1、流程圖分類

先來說說流程圖的分類，大家可以看看下面這張圖片就知道了，它主要分為組織結構圖，BPMN，UML，EPC事件過程線圖，EVC企業價值鏈圖等，大家可以根據自身需求選擇，相信這里的分類一定夠你使用。

2、流程圖制作

第二步就是流程圖的制作，大家可以看看下面這張動圖就明白了，一來是通過添加不同形狀的方框，二來是在每個方框中輸入內容，最后再用帶箭頭的線將它們連接起來就可以了。

3、導出流程圖

經過前面的操作之后，我們算是完成了流程圖的制作，最后只要點擊【導出】選項就可以了，在這里能選擇的格式非常多，比如有圖片，高清圖片，矢量圖片，PDF文件，HTML，XML，XSD等，大家可以自由選擇。

二、流程圖模板使用

1、組織結構圖模板

如果大家覺得這樣制作流程圖比較麻煩，那沒關系，這個【迅捷畫圖】網站還提供了非常多的流程圖模板，比如下面這個組織結構圖模板。

2、EPC事件過程線圖

接下來是這個EPC事件過程線圖模板，簡單來說就是讓我們了解整個事情的發展過程，以便我們后期做出修改。

3、EVC企業價值鏈圖

最后是EVC企業價值鏈圖模板，大家可以看看下面這張圖片就明白了，它可以讓我們知道哪個環節是比較有價值。

以上就是關于流程圖的介紹，如果大家還有其他補充的，可以在評論區留言。

朋友詢問流程圖和思維導圖有什么區別？簡單好看的流程圖怎么制作？

其實流程圖就是屬于思維導圖的一種，只是流程圖側重于表現事物之間的先后關系。那么怎么做流程圖呢？其實很簡單，這里小編就給大家展示一下【樹圖思維導圖】中的流程圖模版～

工作方案流程圖

https://shutu.cn/template/e42199e275d1a9da1459b99238390574.html

直播腳本流程圖

https://shutu.cn/template/057e492bc8895ecb3c958737e0fbd0b1.html

這些模版都在【樹圖思維導圖】的模版中心里可以找到，歡迎大家使用！