Typora 是一款支援實時預覽的 Markdown 文字編輯器。它有 OS X、Windows、Linux 三個平臺的版本，目前完全免費。

https://typora.io/#

Markdown是一種輕量級標記語言，創始人為約翰·格魯伯（英語：John Gruber）。 它允許人們使用易讀易寫的純文字格式編寫文件，然後轉換成有效的XHTML（或者HTML）文件。這種語言吸收了很多在電子郵件中已有的純文字標記的特性。

由於Markdown的輕量化、易讀易寫特性，並且對於圖片，圖表、數學式都有支援，目前許多網站都廣泛使用Markdown來撰寫幫助文件或是用於論壇上發表訊息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、簡書等，甚至還能被使用來撰寫電子書。

在使用Dreamweaver編寫網頁時，遇到需要插入程式碼塊、流程圖、數學公式時，總是顯得很無力，效率很低，效果不好，使用Typora會讓這些問題迎刃而解，且輕便，簡單。

直接看一個demo：

匯出為html:

html網頁原始碼：

其可以匯出的格式有：

流程圖樣式包括：

1、標準流程圖原始碼格式（橫向）：

```flowst=>start: 開始框op=>operation: 處理框cond=>condition: 判斷框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 輸入輸出框e=>end: 結束框st(right)->op(right)->condcond(yes)->io(bottom)->econd(no)->sub1(right)->op```

2 mermaid語言庫繪流程圖

Mermaid 是一個用於畫流程圖、狀態圖、時序圖、甘特圖的庫，使用 JS 進行本地渲染，廣泛集成於許多 Markdown 編輯器中。

Mermaid 作為一個使用 JS 渲染的庫，生成的不是一個“圖片”，而是一段 HTML 程式碼，因此安全許多。

官網：https://mermaidjs.github.io/Github 專案地址：https://github.com/knsv/mermaid

2.1 橫向流程圖原始碼格式：

graph LRA[方形] -->B(圓角)    B --> C{條件a}    C -->|a=1| D[結果1]    C -->|a=2| E[結果2]

2.2 豎向流程圖原始碼格式：

sequenceDiagramTitle: 標題：複雜使用物件A->物件B: 物件B你好嗎?（請求）Note right of 物件B: 物件B的描述Note left of 物件A: 物件A的描述(提示)物件B-->物件A: 我很好(響應)物件B->小三: 你好嗎小三-->>物件A: 物件B找我了物件A->物件B: 你真的好嗎？Note over 小三,物件B: 我們是朋友participant CNote right of C: 沒人陪我玩

2.3 時序圖原始碼複雜樣例

        gantt        dateFormat  YYYY-MM-DD        title 軟體開發甘特圖        section 設計        需求                      :done,    des1, 2014-01-06,2014-01-08        原型                      :active,  des2, 2014-01-09, 3d        UI設計                     :         des3, after des2, 5d    未來任務                     :         des4, after des3, 5d        section 開發        學習準備理解需求                      :crit, done, 2014-01-06,24h        設計框架                             :crit, done, after des2, 2d        開發                                 :crit, active, 3d        未來任務                              :crit, 5d        耍                                   :2d        section 測試        功能測試                              :active, a1, after des3, 3d        壓力測試                               :after a1  , 20h        測試報告                               : 48h

2.4 甘特圖樣例：

        gantt        dateFormat  YYYY-MM-DD        title 軟體開發甘特圖        section 設計        需求                      :done,    des1, 2014-01-06,2014-01-08        原型                      :active,  des2, 2014-01-09, 3d        UI設計                     :         des3, after des2, 5d    未來任務                     :         des4, after des3, 5d        section 開發        學習準備理解需求                      :crit, done, 2014-01-06,24h        設計框架                             :crit, done, after des2, 2d        開發                                 :crit, active, 3d        未來任務                              :crit, 5d        耍                                   :2d        section 測試        功能測試                              :active, a1, after des3, 3d        壓力測試                               :after a1  , 20h        測試報告                               : 48h

教程：

Markdown 高階技巧 | 菜鳥教程（使用 Typora 編輯器講解 Markdown 的語法）

https://www.runoob.com/markdown/md-advance.html

ref

1 Typora 完全使用詳解

https://sspai.com/post/54912/

https://www.wukong.com/question/6809962012198568195/

3 Mermaid 實用教程

https://blog.csdn.net/fenghuizhidao/article/details/79440583

－End－