[#1427] Fix non-rendering PlantUML diagram (#2005)

The Report Architecture image cannot be rendered automatically from the
puml due to Graphviz not being installed during the CI process.

Let's add the step to install Graphviz in the integration and GitHub
pages workflow.

By rendering the puml directly, this eliminates the need to manually
convert the puml to a png image.

.github/workflows/gh-pages.yml

@@ -31,6 +31,9 @@ jobs:
  restore-keys: |
  ${{ runner.os }}-node-
 
+ - name: Install Graphviz
+ run: sudo apt-get -y install graphviz
+
  - name: Install MarkBind CLI
  run: npm i -g markbind-cli
 

.github/workflows/integration.yml

@@ -89,6 +89,7 @@ jobs:
  if: ${{ success() && github.event_name == 'pull_request' && matrix.os == 'ubuntu-20.04' }}
  run: |
  git fetch --all && git config --global user.email "-" && git config --global user.name "-" && ./gradlew run -Dargs="--since d1"
+ sudo apt-get -y install graphviz
  npm install -g markbind-cli
  (cd docs && markbind build)
 

docs/dg/report.md

@@ -18,8 +18,7 @@ The following is a snapshot of the report:
 
 ## Report architecture
 
-<!-- Use image instead of puml diagram for this as auto-render may not work -->
-![report architecture](../images/report-architecture.png)
+<puml src="../diagrams/ReportArchitecture.puml"/>
 
 The main Vue object (`app.vue`) is responsible for loading the report via an async call to `api.ts`, which parses `summary.json`. Its `repos` attribute is tied to the global `window.REPOS`, and is passed into the various other modules when the information is needed.