利用Mermaid實現流程圖優化

流程圖一種可以將複雜的流程圖形化的方式，可讀性強，易於理解，很適合對於複雜的業務流程，演算法流程，以及商業流程進行圖形化展示。Mermaid是一套比較流行的用於生成流程圖的JavaScript庫，支持多種語言的流程圖形式，包括甘特圖、時序圖、類圖、狀態圖等等，而且Mermaid生成的流程圖不用類似於visio等商業軟體，則更加輕量、簡單。

一、優點

1、Mermaid生成的流程圖不用類似於visio等商業軟體，則更加輕量、簡單。

2、Mermaid支持的語言種類眾多，可以滿足幾乎所有的流程圖需求。

3、Mermaid生成的流程圖可以直接以代碼形式進行編輯，便於團隊協作以及版本管理。

4、Mermaid可以配合Markdown等文本編輯器使用，提升文本可讀性。

二、用法示例

下面以一個簡單的甘特圖為例，展示Mermaid的用法

<div class="mermaid">
 gantt
 dateFormat YYYY-MM-DD
 title 項目計劃表

 section 設計
 設計概念 :done, des1, 2020-01-01,2020-01-10
 設計藍圖 :done, des2, 2020-01-11,2020-02-02
 設計開發 :des3, 2020-02-03, 20d

 section 實施
 概念驗證 :crit, done, 2020-02-06,24h
 系統開發 :active, 2020-02-07, 30d
 系統集成和測試 :2020-03-10, 20d
 系統發布 :2020-03-19, 5d

 section 維護與支持
 用戶培訓 :2020-03-23, 1d
 操作文檔 :20d
 支持和維護 :2020-04-08, 365d
 任務清單:2022-01-01, 365d
</div>

以上代碼將會生成如下一個甘特圖

gantt
dateFormat YYYY-MM-DD
title 項目計劃表

section 設計
設計概念 :done, des1, 2020-01-01,2020-01-10
設計藍圖 :done, des2, 2020-01-11,2020-02-02
設計開發 :des3, 2020-02-03, 20d

section 實施
概念驗證 :crit, done, 2020-02-06,24h
系統開發 :active, 2020-02-07, 30d
系統集成和測試 :2020-03-10, 20d
系統發布 :2020-03-19, 5d

section 維護與支持
用戶培訓 :2020-03-23, 1d
操作文檔 :20d
支持和維護 :2020-04-08, 365d
任務清單:2022-01-01, 365d