一个markdown-it插件,用于在 markdown 文档中插入 git graph
npm install markdown-it-git-graphimportMarkdownItfrom'markdown-it'import{gitGraphPlugin}from'markdown-it-git-graph'constmd=newMarkdownIt().use(gitGraphPlugin)consttext=md.render(`\`\`\`git-graph[main]8991ab29<ab315c05 'merge feature/dev_1' 2025-02-029091ab29 'add help.md' 2025-02-03d920f7c1 'add README.md' 2025-02-01c72b76ef 'init repo' 2025-02-01[feature/dev_1]ab315c05 'update index.md' 2025-02-03910f0f0f 'something' 2025-02-030c5c0c05<d920f7c1 'add index.md' 2025-02-02[feature/dev_2]872ac0c0 'do something' 2025-02-08bb38a909 'do something' 2025-02-02ba7c7c7c<9091ab29 'add test.md' 2025-02-02[feature/dev_3]0c5c9005 'add git.md' 2025-02-070c820c05<d920f7c1 'add svg.md' 2025-02-01\`\`\``)使用```git-graph标注代码块,然后再代码块中,上面的结果示例:
使用中括号指定分支名称,若不指定默认名称为 main,分支名称占一行,commit信息需要另起一行。
```git-graph
[main]
commit1 something
[dev]
commit2 something
```
提交信息分三段,以空格分隔。第一段为提交hash值,或者唯一id,第二段为提交信息,第三段为提交时间,时间可以不添加,默认为0。
hash: 提交的hash值,或者当前代码块内唯一id,字符串类型,如果需要包含空格需要将整个hash段用单引号包裹。
message: 提交的信息,字符串类型,如果需要包含空格需要将整个message段用引号包裹。
time: 提交的时间,毫秒值,整数,或者可以通过
Date.parse('2025-05-24')解析的时间格式,默认为0。
```git-graph
commit1 'this is a commit message' 78968
commit2 'this is a commit message' 2025-05-24
```
在hash段指定合并记录,格式为hash1<hash2,表示hash1所在的分支合并了hash2。 例如:下面的示例中,main分支合并了dev分支的代码,创建了8991ab29这个合并记录。同时也表示8991ab29是由ab315c05和9091ab29两个提交合并而来的。结果展示如图所示。
```git-graph
[main]
8991ab29<ab315c05 'merge feature/dev_1' 2025-02-02
9091ab29 'add help.md' 2025-02-03
d920f7c1 'add README.md' 2025-02-01
c72b76ef 'init repo' 2025-02-01
[feature/dev_1]
ab315c05 'update index.md' 2025-02-03
910f0f0f 'something' 2025-02-03
0c5c0c05 'add index.md' 2025-02-02
```
新建分支,并在新分支上提交一个提交记录,那么这个提交记录我们可以看作是上游分支与空分支的合并的结果,所以格式和合并记录一样,hash1<hash2。例如:下面的示例中dev分支从main分支的d920f7c1提交记录创建。
```git-graph
[main]
8991ab29<ab315c05 'merge feature/dev_1' 2025-02-02
9091ab29 'add help.md' 2025-02-03
d920f7c1 'add README.md' 2025-02-01
c72b76ef 'init repo' 2025-02-01
[feature/dev_3]
0c5c9005 'add git.md' 2025-02-07
0c820c05<d920f7c1 'add svg.md' 2025-02-01
```
| 参数 | 类型 | 描述 |
|---|---|---|
| defaultBranchName | string | 默认分支名称 |
| theme | SvgTheme | Svg主题设置 |
| theme.colors | string[] | 颜色列表,优先使用的颜色列表,分支数超出时,使用随机颜色 |
| theme.lineHeight | number | 每条提交信息的展示高度,默认 24 |
| theme.lineWidth | number | 分支线间距,默认 20 |
| theme.pointRadius | number | 点半径,默认 5 |
| theme.dateFormat | Intl.DateTimeFormatOptions | 日期格式 |
| theme.columns | ('hash' | 'message' |
constmd=MarkdownIt().use(GitGraphPlugin,{defaultBranchName: 'main',theme: {colors: ['#e6194b','#ffe119','#4363d8','#3cb44b','#f58231','#911eb4','#46f0f0','#f032e6','#bcf60c','#fabebe','#008080','#e6beff',],lineHeight: 24,lineWidth: 20,pointRadius: 5,columns: ['message','date','hash'],dateFormat: {dateStyle: 'short',timeStyle: 'short',},}})对于每个图块,可以在其内部添加配置项。配置项对于该图块有效,将覆盖全局配置。
```git-graph colors=#e6194b,#ffe119&columns=message,hash
[main]
8991ab29<ab315c05 'merge feature/dev_1' 2025-02-02
9091ab29 'add help.md' 2025-02-03
d920f7c1 'add README.md' 2025-02-01
c72b76ef 'init repo' 2025-02-01
[feature/dev_1]
ab315c05 'update index.md' 2025-02-03
910f0f0f 'something' 2025-02-03
0c5c0c05<d920f7c1 'add index.md' 2025-02-02
[feature/dev_2]
872ac0c0 'do something' 2025-02-08
bb38a909 'do something' 2025-02-02
ba7c7c7c<9091ab29 'add test.md' 2025-02-02
[feature/dev_3]
0c5c9005 'add git.md' 2025-02-07
0c820c05<d920f7c1 'add svg.md' 2025-02-01
```
需要引入样式文件或者直接添加样式到页面中,否则样式会丢失。例如在vitepress中引入样式
importtype{Theme}from'vitepress'importDefaultThemefrom'vitepress/theme'import'markdown-it-git-graph/styles/index.css'exportdefault<Theme>{extends: DefaultTheme,enhanceApp: async()=>{},}


