在學習語法之前, 不妨花一點時間閱讀以下官方支持文檔, 再決定學習本主題的范圍和深度
(本篇文章中出現的譯文均為筆者翻譯或注釋, 內容僅供參考)
Draw Diagrams With Markdown
August 15, 2016 by typora.io
Typora supports some Markdown extensions for diagrams, once they are enabled from preference panel.
When exporting as HTML, PDF, epub, docx, those rendered diagrams will also be included,
but diagrams features are not supported when exporting markdown into other file formats in current version*. Besides, you should also notice that **diagrams is not supported by standard Markdown, CommonMark or GFM. **Therefore, we still recommend you to insert an image of these diagrams instead of write them in Markdown directly.
使用Typora繪制圖(表)
August 15, 2016 by typora.io
Typora 可以支持一些Markdown的圖表擴展(語法), 如果你在偏好設置中選擇開啟(支持性)
當導出為.html, .PDF, .epub, .docx時這些渲染的圖(表)依然會被包括進來
但是圖(表)特性在當前(四年前的遠古版本)版本中由Markdown導出到其他格式時不被支持. 另外🔔, 你也應該注意到圖(表)並不被標准Markdown, CommonMark 或 GFM 所支持;因此💡, 我們依然建議你選擇插入圖片而不是使用直接使用Markdown書寫
那么接下來, 就是正文內容!🎉
正文目錄:
🔔: Typora繪制的圖(表)中對於對象的數量的支持或許是有限的, 因此建議在規划事件或邏輯順序前先對所需對象數量的支持性進行檢查
序列圖
This feature uses js-sequence, which turns the following code block into a rendered diagram:
這個特性是通過 js-sequence所實現的, 可以將以下代碼轉換為渲染圖
```sequence
Alice->Bob: Hello Bob, how are you?
Note left of Alice: Alice thinks
Note right of Alice: Alice thinks
Note left of Bob: Bob thinks
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
```
🔔: 自己寫的時候不要先打代碼塊, 直接寫👆這個代碼塊里的內容就好
結果如下:
💡對象的數量並不局限於兩個, 比如也可以寫成👇這樣; 但或許是有上限的, 因此還是建議在規划事件或邏輯順序前先對所需對象數量的支持性進行檢查
```sequence
a-->b: a2b
a-->c: a2c
a-->d: a2d
a-->e: a2e
a-->f: a2f
a-->g: a2g
a-->h: a2h
a-->i: a2i
a-->j: a2j
a-->k: a2k
```
特性表
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| -> : | 事件線(直線): 事件 | 對象a->對象b: 事件1 |
| --> : | 事件線(直線): 事件 | 對象a-->對象b: 事件1 |
| note left/right of : | 備注 | note left of 對象a: 備注1 note right of 對象b: 備注2 |
流程圖
This feature uses flowchart.js, which turns the following code block into a rendered diagram:
這個特性是通過 flowchart.js所實現的, 可以將以下代碼轉換為渲染圖
```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```
🔔: 自己寫的時候不要先打代碼塊, 直接寫👆這個代碼塊里的內容就好
結果如下:
💡同樣的, 對象的數量並不局限於兩個, 但或許是有上限的, 因此還是建議在規划事件或邏輯順序前先對所需對象數量的支持性進行檢查
特性表
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| st=>start: | 開始(聲明): 顯示文本 | st=>start: 開始 |
| op=>operation: | 選項(聲明): 顯示文本 | op=>operation: 行為 |
| cond=>condition: | 條件(聲明): 顯示文本 | cond=>condition: 是/否? |
| e=>end | 結束(聲明) | e=>end |
| -> | 事件線(實線) | st->op->cond cond(yes)->e cond(no)->op 🔔cond()的參數似乎必須是"yes"和"no" |
Mermaid
Typora also has integration with mermaid, which supports sequence diagrams, flowcharts, Gantt charts, class and state diagrams, and pie charts.
Typora還集成了mermaid, 支持其中的序列圖, 流程圖, 甘特圖, 類圖, 狀態圖和餅圖
Mermaid序列圖
For more details see these instructions.
通過👉Mermaid序列圖文檔查看更多細節
```mermaid
%% Example of sequence diagram
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
```
🔔: 自己寫的時候不要先打代碼塊, 直接寫👆這個代碼塊里的內容就好
特性表
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| sequenceDiagram | 聲明 | 段首聲明用 |
| ->> : | 事件線(實線) | 對象a->>對象b:事件文本 |
| alt | 情況替換文本 | alt 條件/情況 |
| else | (其他)情況替換文本 | else 條件/情況 |
| opt | 選擇性文本 | opt 條件/情況 |
| end | 結束(聲明) | 段尾結束 |
| %% | 注釋 |
Mermaid流程圖
For more details see these instructions.
通過👉Mermaid流程圖文檔查看更多細節
語法
橫向流程圖
```mermaid
graph LR
id1[alt] -->id2(alt)
id2 --> id3{alt}
id3 -->|情況1| id4[結果1]
id3 -->|情況2| id5[結果2]
```
🔔: 自己寫的時候不要先打代碼塊, 直接寫👆這個代碼塊里的內容就好
縱向流程圖:
```mermaid
graph TD
id1[alt] -->id2(alt)
id2 --> id3{alt}
id3 -->|情況1| id4[結果1]
id3 -->|情況2| id5[結果2]
id3 -->|情況3| id6[結果3]
```
🔔: 自己寫的時候不要先打代碼塊, 直接寫👆這個代碼塊里的內容就好
特性表
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| graph LR/TD | 聲明 | 橫向制圖用"LR" 縱向制圖用"TD" |
| id[alt] | 直角矩形 | id[alt] |
| id(alt) | 圓角矩形 | id(alt) |
| id{alt} | 菱形(結點) | id{alt} |
| --> | 事件線(實線) | 對象a-->對象b |
Mermaid甘特圖
For more details see these instructions.
通過👉Mermaid甘特圖文檔查看更多細節
```mermaid
%% Example with selection of syntaxes
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
```
🔔: 自己寫的時候不要先打代碼塊, 直接寫👆這個代碼塊里的內容就好
特性表
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| gantt | 類型聲明 | 段首聲明 |
| dateFormat | 時間格式 | dateformat: YYYY-MM-DD datefomat: MM-DD-YYYY etc(更多的格式查看👉Mermaid甘特圖文檔) |
| title | 甘特圖標題 | title xx項目管理表 |
| section | 項目名稱(分區) | section 項目1 |
| :done | 完成(狀態) | 事件1 :done, ... |
| :active | 正在進行(狀態) | 事件1 :active, ... |
| :crit | critical, 關鍵任務 | 事件1 :crit, ... |
| des<x> | description, 任務描述(指針或者選擇器) | des<x>, <對項目事件的時間描述> |
關於"des"的補充
description, 個人認為應該理解為一個對事件時間節點的快速標記語法;
首先這種標記的基礎和原理是甘特圖本身就是"在時間軸上基於事件地描述整個項目流程", 因此每個項目的事件還可以用"某事件后多久"來進行定位(和描述), 這樣一來, 許多事件可以很方便的"掛"在幾個時間標記之后, 舉個例子:
首先回顧一下這張圖:
對於A section的定義, 其實就是定義了des1 - des4 四個重要時間點
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task :des3, after des2, 5d
Future task2 :des4, after des3, 5d
用畫筆輔助理解起來就是👇這樣的
這下就可以很清晰的理解:
"每個項目的事件還可以用某事件后多久來進行定位(和描述)"
了吧😜; 同理, 再回看其他分區的代碼就可以發現其中很多的事件其實是使使用了A區幾個事件時間的一種相對描述方法, 有點類似與使用變量存儲一個屬性來調控整體的方案, 至於利弊就看個人需求取舍啦😉
Mermaid類圖
For more details see these instructions.
通過👉Mermaid類圖文檔查看更多細節
```mermaidclassDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }```
🔔: 自己寫的時候不要先打代碼塊, 直接寫👆這個代碼塊里的內容就好
特性表
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| classDiagram | 聲明 | 段首聲明 |
| <|-- | 帶箭頭的連線(實線) | 類a <|-- 類b |
| 主類名 : | 定義主類里面的內容 | 類a : 內容1 類a : 內容2 類a : 內容3 |
| class 類名稱{ } | 定義子類里面的內容 | class 類b{ 內容1 內容2 內容3 } |
Mermaid狀態圖
For more details see these instructions.
通過👉Mermaid狀態圖文檔查看更多細節
```mermaidstateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]```
🔔: 自己寫的時候不要先打代碼塊, 直接寫👆這個代碼塊里的內容就好
特性表
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| stateDiagram | 聲明 | 段首聲明 |
| [*] | 狀態點 | [*]-->對象a |
| --> | 連接線(實線) | 對象a-->對象b (對象可以是狀態點) |
Mermaid餅圖
這里官方文檔並沒有給出更多, 但是Mermaid官方對於餅圖的支持還是有的👉Mermaid餅圖文檔
```mermaidpie title Pie Chart "Dogs" : 386 "Cats" : 85 "Rats" : 150 ```
🔔: 自己寫的時候不要先打代碼塊, 直接寫👆這個代碼塊里的內容就好
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| pie | 聲明 | 段首聲明 |
| title | 標題 | title 標題x |
| " " : | 描述 | "部分a": <數量> "部分b": <數量> "部分c": <數量> "部分d": <數量> 💡只需填入數量, 百分比是Mermaid自動求解的 |
特性總結
序列圖
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| -> : | 事件線(實線) | 對象a -> 對象b : |
| --> : | 事件線(虛線) | 對象a --> 對象b : |
| note left/right of : | 備注 | note left of 對象a: note right of 對象b: |
流程圖
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| st=>start: | 開始 | st=>start: 開始 |
| op=>operation: | 選項 | op=>operation: 行為 |
| cond=>condition: | 條件 | cond=>condition: 是/否? |
| e=>end | 結束 | |
| -> | 事件線(直線) | st->op->cond cond(yes)->e cond(no)->op 🔔cond()的參數似乎必須是"yes"和"no" |
Mermaid序列圖
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| sequenceDiagram | 聲明 | 段首聲明用 |
| ->> : | 事件線(實線) | 對象a-->對象b:事件文本 |
| alt | 情況替換文本 | alt 條件/情況 |
| else | (其他)情況替換文本 | else 條件/情況 |
| opt | 選擇性文本 | opt 條件/情況 |
| end | 結束(聲明) | 段尾結束 |
| %% | 注釋 |
Mermaid流程圖
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| graph LR/TD | 聲明 | 橫向制圖用"LR" 縱向制圖用"TD" |
| id[alt] | 直角矩形 | id[alt] |
| id(alt) | 圓角矩形 | id(alt) |
| id{alt} | 菱形(結點) | id{alt} |
| --> | 事件線(實線) | 對象a-->對象b |
Mermaid甘特圖
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| gantt | 類型聲明 | 段首聲明 |
| dateFormat | 時間格式 | dateformat: YYYY-MM-DD datefomat: MM-DD-YYYY etc(更多的格式查看👉Mermaid甘特圖文檔) |
| title | 甘特圖標題 | title xx項目管理表 |
| section | 項目名稱(分區) | section 項目1 |
| :done | 完成(狀態) | 事件1 :done, ... |
| :active | 正在進行(狀態) | 事件1 :active, ... |
| :crit | critical, 關鍵任務 | 事件1 :crit, ... |
| des<x> | description, 任務描述(指針或者選擇器) | des<x>, <對項目事件的時間描述> |
Mermaid類圖
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| classDiagram | 聲明 | 段首聲明 |
| <|-- | 帶箭頭的連線(實線) | 類a <|-- 類b |
| 主類名 : | 定義主類里面的內容 | 類a : 內容1 類a : 內容2 類a : 內容3 |
| class 類名稱{ } | 定義子類里面的內容 | class 類b{ 內容1 內容2 內容3 } |
Mermaid狀態圖
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| stateDiagram | 聲明 | 段首聲明 |
| [*] | 狀態點 | [*]-->對象a |
| --> | 連接線(實線) | 對象a-->對象b (對象可以是狀態點) |
Mermaid餅圖
| 語法 | 名稱(功能) | 方法(示例) |
|---|---|---|
| pie | 聲明 | 段首聲明 |
| title | 標題 | title 標題x |
| " " : | 描述 | "部分a": <數量> "部分b": <數量> "部分c": <數量> "部分d": <數量> 💡只需填入數量, 百分比是Mermaid自動求解的 |