1. gitbook-plugin-graph 简介
gitbook-plugin-graph 是一个能够集成 mermaid 和 flowchart.js 的插件，可用于生成流程图、状态转换图、时序图等图表，非常适合前端开发工程师在使用 gitbook 进行文档编写时引用。
2. 环境准备
在开始安装 gitbook-plugin-graph 之前，您需要先安装好 gitbook 和 mermaid，具体安装方法如下：
2.1 安装 gitbook
npm install -g gitbook-cli
2.2 安装 mermaid
npm install -g mermaid
3. 安装 gitbook-plugin-graph
在安装 gitbook-plugin-graph 之前，您需要先创建一个 gitbook 项目：
gitbook init
接下来，你可以通过以下命令安装 gitbook-plugin-graph：
npm install --save gitbook-plugin-graph
4. 使用 gitbook-plugin-graph
在您的 gitbook 项目中，创建一个 Markdown 文件，并在文件中编写 mermaid 代码。
运行 gitbook serve，访问 localhost:4000，您将看到生成的图表。
下面以生成一个简单的流程图为例：
4.1 编写 mermaid 代码
```mermaid
graph LR
A[方形] --> B(圆角长方形)
B --> C{菱形}
C --> D((圆形))
D --> A### 4.2 在 gitbook 中引用 在您的 Gitbook 文档中，通过以下方式引用上面的流程图：
{% mermaid %} graph LR A[方形] --> B(圆角长方形) B --> C{菱形} C --> D((圆形)) D --> A {% endmermaid %}
### 4.3 运行 gitbook serve 在本地使用以下命令运行你的 Gitbook：
gitbook serve
-- -------------------- ---- ------- -------- --------------------------------------- -- -- -- --------- ------- --- ------------------------------------------------------ --------------------------------------- - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------