Markdown常用語法及流程圖,時序圖(順序圖),甘特圖等


Markdown語法

標題

# 文字

加粗

__文字__

斜體

_文字_

刪除線

~~文字~~

下划線

<u>文字</u>

鏈接

寫法一 [鏈接名稱](www.baidu.com)

寫法二 <http://www.baidu.com>

腳注提示

[^文字]

[^文字]:"提示信息" 這個可以放在底部

着重顯示

`文字`

代碼塊

```javascript

列表

無序列表

- 文字

有序列表
  1. 文字

分割線

--- 或者 ***

圖片

![ alt 屬性文本]( 圖片地址/網絡地址 "可選alt標題")

表格

生成表格

| 表頭 | 表頭 |

| --- | --- |

| 單元格 | 單元格 |

| 單元格 | 單元格 |

表格對齊

-: 左對齊 :- 左對齊 :-: 居中對其

高級技巧

用\轉義符可以正常顯示一些符號

公式

$$

公式內容

$$


流程圖,時序圖(順序圖),甘特圖等

1、橫向流程圖源碼格式:

```mermaid
graph LR
A[方形] -->B(圓角)
    B --> C{條件a}
    C -->|a=1| D[結果1]
    C -->|a=2| E[結果2]
    F[橫向流程圖]
```

2、豎向流程圖源碼格式:

```mermaid
graph TD
A[方形] --> B(圓角)
    B --> C{條件a}
    C --> |a=1| D[結果1]
    C --> |a=2| E[結果2]
    F[豎向流程圖]
```

3、標准流程圖源碼格式:

```flow
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、標准流程圖源碼格式(橫向):

```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
```

5、UML時序圖源碼樣例:

```sequence
對象A->對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象A->對象B: 你真的好嗎?
```

6、UML時序圖源碼復雜樣例:

```sequence
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標准時序圖樣例:

```mermaid
%% 時序圖例子,-> 直線,-->虛線,->>實線箭頭
  sequenceDiagram
    participant 張三
    participant 李四
    張三->王五: 王五你好嗎?
    loop 健康檢查
        王五->王五: 與疾病戰斗
    end
    Note right of 王五: 合理 食物 <br/>看醫生...
    李四-->>張三: 很好!
    王五->李四: 你怎么樣?
    李四-->王五: 很好!
```

8、甘特圖樣例:

```mermaid
%% 語法示例
        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
```

效果展示

img


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM