不會寫Markdown? 其實是你不知道如何看語法！幾分鐘教你掌握Markdown
阿新 • • 發佈：2020-12-23
目錄
- 說明：經測試，常用工具對Markdown支援不相同，比如我用的有道雲筆記和csdn上就不一樣，具體自己慢慢發，在此就不贅述了
- 學習使用方法：儲存此md檔案，找個Markdown環境，貼上直接看
- ① 將本文件儲存到你的有道雲筆記，點選文章內的右上角：編輯！！即可
- ② 開啟連結，直接儲存到本地，找個Markdown環境，複製進去檢視
- 寫的檔案如下。很不幸，部落格園不支援我在有道雲寫的Markdown文字，但是萬變不離其宗，我就不改語法了，按照上邊的學習即可。
- 一、待辦
- 二、流程圖
- 三、甘特圖
- 四、總結：就這樣的模式，直接來例項
- 五、基礎
- h1 標題
說明：經測試，常用工具對Markdown支援不相同，比如我用的有道雲筆記和csdn上就不一樣，具體自己慢慢發，在此就不贅述了
學習使用方法：儲存此md檔案，找個Markdown環境，貼上直接看
① 將本文件儲存到你的有道雲筆記，點選文章內的右上角：編輯！！即可
如圖：
② 開啟連結，直接儲存到本地，找個Markdown環境，複製進去檢視
寫的檔案如下。很不幸，部落格園不支援我在有道雲寫的Markdown文字，但是萬變不離其宗，我就不改語法了，按照上邊的學習即可。
一、待辦
待辦事項和清單在日常工作、生活中經常被使用。 在Markdown中，你只需要在待辦的事項文字或者清單文字前加上- [ ]、- [x]即可。 - [ ] 表示未完成，- [x] 表示已完成。 注：鍵入字元與字元之間都要保留一個字元的空格。
- [x] 應該是這麼回事
- [ ] 應該是這麼回事
二、流程圖
在Markdown中，一段流程圖語法以 “` 開頭，以 “` 結尾。 在 “` 後另起一行，書寫graph XX，用以確定將要繪製的流程圖及其型別（XX表示流程圖型別）。 流程圖分為豎向和橫向兩大類，豎向包括自上而下和自下而上兩種順序， 橫向包括從右到左和從左到右兩種順序。 其對應語法分別為：graph TB/graph BT/graph RL/graph LR。 TB - top bottom（自上而下） BT - bottom top（自下而上） RL - right left（從右到左） LR - left right（從左到右）
graph TB
A-->B
graph BT
A-->B
graph RL
A-->B
graph LR
A-->B
graph TD
A-->B
graph TD
A[我是a矩形] --> B(我是b圓角)
B --> C{判斷}
C --> |1| D[結果是1]
C --> |2| E[結果是2]
C --> |3| F[結果是3]
基本圖形
- id + [文字描述]矩形
- id + (文字描述)圓角矩形
- id + >文字描述]不對稱的矩形
- id + {文字描述}菱形
- id + ((文字描述))圓形
graph TD
id[帶文字的矩形]
id4(帶文字的圓角矩形)
id3>帶文字的不對稱的矩形]
id1{帶文字的菱形}
id2((帶文字的圓形))
節點之間的連線
- A --> B A帶箭頭指向B
- A --- B A不帶箭頭指向B
- A -.- B A用虛線指向B
- A -.-> B A用帶箭頭的虛線指向B
- A ==> B A用加粗的箭頭指向B
- A -- 描述 --- B A不帶箭頭指向B並在中間加上文字描述
- A -- 描述 --> B A帶箭頭指向B並在中間加上文字描述
- A -. 描述 .-> B A用帶箭頭的虛線指向B並在中間加上文字描述
- A == 描述 ==> B A用加粗的箭頭指向B並在中間加上文字描述
graph LR
A[A] --> B[B]
A1[A] --- B1[B]
A4[A] -.- B4[B]
A5[A] -.-> B5[B]
A7[A] ==> B7[B]
A2[A] -- 描述 --- B2[B]
A3[A] -- 描述 --> B3[B]
A6[A] -. 描述 .-> B6[B]
A8[A] == 描述 ==> B8[B]
子流程圖
格式
subgraph title
graph definition
end
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
自定義樣式
語法：style id 具體樣式
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
demo
繪製一個流程圖,找出 A、 B、 C 三個數中最大的一個數。
寫法
graph LR
start[開始] --> input[輸入A,B,C]
input --> conditionA{A是否大於B}
conditionA -- YES --> conditionC{A是否大於C}
conditionA -- NO --> conditionB{B是否大於C}
conditionC -- YES --> printA[輸出A]
conditionC -- NO --> printC[輸出C]
conditionB -- YES --> printB[輸出B]
conditionB -- NO --> printC[輸出C]
printA --> stop[結束]
printC --> stop
printB --> stop
三、甘特圖
我們在工作中用甘特圖作計劃進度表、專案進度表再合適不過了。
以如下甘特圖為例說明，
甘1
與流程圖一樣，Markdown中，甘特圖的語法也是以 “ 開頭，以 “ 結尾。
在 “` 後另起一行，書寫 gantt ，用以確定將要繪製的是甘特圖。
標題的書寫語法如下：
gantt
dateFormat YYYY-MM-DD
title 產品計劃表
section 初期階段
明確需求: 2020-03-01, 10d
section 中期階段
跟進開發: 2020-03-11, 15d
section 後期階段
走查測試: 2020-03-20, 9d
gantt
dateFormat YYYY-MM-DD
title 使用mermaid語言定製甘特圖
section 任務1
已完成的任務:done,des1,2014-01-06,2014-01-08
正在進行的任務:active,des2,2014-01-09,3d
待完成任務1:des3, after des2, 5d
待完成任務2:des4, after des3, 5d
===================================================
例項效果圖如下：
1、橫向流程圖原始碼格式：
graph LR
A[方形] -->B(圓角)
B --> C{條件a}
C -->|a=1| D[結果1]
C -->|a=2| E[結果2]
F[橫向流程圖]
2、豎向流程圖原始碼格式：
graph TD
A[方形] --> B(圓角)
B --> C{條件a}
C --> |a=1| D[結果1]
C --> |a=2| E[結果2]
F[豎向流程圖]
3、標準流程圖原始碼格式：（有道雲好像不支援，可以換別的編輯器環境試試）
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
4、標準流程圖原始碼格式（橫向）：（有道雲好像不支援，可以換別的編輯器環境試試）
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
5、UML時序圖原始碼樣例：
sequenceDiagram
物件A->物件B: 物件B你好嗎?（請求）
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->物件A: 我很好(響應)
物件A->物件B: 你真的好嗎？
6、UML時序圖原始碼複雜樣例：（有道雲好像不支援，可以換別的編輯器環境試試）
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: 沒人陪我玩
7、UML標準時序圖樣例：
%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭
sequenceDiagram
participant 張三
participant 李四
張三->王五: 王五你好嗎？
loop 健康檢查
王五->王五: 與疾病戰鬥
end
Note right of 王五: 合理 食物 <br/>看醫生...
李四-->>張三: 很好!
王五->李四: 你怎麼樣?
李四-->王五: 很好!
8、甘特圖樣例：
%% 語法示例
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
四、總結：就這樣的模式，直接來例項
有些環境需要註明```mermaid
1、橫向流程圖原始碼格式：
graph LR
A[方形] -->B(圓角)
B --> C{條件a}
C -->|a=1| D[結果1]
C -->|a=2| E[結果2]
F[橫向流程圖]
2、豎向流程圖原始碼格式：
graph TD
A[方形] --> B(圓角)
B --> C{條件a}
C --> |a=1| D[結果1]
C --> |a=2| E[結果2]
F[豎向流程圖]
3、標準流程圖原始碼格式：
flowchat st=>start: 開始框 op=>operation: 處理框 cond=>condition: 判斷框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 輸入輸出框 e=>end: 結束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op4、標準流程圖原始碼格式（橫向）：
flowchat 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)->op5、UML時序圖原始碼樣例：
sequenceDiagram
物件A->>物件B: 物件B你好嗎?（請求）
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->>物件A: 我很好(響應)
物件A->>物件B: 你真的好嗎？
6、UML時序圖原始碼複雜樣例：
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: 沒人陪我玩
7、UML標準時序圖樣例：
%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭
8、甘特圖樣例：
%% 語法示例
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
五、基礎
h1 標題
h2 標題
h3 標題
h4 標題
h5 標題
h6 標題
水平線
文字樣式
This is bold text
This is bold text
This is italic text
This is italic text
Strikethrough
列表
無序
- Create a list by starting a line with
+,-, or* - Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Marker character change forces new list start:
- Very easy!
有序
-
Lorem ipsum dolor sit amet
-
Consectetur adipiscing elit
-
Integer molestie lorem at massa
-
You can use sequential numbers...
-
...or keep all the numbers as
1.
Start numbering with offset:
- foo
- bar
程式碼
Inline code
Indented code
// Some comments
line 1 of code
line 2 of code
line 3 of code
Block code "fences"
Sample text here...
Syntax highlighting
var foo = function (bar) {
return bar++;
};
console.log(foo(5));