ypora 是一款支持實(shí)時(shí)預(yù)覽的 Markdown 文本編輯器。它有 OS X、Windows、Linux 三個(gè)平臺(tái)的版本，目前完全免費(fèi)。

https://typora.io/#

Markdown是一種輕量級(jí)標(biāo)記語(yǔ)言，創(chuàng)始人為約翰·格魯伯（英語(yǔ)：John Gruber）。 它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的XHTML（或者HTML）文檔。這種語(yǔ)言吸收了很多在電子郵件中已有的純文本標(biāo)記的特性。

由于Markdown的輕量化、易讀易寫特性，并且對(duì)于圖片，圖表、數(shù)學(xué)式都有支持，目前許多網(wǎng)站都廣泛使用Markdown來(lái)撰寫幫助文檔或是用于論壇上發(fā)表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、簡(jiǎn)書等，甚至還能被使用來(lái)撰寫電子書。

在使用Dreamweaver編寫網(wǎng)頁(yè)時(shí)，遇到需要插入代碼塊、流程圖、數(shù)學(xué)公式時(shí)，總是顯得很無(wú)力，效率很低，效果不好，使用Typora會(huì)讓這些問(wèn)題迎刃而解，且輕便，簡(jiǎn)單。

直接看一個(gè)demo：

導(dǎo)出為html:

html網(wǎng)頁(yè)源代碼：

其可以導(dǎo)出的格式有：

流程圖樣式包括：

1、標(biāo)準(zhǔn)流程圖源碼格式（橫向）：

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

2 mermaid語(yǔ)言庫(kù)繪流程圖

Mermaid 是一個(gè)用于畫流程圖、狀態(tài)圖、時(shí)序圖、甘特圖的庫(kù)，使用 JS 進(jìn)行本地渲染，廣泛集成于許多 Markdown 編輯器中。

Mermaid 作為一個(gè)使用 JS 渲染的庫(kù)，生成的不是一個(gè)“圖片”，而是一段 HTML 代碼，因此安全許多。

官網(wǎng)：https://mermaidjs.github.io/
Github 項(xiàng)目地址：https://github.com/knsv/mermaid

2.1 橫向流程圖源碼格式：

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

2.2 豎向流程圖源碼格式：

sequenceDiagram
Title: 標(biāo)題：復(fù)雜使用
對(duì)象A->對(duì)象B: 對(duì)象B你好嗎?（請(qǐng)求）
Note right of 對(duì)象B: 對(duì)象B的描述
Note left of 對(duì)象A: 對(duì)象A的描述(提示)
對(duì)象B-->對(duì)象A: 我很好(響應(yīng))
對(duì)象B->小三: 你好嗎
小三-->>對(duì)象A: 對(duì)象B找我了
對(duì)象A->對(duì)象B: 你真的好嗎？
Note over 小三,對(duì)象B: 我們是朋友
participant C
Note right of C: 沒(méi)人陪我玩

2.3 時(shí)序圖源碼復(fù)雜樣例

        gantt
        dateFormat  YYYY-MM-DD
        title 軟件開發(fā)甘特圖
        section 設(shè)計(jì)
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI設(shè)計(jì)                     :         des3, after des2, 5d
    未來(lái)任務(wù)                     :         des4, after des3, 5d
        section 開發(fā)
        學(xué)習(xí)準(zhǔn)備理解需求                      :crit, done, 2014-01-06,24h
        設(shè)計(jì)框架                             :crit, done, after des2, 2d
        開發(fā)                                 :crit, active, 3d
        未來(lái)任務(wù)                              :crit, 5d
        耍                                   :2d
        section 測(cè)試
        功能測(cè)試                              :active, a1, after des3, 3d
        壓力測(cè)試                               :after a1  , 20h
        測(cè)試報(bào)告                               : 48h

2.4 甘特圖樣例：

        gantt
        dateFormat  YYYY-MM-DD
        title 軟件開發(fā)甘特圖
        section 設(shè)計(jì)
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI設(shè)計(jì)                     :         des3, after des2, 5d
    未來(lái)任務(wù)                     :         des4, after des3, 5d
        section 開發(fā)
        學(xué)習(xí)準(zhǔn)備理解需求                      :crit, done, 2014-01-06,24h
        設(shè)計(jì)框架                             :crit, done, after des2, 2d
        開發(fā)                                 :crit, active, 3d
        未來(lái)任務(wù)                              :crit, 5d
        耍                                   :2d
        section 測(cè)試
        功能測(cè)試                              :active, a1, after des3, 3d
        壓力測(cè)試                               :after a1  , 20h
        測(cè)試報(bào)告                               : 48h

教程：

Markdown 高級(jí)技巧 | 菜鳥教程（使用 Typora 編輯器講解 Markdown 的語(yǔ)法）

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

ref

1 Typora 完全使用詳解

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

2 用什么軟件畫流程圖好？-悟空問(wèn)答

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

3 Mermaid 實(shí)用教程

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

－End－

介紹

一個(gè)基于 vue、Echart 框架的大數(shù)據(jù)可視化（大屏展示）模板，提供數(shù)據(jù)動(dòng)態(tài)刷新渲染、屏幕適應(yīng)、內(nèi)部圖表自由替換、Mixins注入等功能。

開源地址

https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search

項(xiàng)目展示

項(xiàng)目使用

1. 如何啟動(dòng)項(xiàng)目需要提前安裝好nodejs與npm,下載項(xiàng)目后在項(xiàng)目主目錄下運(yùn)行npm/cnpm install拉取依賴包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以啟動(dòng)項(xiàng)目，啟動(dòng)項(xiàng)目后需要手動(dòng)全屏（按 F11）。
2. 如何請(qǐng)求數(shù)據(jù)現(xiàn)在的項(xiàng)目未使用前后端數(shù)據(jù)請(qǐng)求，建議使用 axios 進(jìn)行數(shù)據(jù)請(qǐng)求，在 main.js 位置進(jìn)行全局配置，在 views/xx.vue 文件里進(jìn)行前后端數(shù)據(jù)請(qǐng)求。

3. 如何動(dòng)態(tài)渲染圖表在components/echart下的文件，比如drawPie()是渲染函數(shù)，echartData是需要?jiǎng)討B(tài)渲染的數(shù)據(jù)，當(dāng)外界通過(guò)props傳入新數(shù)據(jù)，我們可以使用watch()方法去監(jiān)聽(tīng)，一旦數(shù)據(jù)變化就調(diào)用this.drawPie()并觸發(fā)內(nèi)部的.setOption函數(shù)，重新渲染一次圖表。

4. 如何復(fù)用圖表組件因?yàn)?Echart 圖表是根據(jù)id/class去獲取 Dom 節(jié)點(diǎn)并進(jìn)行渲染的，所以我們只要傳入唯一的 id 值與需要的數(shù)據(jù)就可以進(jìn)行復(fù)用。如中間部分的任務(wù)通過(guò)率與任務(wù)達(dá)標(biāo)率組件就是采用復(fù)用的方式。

5. 如何更換邊框邊框是使用了 DataV 自帶的組件，只需要去 views 目錄下去尋找對(duì)應(yīng)的位置去查找并替換就可以，具體的種類請(qǐng)去 DavaV 官網(wǎng)查看 如：

6. 如何更換圖表直接進(jìn)入 components/echart 下的文件修改成你要的 echarts 模樣，可以去echarts 官方社區(qū)里面查看案例。
7. Mixins 注入的問(wèn)題使用 mixins 注入解決了圖表重復(fù)書寫響應(yīng)式適配的代碼，如果要更換(新增)圖形，需要將echarts.init()函數(shù)賦值給this.chart，然后 mixins 才會(huì)自動(dòng)幫你注入響應(yīng)式功能。
8. 屏幕適配問(wèn)題本項(xiàng)目借助了 flexible 插件，通過(guò)改變 rem 的值來(lái)進(jìn)行適配，原設(shè)計(jì)為 1920px。 ，適配區(qū)間為：1366px ~ 2560px，本項(xiàng)目有根據(jù)實(shí)際情況進(jìn)行源文件的更改，小屏幕（如:寬為 1366px）需要自己舍棄部分動(dòng)態(tài)組件進(jìn)行適配，如'動(dòng)態(tài)文字變換組件'會(huì)影響布局，需要手動(dòng)換成一般節(jié)點(diǎn)。

具體使用請(qǐng)移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址參考。