ypora 是一款支持實時預覽的 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、標準流程圖源碼格式（橫向）：

```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(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 LR
A[方形] -->B(圓角)
    B --> C{條件a}
    C -->|a=1| D[結果1]
    C -->|a=2| E[結果2]

2.2 豎向流程圖源碼格式：

sequenceDiagram
Title: 標題：復雜使用
對象A->對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象B->小三: 你好嗎
小三-->>對象A: 對象B找我了
對象A->對象B: 你真的好嗎？
Note over 小三,對象B: 我們是朋友
participant C
Note 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/

2 用什么軟件畫流程圖好？-悟空問答

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

3 Mermaid 實用教程

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

－End－