Markdown之流程圖

## 流程圖

一段流程圖語法以 “``` 開頭，以 “``` 結(jié)尾

graph XX（XX表示流程圖類型）,分橫向和豎向兩大類

```
graph LR
節(jié)點1(節(jié)點1名稱)-->節(jié)點2(節(jié)2點名稱)
節(jié)點1(節(jié)點1哈哈)
```

如上其中：

> graph表示這是一個流程圖

> LR表示流程圖類型

> 節(jié)點1和節(jié)點2表示流程圖中的節(jié)點Id,每個節(jié)點Id唯一的且對應(yīng)各自的對外顯示的名稱，如果不顯式指定節(jié)點名稱默認(rèn)顯示節(jié)點Id。同一節(jié)點Id的多個定義為最后一行定義的生效

```
graph LR
節(jié)點1(節(jié)點1名稱1)-->節(jié)點2(節(jié)2點名稱)
節(jié)點1(節(jié)點1名稱2)
節(jié)點1{節(jié)點1名稱3}
```

> -->表示節(jié)點的流程線

#### 流程圖類型

> 豎向分位上（graph TB）和下（graph BT）

```
graph TB
節(jié)點1-->節(jié)點2
```
```
graph BT
節(jié)點1-->節(jié)點2
```

> 橫向分位左（graph RL）和右（graph LR）

```
graph LR
節(jié)點1-->節(jié)點2
```
```
graph RL
節(jié)點1-->節(jié)點2
```

TB - top bottom（自上而下）
BT - bottom top（自下而上）
RL - right left（從右到左）
LR - left right（從左到右）
TD - 與TB相同（自上而下）

```
graph TD
節(jié)點1-->節(jié)點2
```

#### 流程圖框線

> []:直角四邊形，處理框

```
graph LR
節(jié)點1[處理1]-->節(jié)點2[處理2]
```

> ():圓角四邊形，起止框

```
graph LR
節(jié)點1(開始)-->節(jié)點2(結(jié)束)
```

> (()):圓形，連接點

```
graph LR
節(jié)點1((連接1))-->節(jié)點2((連接2))
```

> {}:棱形，判斷框

```
graph LR
節(jié)點1{判斷1}-->節(jié)點2{判斷2}
```

> >]:折角

```
graph LR
節(jié)點1>描述1]-->節(jié)點2>描述2]
```

#### 流程線

> ---:無流向?qū)嵕€和-.-:虛線

```
graph LR
節(jié)點1---節(jié)點2
節(jié)點1-.-節(jié)點2
```

> ==>:無流向粗線

```
graph LR
節(jié)點1===節(jié)點2
節(jié)點1===|流程|節(jié)點2
節(jié)點1==流程===節(jié)點2
```

> ---||或 -- ---:無流向?qū)嵕€添加文本

> -.->||或 -. -.->:無流向虛線添加文本

```
graph LR
節(jié)點1---|流程1|節(jié)點2
節(jié)點1--流程2---節(jié)點2
節(jié)點1-.-|流程3|節(jié)點2
節(jié)點1-.流程4-.-節(jié)點2
```

> -->:流向?qū)嵕€和-.->:流向虛線

```
graph LR
節(jié)點1-->節(jié)點2
節(jié)點1-.->節(jié)點2
```

> ===:流向粗線

```
graph LR
節(jié)點1==>節(jié)點2
節(jié)點1==流程==>節(jié)點2
節(jié)點1==>|流程|節(jié)點2
```

> -->||或 -- --?:流向?qū)嵕€添加文本

> -.->||或 -. -.->:流向虛線添加文本

```
graph LR
節(jié)點1-->|流程1|節(jié)點2
節(jié)點1--流程2-->節(jié)點2
節(jié)點1-.->|流程3|節(jié)點2
節(jié)點1-.流程4-.->節(jié)點2
```

> 如果文本中包含特殊字符，需要使用雙引號

```
graph LR
節(jié)點1["節(jié)點1 名稱"]-->節(jié)點2["節(jié)點2 名稱"]
節(jié)點1["節(jié)點1 名稱"]-->節(jié)點3["這是 (節(jié)點3)#9829;"]
```

#### 子圖

```
graph LR
子圖1節(jié)點1[A1]-->子圖2節(jié)點2[子圖2節(jié)點2]
子圖3節(jié)點1[A1]-->子圖1節(jié)點2[子圖2節(jié)點2]
subgraph 子圖1
子圖1節(jié)點1[子圖1節(jié)點1]-->子圖1節(jié)點2[子圖1節(jié)點2]
end
subgraph 子圖2
子圖2節(jié)點1[子圖2節(jié)點1]-->子圖2節(jié)點2[子圖2節(jié)點2]
end
subgraph 子圖3
子圖3節(jié)點1[子圖3節(jié)點1]-->子圖3節(jié)點2[子圖3節(jié)點2]
end
```

### 交互功能

增加事件

> click nodeId callback

```
graph LR
節(jié)點1-->節(jié)點2
click 節(jié)點1 callback "提示框"
click 節(jié)點2 "http://www.github.com" "github地址"
```

增加樣式

```
graph LR
節(jié)點1(開始)-->節(jié)點2(結(jié)束)
style 節(jié)點1 fill:#f9f,stroke:#333,stroke-width:4px
style 節(jié)點2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
```

云筆記中更詳細(xì)的流程圖語法，是參考（有些特性并沒有支持）：https://mermaidjs.github.io/flowchart.html。

s2flowchart 是一個可視化庫，可將任何JavaScript代碼轉(zhuǎn)換為漂亮的SVG流程圖。你可以輕松地利用它學(xué)習(xí)其他代碼、設(shè)計你的代碼、重構(gòu)代碼、解釋代碼。這樣一個強大的神器，真的值得你擁有，看下面截圖就知道了，有沒有很強大。

Github

安裝使用

安裝

yarn add js2flowchart

使用

index.html

index.js

我們直接在文本域中輸入自己的代碼，如下，左邊會直接生成流程圖，這只是一個簡單的示例：

js2flowchart的特性以及適用場景（來自官網(wǎng)翻譯）

js2flowchart獲取您的JS代碼并返回SVG流程圖，適用于客戶端/服務(wù)器，支持ES6。

主要特點：

定義抽象級別以僅渲染導(dǎo)入/導(dǎo)出，類/函數(shù)名稱，函數(shù)依賴性以逐步學(xué)習(xí)/解釋代碼。
自定義抽象級別支持創(chuàng)建自己的抽象級別
表示生成器，以生成不同抽象級別的SVG列表
定義流樹修改器以映射眾所周知的API，例如 .map，。forEach， .filter到方案上的循環(huán)結(jié)構(gòu)等。
銷毀修飾符，用于在方案上用一個形狀替換代碼塊
自定義流樹修改器支持創(chuàng)建自己的流修改器
流樹忽略過濾器完全省略一些代碼節(jié)點，如日志行
聚焦節(jié)點或整個代碼邏輯分支突出顯示方案的重要部分
模糊節(jié)點或整個代碼邏輯分支以隱藏不太重要的東西
定義的樣式主題支持選擇您喜歡的樣式
自定義主題支持創(chuàng)建自己的主題，更好地適合您的上下文顏色
自定義顏色和樣式支持提供方便的API來更改特定樣式而無需樣板

用例場景：

通過流程圖解釋/記錄您的代碼
通過視覺理解學(xué)習(xí)其他代碼
為有效JS語法簡單描述的任何進(jìn)程創(chuàng)建流程圖

以上所有功能可以直接到github上詳細(xì)了解，用法太多，這里就不在介紹了！

vscode擴(kuò)展

這么強大的東西，有人肯定說如果在開發(fā)的時候?qū)崟r看到流程圖有助于理解代碼，官網(wǎng)提供了插件（我在最新版中測試失效了，不知道是否是我使用的有問題還是插件本身的問題），如果感興趣的可以到擴(kuò)展商店搜索code-flowchart。如果測試成功，歡迎到評論區(qū)分享。以下是我vscode版本和官網(wǎng)的插件使用截圖。

如果利用好這個插件，可以開發(fā)出Chrome插件，以及其他JavaScript編輯器或者IDEA的插件，由于官方github已經(jīng)幾個月沒更新了，所以還不知道未來會不會支持！

來都來了，走啥走，留個言唄~

IT大咖說 | 關(guān)于版權(quán)

由“IT大咖說（ID：itdakashuo）”原創(chuàng)的文章，轉(zhuǎn)載時請注明作者、出處及微信公眾號。投稿、約稿、轉(zhuǎn)載請加微信：ITDKS10（備注：投稿），茉莉小姐姐會及時與您聯(lián)系！

感謝您對IT大咖說的熱心支持！

相關(guān)推薦

推薦文章
據(jù)說這份高考卷，只有程序員能得滿分！
干貨分享：一次Java內(nèi)存泄漏排查實戰(zhàn)
這個程序員實在是太帥了

最近活動
融云微課堂
線下活動 | Apache Flink 1.9 版本即將發(fā)布，新版本有哪些新特性？
線下活動 | 阿里云實時計算專場沙龍，與你探討大數(shù)據(jù)實時計算的解決方案

點擊【閱讀原文】更多IT技術(shù)圈干貨等你挖掘

閱讀原文

人人都是產(chǎn)品經(jīng)理【起點學(xué)院】，BAT實戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運營。

距離上次發(fā)發(fā)帖已經(jīng)有一個多月了，本來想早點發(fā)新帖的但是各種瑣碎的事干擾，一直沒能寫帖子。對“眾云行”不了解朋友的附帶產(chǎn)品BRD連接（原文：http://www.woshipm.com/pd/321497.html）。

說起產(chǎn)品經(jīng)理的日常工作有一個很重要的點就是梳理產(chǎn)品流程。最開始接觸流程設(shè)計的時候一直搞不清楚什么是業(yè)務(wù)流程，操作流程，頁面流程以及這三者的關(guān)系。經(jīng)過系統(tǒng)研究后得出些心得，和小伙伴們分享下，如有哪里錯誤還請指出，感謝糾正！！！

第一部分：名詞解釋

業(yè)務(wù)流程：

也有人叫“功能流程”，作為梳理產(chǎn)品功能框架的依據(jù)：其實就是你要做一件事的時候一共分為幾步走，這幾步的先后順序就是業(yè)務(wù)流程。簡單舉個例子：說把大象放進(jìn)冰箱里分幾步，第一步打開冰箱門，第二步把大象放進(jìn)去，第三步關(guān)上冰箱門。轉(zhuǎn)換成流程圖如下：

操作流程：

就是你完成過每一步需要做的事情和具體怎么做，以大象放進(jìn)冰箱里的例子中的第一步打開冰箱門，為例：

動作包括：手握住冰箱門——拉動/推動冰箱門

判定條件：

確認(rèn)冰箱門是否打開，如打開直接放入大象，未打開則手握住冰箱門
確認(rèn)冰箱門是橫開或平開，橫開則橫向拉動，平開則水平拉動。

限制條件：

橫開門必須橫向拉動，平開必須水平拉動。

（關(guān)于限制條件，有的人覺得在流程圖階段不用考慮，但是我覺得在整個梳理流程的過程中最好能將考慮的細(xì)節(jié)條件都進(jìn)行標(biāo)注，這樣能夠幫助梳理頁面流程圖和整理產(chǎn)品的信息架構(gòu)，深化交互設(shè)計。）

結(jié)果條件：將門打開至足以放入大象的開口大小，未達(dá)到條件則無法進(jìn)入下一步。

轉(zhuǎn)為操作流程圖如下：

頁面流程：

就是用戶完成前兩道流程需要處于的頁面環(huán)境，在環(huán)境1中觸及到哪一個點換滿足哪些條件后，到達(dá)下一環(huán)境。還是以大象放進(jìn)冰箱的任務(wù)舉例說明:冰箱關(guān)閉，大象在冰箱外的環(huán)境：出現(xiàn)一個冰箱，單擊冰箱門打開按鈕，打開冰箱門——進(jìn)入冰箱門打開，大象在冰箱外的環(huán)境，冰箱內(nèi)部分格場景進(jìn)入眼簾，選擇合適的分格空間，把大象放進(jìn)去，——進(jìn)入冰箱門打開，大象在冰箱里的環(huán)境場景：然后單擊關(guān)閉冰箱門的按鈕，進(jìn)入大象放入冰箱后，冰箱門關(guān)閉的場景，即完成任務(wù)的場景。轉(zhuǎn)為頁面流程圖如下：

這個時候就會發(fā)現(xiàn)先前有一些流程是我們沒有考慮進(jìn)來的，例如當(dāng)冰箱內(nèi)部空間不足的時候，是需要調(diào)整冰箱內(nèi)的物品以騰出足夠的空間，還是需要調(diào)換冰箱。以及一些交互過程中需要出示的小提示頁面等（例如，冰箱空間不足提示）

繪制頁面流程圖，也是對前面操作流程和業(yè)務(wù)流程的檢驗，細(xì)化和豐富。

總結(jié)：

綜上所訴，業(yè)務(wù)流程，操作流程，是一種前后推導(dǎo)關(guān)系，業(yè)務(wù)流程作為推到操作流程的前提，操作流程作為深入細(xì)化和檢驗業(yè)務(wù)流程的工具。

頁面流程是業(yè)務(wù)流程和操作流程具體的場景體現(xiàn)，頁面流程體現(xiàn)了滿足業(yè)務(wù)流程所體現(xiàn)的功能點和信息點，以及通過操作流程所體現(xiàn)的各功能之間的關(guān)系和具體的操作方法。同時頁面流程也在不斷檢驗前兩個流程，幫助優(yōu)化流程。

在這里有一點需要提到的是，無論是業(yè)務(wù)流程圖，操作流程圖，頁面流程圖，在繪制的過程中都盡可能的表示出到達(dá)某一流程的輸入輸出條件，這樣既可以幫助后期的交互設(shè)計，也可以幫助梳理和豐富該環(huán)節(jié)的流程內(nèi)容，以及產(chǎn)品的功能架構(gòu)和信息架構(gòu)。

第二部分：眾云行案例推解，從BRD到頁面流程圖

這里以眾云行的流程為例，解釋三個流程具體的推倒思路。

第一步，細(xì)化BRD

通常情況下我們在編寫B(tài)RD的時候，會設(shè)計出產(chǎn)品大致的業(yè)務(wù)模式（初級業(yè)務(wù)流程）和涉及到的大的功能點（初級功能框架）。如圖：

（眾云行BRD中的業(yè)務(wù)模式部分）

（眾云行BRD中的功能規(guī)劃部分，現(xiàn)在看來寫的有點過了）

進(jìn)入流程設(shè)計階段（也可以說是輸出MRD文檔前的準(zhǔn)備階段）我們最先要做的是兩件事。

1. 梳理用戶，產(chǎn)品，后臺三個端口的主要功能大框和功能關(guān)系，如圖：

我將功能分為用戶端，產(chǎn)品端，后臺端三部分。用戶端：用戶在使用產(chǎn)品時需要主動獲取或操作的功能。產(chǎn)品端：產(chǎn)品自身需要為用戶呈現(xiàn)的功能。用戶端：組織支援前兩大端口功能，滿足后端運營和監(jiān)管的輔助功能。

2. 細(xì)化業(yè)務(wù)流程。這部分沒什么說的，這里需要注意的是側(cè)重點應(yīng)放在用戶完成任務(wù)需要經(jīng)過的環(huán)節(jié)，注意環(huán)節(jié)之間的邏輯和連續(xù)關(guān)系，切勿把中心放在某個具體的操作動作上。如圖：

第二步，繪制操作流程

首先是拆分業(yè)務(wù)流程，按環(huán)節(jié)特點或順序階段先后等條件，將業(yè)務(wù)流程拆分成若干個小環(huán)節(jié)。然后針對每一個小環(huán)節(jié)進(jìn)行操作流程的梳理。

個人認(rèn)為這里需要注意的是兩點：

細(xì)化各操作流程中特殊情況發(fā)生的可能性，即操作的多種方式或是發(fā)生錯誤操作時的流程關(guān)系。
是/否的判定，盡可能的去考慮一個操作開始/完成時的輸入/輸出條件。這里可以加以備注，以方便后期繪制頁面流程圖。

如圖：（以用戶發(fā)布調(diào)研任務(wù)環(huán)節(jié)為例）

第三步：流程、功能、信息三者的場景化

上文提到每一個頁面就是一個小的用戶場景，我們要設(shè)想用戶完成任務(wù)的過程中需要經(jīng)過哪些頁面，使用哪些功能，獲得哪些信息內(nèi)容。體現(xiàn)到頁面流程圖上就是每一個頁面需要呈現(xiàn)哪些信息，哪些功能點，在打擊哪些按鍵時進(jìn)入的下一個頁面是什么。

這里需要注意的就是：

簡練頁面與頁面之間的邏輯關(guān)系，精簡頁面數(shù)量，頁面數(shù)量的多少直接影響到用戶在完成任務(wù)時經(jīng)歷的操作步數(shù)的多少。
細(xì)化同一頁面內(nèi)可能存在的交互可能性，并將其表述出來。

以上兩點一方面可以幫助梳理前面的業(yè)務(wù)流程，操作流程，也可以為原型設(shè)計打好交互基礎(chǔ)。所以本人覺得在交互設(shè)計環(huán)節(jié)時考慮的交互問題，可以盡量在這一環(huán)節(jié)考慮，具體的好處有哪些有，過設(shè)計經(jīng)驗或項目管理經(jīng)驗的人應(yīng)該都會有體會。廢話不多說直接上圖：（眾云行主框架的頁面流程關(guān)系）

總結(jié)：

個人覺得流程圖部分鍛煉著產(chǎn)品經(jīng)理的邏輯思維和大腦的活躍度，想提高這部分能力可以多整理些經(jīng)典產(chǎn)品的流程部分。整理的越細(xì)致越能幫助產(chǎn)品經(jīng)理更好的完成這部分工作。

本文由 @于海洋原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

在線咨詢

上一篇：手把手教你用Python網(wǎng)絡(luò)爬蟲爬網(wǎng)頁（附代碼）
下一篇：網(wǎng)頁設(shè)計師給自己的兒子取名為“HTML”