网站更新

mermaidjs

# mermaidjs 简介

使用 mermaidjs 增加网站内容的表现力

# 安装

# 安装说明

对于 vuepress-theme-vdoing 主题而言，安装配置比较简单，但也有几个坑需要注意。

配置步骤为：

1、安装插件

VuePress 1.x 可以直接安装第三方插件 vuepress-plugin-mermaidjs (opens new window) 来渲染 Mermaid 绘图，插件的详细文档可看这里 (opens new window)。

安装插件时必须指定具体的版本号，否则默认会安装最新版本的插件，最新版本不兼容 VuePres 1.x。

npm install -D vuepress-plugin-mermaidjs@1.9.1
# 或
yarn add -D vuepress-plugin-mermaidjs@1.9.1

1
2
3

2、调整 config.js 文件内容

编辑 VuePress 1.x 的 .vuepress/config.js 配置文件，新增 mermaidjs 插件，如下所示：

module.exports = {  
    plugins: [  
        'vuepress-plugin-mermaidjs'  
    ]  
}

1
2
3
4
5

# 踩坑记录

不指定版本号，导致安装最新版本，不兼容 vuepress 1.x
安装最新版本后，卸载不干净，再安装老版本，导致 node_modules 里面内容混乱
语法与之前存在不兼容问题，需要逐一调整
注意使用代码块模式编写（推荐），方便多地方的兼容和渲染

# 使用

# 流程图

graph TB
  id1(圆角矩形)--普通线-->id2[矩形];
  subgraph 子图
   id2==粗线==>id3{菱形}
   id3-.虚线.->id4>右向旗帜]
   id3--无箭头---id5((圆形))
  end

1
2
3
4
5
6
7

# 时序图

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

1
2
3
4
5
6

# 饼图

pie
    title Key elements in Product X
    "Calculation" : 42
    "Research" : 58

1
2
3
4

# 类别图

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 甘特图

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-06-01, 30d
    Another task     :after a1  , 20d

1
2
3
4
5
6

# 状态图

stateDiagram
    [*] --> Still
    Still --> [*]
    Still : S1
    Still : S2

1
2
3
4
5

# mermaid

← callout 如何将Obsidian笔记发布到微信公众号→