Add D2 architecture diagrams with automated PNG generation and container-based visualization #6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Build D2 Architecture Diagrams | |
| on: | |
| pull_request: | |
| paths: | |
| - 'diagrams/**/*.d2' | |
| - '.github/workflows/d2-diagrams.yml' | |
| push: | |
| branches: | |
| - main | |
| paths: | |
| - 'diagrams/**/*.d2' | |
| - '.github/workflows/d2-diagrams.yml' | |
| permissions: | |
| contents: read | |
| pull-requests: write | |
| jobs: | |
| build-diagrams: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout code | |
| uses: actions/checkout@v4 | |
| - name: Install D2 | |
| run: | | |
| curl -fsSL https://d2lang.com/install.sh | sh -s -- | |
| echo "$HOME/.local/bin" >> $GITHUB_PATH | |
| - name: Build D2 diagrams | |
| run: | | |
| mkdir -p diagrams/output | |
| d2 diagrams/main.d2 diagrams/output/architecture.svg | |
| echo "✅ Generated architecture.svg" | |
| - name: Upload diagram as artifact | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: architecture-diagram | |
| path: diagrams/output/architecture.svg | |
| retention-days: 90 | |
| - name: Post diagram to PR comment | |
| if: github.event_name == 'pull_request' | |
| uses: actions/github-script@v7 | |
| with: | |
| script: | | |
| const fs = require('fs'); | |
| const path = require('path'); | |
| // Read the SVG file | |
| const svgPath = path.join( | |
| process.env.GITHUB_WORKSPACE, | |
| 'diagrams/output/architecture.svg' | |
| ); | |
| const svgContent = fs.readFileSync(svgPath, 'utf8'); | |
| // Create comment body with embedded SVG | |
| const commentBody = '## 🏗️ Architecture Diagram Updated\n\n' + | |
| 'The D2 architecture diagram has been regenerated based on the changes in this PR.\n\n' + | |
| '### Production Architecture\n\n' + | |
| '<details>\n' + | |
| '<summary>Click to view diagram</summary>\n\n' + | |
| svgContent + '\n\n' + | |
| '</details>\n\n' + | |
| '---\n\n' + | |
| '📥 You can also download the diagram from the [workflow artifacts]' + | |
| '(https://github.com/' + context.repo.owner + '/' + context.repo.repo + '/actions/runs/' + context.runId + ').'; | |
| // Find existing comment | |
| const comments = await github.rest.issues.listComments({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| issue_number: context.issue.number, | |
| }); | |
| const botComment = comments.data.find(comment => | |
| comment.user.type === 'Bot' && | |
| comment.body.includes('🏗️ Architecture Diagram Updated') | |
| ); | |
| // Update or create comment | |
| if (botComment) { | |
| await github.rest.issues.updateComment({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| comment_id: botComment.id, | |
| body: commentBody | |
| }); | |
| } else { | |
| await github.rest.issues.createComment({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| issue_number: context.issue.number, | |
| body: commentBody | |
| }); | |
| } |