Github Actionで設計図を自動でREADMEに追加する。

はじめに

drawioでAWSのインフラ構成図を書いていたのですが、これをREADMEから閲覧できるようになれば楽だなと思っていました。
しかし、拡張子drawioファイルはそのままだとREADMEに埋め込めないので画像形式にする必要がありました。
ですが、drawioファイルをいちいち画像形式に変換するのは手間になるのでGithubActionでデプロイすると自動で画像形式に変換する処理を実装しました。

GithubActionとは

GitHub Actionsは、GitHubが提供する継続的インテグレーション/継続的デリバリー（CI/CD）プラットフォームです。
これを使用することで、リポジトリ内でのイベント（例：プッシュ、プルリクエスト、リリースなど）に基づいて自動的にワークフローを実行できます。

コードの説明

まず全体像を共有します。

name: Draw.io to PNG

on:
  push:
    paths:
      - '*.drawio'
  workflow_dispatch:

permissions:
  contents: write

jobs:
  convert:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install draw.io and dependencies
        run: |
          sudo apt-get update
          sudo apt-get install -y libasound2 libgbm1 libgtk-3-0 libnss3 xvfb libnotify4 fonts-noto-cjk fonts-roboto
          wget https://github.com/jgraph/drawio-desktop/releases/download/v22.1.11/drawio-amd64-22.1.11.deb
          sudo apt-get install -y ./drawio-amd64-22.1.11.deb
          rm drawio-amd64-22.1.11.deb  # インストール後に deb ファイルを削除

      - name: Convert .drawio to .png
        run: |
          for file in $(find . -name "*.drawio"); do
            xvfb-run --auto-servernum drawio -x -f png -o "$(dirname "$file")/$(basename "$file" .drawio).png" "$file" --no-sandbox --disable-gpu --font-family="Roboto, Noto Sans CJK JP"
          done

      - name: Commit and push changes
        run: |
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
          git add *.png  # 変換後の PNG ファイルのみを追加
          git commit -m "Auto-convert .drawio to .png" || echo "No changes to commit"
          git push
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

次に特徴的な部分を説明します。

必要なフォントのインストール

- name: Install draw.io and dependencies
  run: |
    sudo apt-get update
    sudo apt-get install -y libasound2 libgbm1 libgtk-3-0 libnss3 xvfb libnotify4 fonts-noto-cjk fonts-roboto

このステップで、fonts-noto-cjk と fonts-roboto をインストールしています。これらは日本語を含む多言語対応のフォントです。
これがないと、pngに変換したときに日本語が文字化けしてしまいます。

drawio ファイルの PNG への変換

- name: Convert .drawio to .png
  run: |
    for file in $(find . -name "*.drawio"); do
      xvfb-run --auto-servernum drawio -x -f png -o "$(dirname "$file")/$(basename "$file" .drawio).png" "$file" --no-sandbox --disable-gpu --font-family="Roboto, Noto Sans CJK JP"
    done

このステップで特に重要なのは、--font-family="Roboto, Noto Sans CJK JP" オプションです。これにより、デフォルトの Helvetica フォントではなく、日本語対応フォントを使用するよう指定しています。

終わり

github actionはあまり触っていなかったのですが、これを機会に調査し、色々実現できることが分かったので導入検討できるといいなと感じました。