GitHub Actionsで.Drawioファイルを自動で画像出力してみた

前回の記事で作成したAWS構成図

記事リンク

これはDraw.ioというツールで描いており、このブログに記載するためには、画像出力しなければならない。

画面から操作するとこんな感じ

これを毎回手動で行って、保存した画像を過去の記事のディレクトリに配置するのは面倒くさい

そうだ！Github ActionsでCIを実装してみよう！

処理を記載するファイルを用意する

リポジトリのルートから見て、/.github/workflowsにYAMLファイルを配置する

YAMLファイル名は自由

YAMLファイルの拡張子は、.ymlか.yamlのどちか

今回は、ci.ymlにした

root
└.github
    └workflows
        └ci.yml

ci.ymlのコードを書いていく

name: CI
on: push
jobs:
    Drawio_Update:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v7

            - uses: actions/cache@v6
              id: cache-drawio
              with:
                  key: drawio-${{hashFiles('drawio/aws-architecture.drawio')}}
                  path: drawio/aws-architecture.drawio

            - run: xvfb-run drawio --export --format png --output images/article_no19/image0.png drawio/aws-architecture.drawio
                  if:steps.cache-drawio.outputs.cache-hit == "false"

ブラウザ上から確認してみると失敗。理由は、drawioコマンドが使用できない

draw.ioセットアップを追加

drawioコマンドを実行するために必要なファイルをダウンロードするコマンドを追記する

drawioコマンドは今回の記事の趣旨ではないので、GitHub Copilot(Cloude Sonnet4.6)に用意してもらいました。

name: CI
on: push
jobs:
    Drawio_Update:
        runs-on: ubuntu-latest
        steps:
            - name: チェックアウト
              uses: actions/checkout@v7

            - name: キャッシュ取得
              uses: actions/cache@v6
              id: cache-drawio
              with:
                  key: drawio-${{hashFiles('drawio/aws-architecture.drawio')}}
                  path: drawio/aws-architecture.drawio

            - name: draw.ioセットアップ
              run: |
                  sudo apt-get install -y libgbm1 libnotify4 libsecret-1-0
                  wget -q https://github.com/jgraph/drawio-desktop/releases/download/v24.7.5/drawio-amd64-24.7.5.deb
                  sudo dpkg -i drawio-amd64-24.7.5.deb

            - name: 画像出力
              if: steps.cache-drawio.outputs.cache-hit != 'true'
              run: xvfb-run drawio --export --format png --output images/article_no19/image0.png drawio/aws-architecture.drawio

ブラウザ上から確認してみると成功

でも、ブログ上の画像は更新されていない

GitHub Actions上で画像出力しただけで、その画像をリポジトリへ追加していなかった。

git pushコマンドを追加

name: CI
on: push
permissions:
    contents: write

jobs:
    Drawio_Update:
        runs-on: ubuntu-latest
        steps:
            - name: チェックアウト
              uses: actions/checkout@v7

            - name: キャッシュ取得
              uses: actions/cache@v6
              id: cache-drawio
              with:
                  key: drawio-${{hashFiles('drawio/aws-architecture.drawio')}}
                  path: drawio/aws-architecture.drawio

            - name: draw.ioセットアップ
              if: steps.cache-drawio.outputs.cache-hit != 'true'
              run: |
                  sudo apt-get install -y libgbm1 libnotify4 libsecret-1-0
                  wget -q https://github.com/jgraph/drawio-desktop/releases/download/v24.7.5/drawio-amd64-24.7.5.deb
                  sudo dpkg -i drawio-amd64-24.7.5.deb

            - name: 画像出力
              if: steps.cache-drawio.outputs.cache-hit != 'true'
              run: xvfb-run drawio --export --format png --output images/article_no19/image0.png drawio/aws-architecture.drawio

            - name: 変更をプッシュ
              if: steps.cache-drawio.outputs.cache-hit != 'true'
              run: |
                  git config user.name "github-actions[bot]"
                  git config user.email "github-actions[bot]@users.noreply.github.com"
                  git add images/article_no19/image0.png
                  git commit -m "drawio update"
                  git push