上一篇說到晕翠，MarkDown還支持另一種語法的流程圖蚪战。那么我們一起來學(xué)習(xí)一下棘利。

效果圖

先來看一張效果圖：

MarkDown flow流程圖示例

對(duì)應(yīng)的語法如下

start=>start: 開始
input=>inputoutput: 輸入
operation=>operation: 操作
condition=>condition: 操作出錯(cuò)拧粪？
output=>inputoutput: 輸出
error=>operation: 請(qǐng)重新輸入
end=>end: 結(jié)束

start->input
input->operation
operation->condition
condition(no,bottom)->output
condition(yes)->error(top)->input
output->end

效果還不錯(cuò)修陡，接下來讓我們一起學(xué)習(xí)一下MarkDown的flow有哪些語法

定義元素

定義元素的語法是

元素ID=>元素類型: 展示文字

• 注意元素類型和展示文字中間有一個(gè)空格，這個(gè)空格是必須有的可霎，否則會(huì)出錯(cuò)魄鸦。

1.元素ID在連接各個(gè)元素時(shí)會(huì)用到。

2.元素類型包括以下幾種：

startID=>start: 開始框
inputoutputID=>inputoutput: 輸入輸出框
operationID=>operation: 操作框
conditionID=>condition: 條件框
subroutineID=>subroutine: 子流程
endID=>end: 結(jié)束框

startID->inputoutputID->operationID->conditionID
conditionID(no)->subroutineID
conditionID(yes)->endID

顯示效果如下：

元素類型

3.顯示文字就是框中的文字癣朗，中英文均可拾因。

連接元素

1.通過ID引用元素，再用->連接各個(gè)元素斯棒，可以不斷連綴盾致，也可以分開連接，如上例中的：

startID->inputoutputID->operationID->conditionID(yes)->endID

也可以寫成：

startID->inputoutputID
inputoutputID->operationID
operationID->conditionID
conditionID(yes)->endID

2.條件框的連接有些特殊荣暮，需要添加(yes)或者(no)，表示是和否的分支罩驻。例如：

startID=>start: 開始框
operationID=>operation: 操作框
conditionID=>condition: 條件框
endID=>end: 結(jié)束框

startID->operationID->conditionID
conditionID(no)->operationID
conditionID(yes)->endID

顯示如下：

條件示例

3.連接線有上下左右四個(gè)方向穗酥，如果需要指定連接線連接到某一特定方向，在連接線開始的元素后面添加方向即可惠遏，方向包括：

(top)
(bottom)
(left)
(right)

每條連接線方向默認(rèn)為(bottom)砾跃。

例如：設(shè)置連接線方向?yàn)橄蜃螅?/p>

start=>start: 開始
operation1=>operation: 操作框1
operation2=>operation: 操作框2
end=>end: 結(jié)束
start->operation1(left)->operation2->end

顯示如下：

連接線向左

設(shè)置連接線向右：

start=>start: 開始
operation1=>operation: 操作框1
operation2=>operation: 操作框2
end=>end: 結(jié)束
start->operation1(right)->operation2->end

顯示如下：

連接線向右

4.如果要設(shè)置條件框連接線方向，在括號(hào)中添加即可节吮。條件框只有兩個(gè)方向可供選擇：

• yes向下抽高，no向右（默認(rèn)）
• yes向右，no向下透绩。通過以下方式指定：

conditionID(yes,right)

或

conditionID(no,bottom)

只需要指定其中一條分支的方向即可翘骂。
例如：

start=>start: 開始
condition=>condition: 條件框
operation1=>operation: 操作框1
operation2=>operation: 操作框2
end=>end: 結(jié)束
start->condition
condition(yes,right)->operation1
condition(no)->operation2
operation1->end
operation2->end

顯示如下：

條件框yes向右

Hey Jude 2.0

同上一篇文章一樣壁熄，我們來畫一個(gè)Hey Jude流程圖，語法如下：

start=>start: Start
end=>end: End
heyJude=>operation: hey Jude
doNot=>operation: don't
makeItBad=>condition: make it bad
beAfraid=>condition: be afraid
letMeDown=>condition: let me down
takeASadSong=>operation: take a sad song and make it better
youWereMade=>operation: you were made to go out and get her
youHaveFound=>operation: you have found her, now go and get her
rememberTo=>operation: remember to
letHerInto=>condition: let her into your heart
letHerUnder=>operation: let her under your skin
thenYou=>operation: then you
canStart=>condition: can start
begin=>operation: begin
toMakeItBetter=>operation: to make it better
betterbetter=>operation: better better better better better waaaaa
na=>operation: na

start->heyJude->doNot->end
doNot->makeItBad
makeItBad(no)->beAfraid
beAfraid(no)->letMeDown
makeItBad(yes)->takeASadSong
beAfraid(yes)->youWereMade
letMeDown(yes)->youHaveFound
takeASadSong->rememberTo
youWereMade->rememberTo
youHaveFound->rememberTo
rememberTo->letHerInto
letHerInto(no)->letHerUnder
letHerInto(yes)->thenYou
letHerUnder->thenYou
thenYou->canStart
canStart(no)->begin
canStart(yes)->toMakeItBetter
begin->toMakeItBetter
toMakeItBetter->betterbetter
betterbetter->na
na->end

效果圖如下：

Hey Jude 2.0

效果不可描述...
筆者在網(wǎng)上看到的原圖是這樣的：

Hey Jude原版

好了，關(guān)于MarkDown flow流程圖學(xué)習(xí)就到這里莹桅。