Architecture Diagram and Process (#33)

* Use compile mermaid extension

* initial Mermaid arch diagram

* updating mmd extension

* small mmd update

* Adding git add step

* Expanding acronym

* adding branch spec

* Add changes

* outputting SVG instead as PNG is too small

* Add changes

* updating readme

* Backlog->Roadmap

* Add changes

* Updating casing for consistency

* Updating documentation to specify 'update' section applies just to diagram

Co-authored-by: GitHub Action <action@github.com>

.github/workflows/compile_mermaid.yml

@@ -0,0 +1,52 @@
+name: 'Compile Mermaid in Markdown'
+
+on:
+  push:
+    paths:
+      - '**/*.mmd'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Project
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 2
+
+      - name: Get Changed Files
+        id: getfile
+        run: |
+          echo "::set-output name=files::$(git diff-tree --no-commit-id --name-only -r ${{ github.sha }} | grep -e '.*\.mmd$' | xargs)"
+
+      - name: Print mmd Files Changed
+        run: |
+          echo ${{ steps.getfile.outputs.files }}
+
+      - name: Compile Mermaid Files
+        uses: neenjaw/compile-mermaid-markdown-action@0.3.1
+        with:
+          files: ${{ steps.getfile.outputs.files }}
+          output: '.resources'
+        env:
+          HIDE_CODEBLOCKS: 1
+          ABSOLUTE_IMAGE_LINKS: 1
+          OUTPUT_FILE_TYPE: "svg"
+
+      - name: Show Changes
+        run: |
+          git status
+
+      - name: Commit Files
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "Add changes" -a
+
+      - name: Push Changes
+        uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: ${{ github.ref }}

docs/architecture/README.md

@@ -0,0 +1,21 @@
+# Architecture
+
+The below is a general architecture of our proposed system:
+
+![Architecture](architecture-mmd.svg)
+
+## Updating the Diagram
+
+**Note: Do Not directly modify the svg file, it is generated automatically!**
+
+In the event that you are interested in updating the architecture of our system, please go through the Architecture Decision Record Process (see [here](https://github.com/usds/justice40-tool/tree/main/docs/decisions) for more detail on this process).
+
+Provided you have already done this, however, and/or would like to make small changes to the diagram itself, please read on!
+
+This diagram was generated from a text-based markdown-like file using [MermaidJS](https://mermaid-js.github.io/) syntax and the [Compile Mermaid Markdown](https://github.com/marketplace/actions/compile-mermaid-markdown) Github Action.
+
+To update, consult Mermaid syntax [here](https://mermaid-js.github.io/mermaid/#/flowchart) and update the `architecture.mmd` file.
+
+To preview your changes, see Use Cases and Integrations [here](https://mermaid-js.github.io/mermaid/#/integrations) in order to setup editor integration.
+
+Once you are satisfied with your change, create a pull request. The `compile_mermaid.yml` workflow ([here](https://github.com/usds/justice40-tool/blob/main/.github/workflows/compile_mermaid.yml)) will automatically generate and commit an SVG version of your diagram with the name `X.svg`.

docs/architecture/architecture.mmd

@@ -0,0 +1,27 @@
+graph LR
+    subgraph ds["Data Selection"]
+    Intake --> Roadmap --> Voting
+    end
+    subgraph dp["Data Pipeline"]
+    Voting --> Approved
+    Approved --> Properties
+    Approved --> Geometries
+    Properties --> GeoJSON
+    Geometries --> GeoJSON
+    end
+    subgraph s["Server(s)"]
+    GeoJSON --> db[("Feature Database")]
+    db --> tileserv["Tile Server"]
+    tileserv --> lb["Load Balancer"]
+    lb --> auth["Auth, IP Allowlist, API Key, OpenAPI"]
+    auth --> api
+    end
+    subgraph j40["Justice40 Client"]
+    api --> vl["Justice40 Visualization Library"]
+    ts["Tile Styling"] --> vl
+    vl --> fe["Justice40 Static Site Frontend"]
+    end
+    subgraph oc["Other Clients"]
+    api --> 3p["Third Party Apps"]
+    end
+