npm 包 gitbook-plugin-graph 使用教程

1. gitbook-plugin-graph 简介

gitbook-plugin-graph 是一个能够集成 mermaid 和 flowchart.js 的插件，可用于生成流程图、状态转换图、时序图等图表，非常适合前端开发工程师在使用 gitbook 进行文档编写时引用。

2. 环境准备

在开始安装 gitbook-plugin-graph 之前，您需要先安装好 gitbook 和 mermaid，具体安装方法如下：

2.1 安装 gitbook

--- ------- -- -----------

2.2 安装 mermaid

--- ------- -- -------

3. 安装 gitbook-plugin-graph

在安装 gitbook-plugin-graph 之前，您需要先创建一个 gitbook 项目：

------- ----

接下来，你可以通过以下命令安装 gitbook-plugin-graph：

--- ------- ------ --------------------

4. 使用 gitbook-plugin-graph

1. 在您的 gitbook 项目中，创建一个 Markdown 文件，并在文件中编写 mermaid 代码。

2. 运行 gitbook serve，访问 localhost:4000，您将看到生成的图表。

下面以生成一个简单的流程图为例：

4.1 编写 mermaid 代码

----------
----- --
----- --- --------
- --- -----
- --- -------
- --- -

--- --- - ------- ---

--- ------- -------------------

{% mermaid %} graph LR A[方形] --> B(圆角长方形) B --> C{菱形} C --> D((圆形)) D --> A {% endmermaid %}

--- --- -- ------- -----

------------- --------

gitbook serve

-------- ---------------------------------------

-- -- --

--------- ------- --- ------------------------------------------------------

---------------------------------------

------------------------------------------------------------------------------ ----------
-----------------------------------------------------------------------------------------------------------------------------