一个计算机技术爱好者与学习者

0%

好好学Hexo：Markdown使用Mermaid绘图入门篇

发表于 分类于 ，

1. 前言

Mermaid是一种用于描述图表的文本语言，它支持多种图表类型，如流程图、序列图、甘特图等。通过简单的文本描述，就可以生成复杂的图表，而不需要手动绘制。

Mermaid可以与Markdown结合使用，方便快捷地在文档中插入图表。本文将介绍如何使用Mermaid语言在Markdown文档中绘制各种类型的图表。

参考文档：

2. 安装与配置

Mermaid通常不需要额外的安装，因为它是在浏览器中渲染的。
想要在Markdown中使用Mermaid语言，需要Markdown编辑器支持Mermaid语法，并启用了Mermaid渲染插件。

3. 在Markdown中插入Mermaid图表

在Markdown文档中插入Mermaid图表非常简单。只需使用三个反引号（```）将Mermaid代码块括起来，并在反引号后指定Mermaid语言。

4. Hexo Next主题启用Mermaid

参考文档：

1、安装 hexo-filter-mermaid-diagrams 插件

1
npm install hexo-filter-mermaid-diagrams --save

2、Next主题启用Mermaid

1
2
3
4
5
# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: default

具体修改参考next主题修改commit/0790595d。

5. 绘制图表

5.1. 绘制流程图

流程图是描述流程、决策和步骤的图表。以下是一个简单的流程图示例：

1
2
3
graph LR
    A[开始] --> B[中间步骤]
    B --> C[结束]

上述代码使用Mermaid语法绘制了一个由三个节点组成的流程图。

graph LR
    A[开始] --> B[中间步骤]
    B --> C[结束]

5.2. 绘制序列图

序列图用于展示多个参与者之间的交互过程。以下是一个简单的序列图示例：

1
2
3
4
5
sequenceDiagram
    participant Alice
    participant Bob
    Alice ->> Bob: 你好，Bob！
    Bob -->> Alice: 你好，Alice！

上述代码使用Mermaid语法绘制了Alice和Bob之间的简单交互过程。

sequenceDiagram
    participant Alice
    participant Bob
    Alice ->> Bob: 你好，Bob！
    Bob -->> Alice: 你好，Alice！

5.3. 绘制甘特图

甘特图用于展示任务的时间轴和进度。以下是一个简单的甘特图示例：

1
2
3
4
5
6
7
8
9
gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 项目A
    任务1      :a1, 2023-08-01, 7d
    任务2      :after a1, 3d
    section 项目B
    任务3      :2023-08-10, 5d
    任务4      :2023-08-15, 4d

上述代码使用Mermaid语法绘制了一个包含两个项目的甘特图，每个项目有多个任务。

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 项目A
    任务1      :a1, 2023-08-01, 7d
    任务2      :after a1, 3d
    section 项目B
    任务3      :2023-08-10, 5d
    任务4      :2023-08-15, 4d

5.4. 高级用法与样式

Mermaid支持许多高级用法和样式设置，例如节点样式、连接线样式、图表方向等。更多信息请参考Mermaid官方文档。

6. 小结

通过Mermaid语言，我们可以在Markdown文档中轻松绘制流程图、序列图、甘特图等各种类型的图表。只需按照本教程的指导，使用Mermaid语法编写图表代码，并确保我们的Markdown编辑器支持Mermaid渲染，即可轻松创建复杂的图表内容。