Markdown 進階操作 | 流程圖、時序圖製作
自從我派在 2014 年釋出了「 ofollow,noindex">認識與入門 Markdown 」這篇文章，Markdown 這個簡潔、輕量而又強大的標記語言就逐漸走進了非專業人士的生活中。無論是對於程式員，還是部落格作者、微信公眾平臺作者等等，Markdown 語言都逐漸深入人心。
作為可能是市面上免費的 Markdown 編輯器中最優雅的一個，還是全平臺（Windows, macOS 和絕大多數 Linux 發行版）支援的 Markdown 利器 —— Typora，除了最基礎的「標題」「列表」「表格」「圖片」「程式碼」等等功能，你可能不知道的是： Typora 還原生支援直接繪製時序圖 Sequence、流程圖 Flow Chart， 甚至 直接集成了 Mermaid 渲染引擎。
本文寫作環境為 Windows 10 1803，Typora 版本 0.9.57 (beta)。在 Typora「偏好設定 → Markdown 擴充套件語法」中開啟「序列圖、流程圖和 Mermaid 選項」即可開啟相關繪製功能。
Typora 官網參考： Draw Diagrams With Markdown
時序圖 Sequence
Typora 的時序圖渲染引擎是 js-sequence - Turns text into UML sequence diagrams.
在 Typora 中，你可以通過下面的方式開啟時序圖渲染：
上面是時序圖的程式碼例子，渲染之後，這個時序圖是這個樣子的：
實際上時序圖是一個迴圈，其 基本元素包括標題 Title 、參與者 participant 、箭頭 -> 和標籤 Notes 。經過渲染之後，每個參與者 participant 由兩個元素塊構成，一條線段將兩個元素塊連線，這樣就可以方便的用箭頭表示他們之間的轉換關係了。
標題和箭頭的語法
在時序圖基本語法中：標題 Title 放在第一行，之後是參與者與用箭頭標識的參與者之間的相互關係。
箭頭有四種形式：常規箭頭、虛線箭頭、開口箭頭和虛線開口箭頭。分別通過： -> 、 --> 、 ->> 、 -->> 來表示。
標籤語法
在時序圖中，我們可以通過「標籤」這個元件來給我們的某個參與者或是某些參與者進行標註。標籤可以放在參與者的左側 - Note left of A 、右側 - Note right of A 或者浮於參與者上方 - Note over A 。當然，標籤也可以同時浮於兩個參與者上方 - Note over A,B 。
參與者順序語法
如果我們希望更改參與者的順序，那麼可以在一開始按照我們想要的順序，先列出參與者的名字： participant A 這樣。
上面的幾個例子是 Typora 所支援的基本時序圖繪製語法，除了這些相對大的語法外，還有註釋： # 你的註釋 和在某個模組中換行： \n 這兩個重要的語法。基本上通過這樣的方式，我們就能繪製出簡單的時序圖了。:beers:
更加詳細的語法可以通過下圖進行實現，深黃色為關鍵保留詞，淺黃色為具體資訊：
流程圖 Flow Chart
Typora 的時序圖渲染引擎是 flowchart.js - Draws simple SVG flow chart diagrams from textual representation of the diagram.
流程圖的程式碼部分相對複雜。我們先從 Typora 官方文件給出的例子開始：
上面這部分程式碼，我們可以看到流程圖的渲染程式碼 大體分為兩個部分：元素定義部分、元素連線部分。 即：首先在第一部分，我們 定義整個流程圖中的節點元素 ；之後在第二部分，我們將各個節點通過箭頭連線，以 表示整個圖表的流向。
經過渲染之後，我們可以得到以下這樣的基礎流程圖：
第一部分：元素定義
我們從第一部分開始，可以看到，一個流程圖的基本元素有六大類別：
start end operation subroutine condition inputoutput
元素定義部分的基本程式碼結構是這樣的：
tag=>type: content:>url
其中：
-
tag：就是作為第二部分連線元素時候引用我們定義元素時的名稱，這個tag需要獨一無二。 -
type：就是我們流程圖的六大基本元素類別，選擇元素種類填入即可。 -
content：是我們流程圖元素中所顯示的文字。這裡的冒號與文字之間一定要有個空格。 -
url：是元素所帶有的超連結。:link:
這樣就是我們元素定義部分的基本語法了。:tada::tada::tada:
第二部分：元素連線
第二部分就是將我們在第一部分定義的元素通過我們想要的方式進行連線。
在這一部分，連線十分簡單，就是利用 -> 來連線我們在第一部分定義的那些元素，元素利用 tag 來區分。這裡面需要注意的是：
- 對於每個「判斷條件元素」
condition，都會有yes和no兩個分支，比如上面程式碼中的cond(yes)和cond(no)。 - 每個元素可以制定分支走向，預設是
向下的，也可以用right指向右邊，比如下面這個流程圖中，我們可以將「子程序元素」subroutine放在右側顯示：
Mermaid 整合
Typora also has integration with mermaid , which supports sequence, flowchart and Gantt.
Mermaid 是另一種更加方便的生成流程圖、時序圖的語法 ——「Generation of diagrams and flowcharts from text in a similar manner as markdown.」。其官方文件在這裡 → mermaid.js 。Typora 集成了 Mermaid 渲染引擎，我們可以直接用 Mermaid 語法畫時序圖、流程圖和甘特圖。:tada::tada::tada:
這部分語法相對更加複雜，而本篇文章我已經寫了近兩千字了，因此我決定另起一篇文章進行介紹：包括 Mermaid 基礎語法的介紹、甘特圖 Gantt 的介紹和利用 Mermaid 繪製 Sequence, Flowchart 和 Gantt 這三種基本影象的方法。:ok_hand:
感謝閱讀。:beers: