marloxo/mermaid

compile-mermaid-markdown-action (beta)

概述

Markdown是一种通过简单易读的语法呈现丰富格式信息的常用方式，尤其适合突出显示代码块。https://mermaid-js.github.io/mermaid/%E9%81%B5%E5%BE%AA%E8%BF%99%E4%B8%80%E7%90%86%E5%BF%B5%EF%BC%8C%E5%B0%86%E7%AE%80%E5%8D%95%E7%9A%84%E4%BA%BA%E7%B1%BB%E5%8F%AF%E8%AF%BB%E8%AF%AD%E6%B3%95%E8%BD%AC%E6%8D%A2%E4%B8%BA%E4%B8%B0%E5%AF%8C%E7%9A%84%E5%9B%BE%E8%A1%A8%E3%80%82%E7%94%B1%E4%BA%8EGitHub Markdown不会自动在浏览器中渲染Mermaid图表，此Action旨在解决这一问题，让用户专注于Markdown内容而非工具链。

核心功能与特性

• 自动将Markdown文件中的Mermaid语法编译为图像
• 支持集成到GitHub工作流中，实现自动化处理
• 可指定需要处理的文件和输出目录
• 提供环境变量配置，如隐藏代码块、使用绝对图像链接等

使用场景与适用范围

适用于需要在GitHub Markdown文档中展示Mermaid图表的项目，特别是：

• 技术文档维护者，希望自动将Mermaid语法转换为可直接显示的图像
• 团队协作项目，需要通过工作流自动化处理文档中的图表
• 希望简化Mermaid图表渲染流程，避免手动处理的场景

使用方法与配置说明

该Action需在GitHub工作流中使用，以下是两种常见使用场景的示例配置：

示例1：带自动拉取请求的工作流

（改编自https://github.com/neenjaw/mermaid-markdown-test%EF%BC%89

yaml
name: 'Compile Mermaid'

on:
  push:
    paths:
      - '**/*.mermaid'
      - '**/*.md'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        fetch-depth: 2
    - name: 获取更改的文件
      id: getfile
      run: |
        echo "::set-output name=files::$(git diff-tree --no-commit-id --name-only -r ${{ github.sha }} | grep -e '.*\.md

### 示例2：直接推送更改的工作流

```yaml
name: '在Markdown中编译Mermaid'

on:
  push:
    paths:
      - '**/*.md'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        fetch-depth: 2

    - name: 获取更改的文件
      id: getfile
      run: |
        echo "::set-output name=files::$(git diff-tree --no-commit-id --name-only -r ${{ github.sha }} | grep -e '.*\.md

## 配置参数说明

### 输入参数（with）
- `files`：需要处理的文件路径，通常通过步骤输出获取更改的文件
- `output`：图像输出目录，默认为当前目录

### 环境变量（env）
- `HIDE_CODEBLOCKS`：设为1时隐藏原始Mermaid代码块，默认为0（显示）
- `ABSOLUTE_IMAGE_LINKS`：设为1时使用绝对图像链接，默认为0（相对链接）

## 贡献方式

欢迎提出改进建议或帮助完善此Action。如有需要的功能或遇到的bug，请反馈以共同改进。 -e '.*\.mermaid

### 示例2：直接推送更改的工作流

__CODE_TOKEN_1__

## 配置参数说明

### 输入参数（with）
- __CODE_TOKEN_2__：需要处理的文件路径，通常通过步骤输出获取更改的文件
- __CODE_TOKEN_3__：图像输出目录，默认为当前目录

### 环境变量（env）
- __CODE_TOKEN_4__：设为1时隐藏原始Mermaid代码块，默认为0（显示）
- __CODE_TOKEN_5__：设为1时使用绝对图像链接，默认为0（相对链接）

## 贡献方式

欢迎提出改进建议或帮助完善此Action。如有需要的功能或遇到的bug，请反馈以共同改进。 | xargs)"

    - name: 显示更改的Mermaid文件
      run: |
        echo ${{ steps.getfile.outputs.files }}

    - name: 编译Mermaid
      uses: neenjaw/compile-mermaid-markdown-action@0.2.3
      with:
        files: ${{ steps.getfile.outputs.files }}  # 需要处理的文件
        output: 'output'  # 图像输出目录
      env:
        HIDE_CODEBLOCKS: 1  # 隐藏原始Mermaid代码块
        ABSOLUTE_IMAGE_LINKS: 1  # 使用绝对图像链接

    - name: 显示更改
      run: |
        git status

    - name: 创建拉取请求
      id: cpr
      uses: peter-evans/create-pull-request@v2
      with:
        token: ${{ secrets.GITHUB_TOKEN }}
        commit-message: 添加编译后的Mermaid图像
        title: '[MMDC] 新Mermaid文件已编译'
        body: |
          - 由[create-pull-request][1]自动生成

          [1]: https://github.com/peter-evans/create-pull-request
        labels: report, automated pr
        assignees: ${{ github.actor }}
        reviewers: ${{ github.actor }}
    - name: 检查输出
      run: |
        echo "拉取请求编号 - ${{ env.PULL_REQUEST_NUMBER }}"
        echo "拉取请求编号 - ${{ steps.cpr.outputs.pr_number }}"

示例2：直接推送更改的工作流

CODE_TOKEN_1

配置参数说明

输入参数（with）

• CODE_TOKEN_2：需要处理的文件路径，通常通过步骤输出获取更改的文件
• CODE_TOKEN_3：图像输出目录，默认为当前目录

环境变量（env）

• CODE_TOKEN_4：设为1时隐藏原始Mermaid代码块，默认为0（显示）
• CODE_TOKEN_5：设为1时使用绝对图像链接，默认为0（相对链接）

贡献方式

欢迎提出改进建议或帮助完善此Action。如有需要的功能或遇到的bug，请反馈以共同改进。 | xargs)"

- name: 显示更改的Markdown文件
  run: |
    echo ${{ steps.getfile.outputs.files }}

- name: 编译Mermaid
  uses: neenjaw/compile-mermaid-markdown-action@0.2.3
  with:
    files: ${{ steps.getfile.outputs.files }}  # 需要处理的Markdown文件
    output: '.resources'  # 图像输出目录（隐藏目录）
  env:
    HIDE_CODEBLOCKS: 1  # 隐藏原始Mermaid代码块
    ABSOLUTE_IMAGE_LINKS: 1  # 使用绝对图像链接

- name: 显示更改
  run: |
    git status

- name: 提交文件
  run: |
    git config --local user.email "action@github.com"
    git config --local user.name "GitHub Action"
    git commit -m "添加更改" -a

- name: 推送更改
  uses: ad-m/github-push-action@master
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}

## 配置参数说明

### 输入参数（with）
- __CODE_TOKEN_2__：需要处理的文件路径，通常通过步骤输出获取更改的文件
- __CODE_TOKEN_3__：图像输出目录，默认为当前目录

### 环境变量（env）
- __CODE_TOKEN_4__：设为1时隐藏原始Mermaid代码块，默认为0（显示）
- __CODE_TOKEN_5__：设为1时使用绝对图像链接，默认为0（相对链接）

## 贡献方式

欢迎提出改进建议或帮助完善此Action。如有需要的功能或遇到的bug，请反馈以共同改进。 -e '.*\.mermaid

### 示例2：直接推送更改的工作流

__CODE_TOKEN_1__

## 配置参数说明

### 输入参数（with）
- __CODE_TOKEN_2__：需要处理的文件路径，通常通过步骤输出获取更改的文件
- __CODE_TOKEN_3__：图像输出目录，默认为当前目录

### 环境变量（env）
- __CODE_TOKEN_4__：设为1时隐藏原始Mermaid代码块，默认为0（显示）
- __CODE_TOKEN_5__：设为1时使用绝对图像链接，默认为0（相对链接）

## 贡献方式

欢迎提出改进建议或帮助完善此Action。如有需要的功能或遇到的bug，请反馈以共同改进。 | xargs)"

    - name: 显示更改的Mermaid文件
      run: |
        echo ${{ steps.getfile.outputs.files }}

    - name: 编译Mermaid
      uses: neenjaw/compile-mermaid-markdown-action@0.2.3
      with:
        files: ${{ steps.getfile.outputs.files }}  # 需要处理的文件
        output: 'output'  # 图像输出目录
      env:
        HIDE_CODEBLOCKS: 1  # 隐藏原始Mermaid代码块
        ABSOLUTE_IMAGE_LINKS: 1  # 使用绝对图像链接

    - name: 显示更改
      run: |
        git status

    - name: 创建拉取请求
      id: cpr
      uses: peter-evans/create-pull-request@v2
      with:
        token: ${{ secrets.GITHUB_TOKEN }}
        commit-message: 添加编译后的Mermaid图像
        title: '[MMDC] 新Mermaid文件已编译'
        body: |
          - 由[create-pull-request][1]自动生成

          [1]: https://github.com/peter-evans/create-pull-request
        labels: report, automated pr
        assignees: ${{ github.actor }}
        reviewers: ${{ github.actor }}
    - name: 检查输出
      run: |
        echo "拉取请求编号 - ${{ env.PULL_REQUEST_NUMBER }}"
        echo "拉取请求编号 - ${{ steps.cpr.outputs.pr_number }}"

示例2：直接推送更改的工作流

CODE_TOKEN_1

配置参数说明

输入参数（with）

• CODE_TOKEN_2：需要处理的文件路径，通常通过步骤输出获取更改的文件
• CODE_TOKEN_3：图像输出目录，默认为当前目录

环境变量（env）

• CODE_TOKEN_4：设为1时隐藏原始Mermaid代码块，默认为0（显示）
• CODE_TOKEN_5：设为1时使用绝对图像链接，默认为0（相对链接）

贡献方式

欢迎提出改进建议或帮助完善此Action。如有需要的功能或遇到的bug，请反馈以共同改进。