Add PlantUML container diagram

And put in README, with added headings.

README.md

@@ -1,5 +1,7 @@
 # fullstack
 
+## Description
+
 A **full-stack** web application includes:
 
 - a front-end user interface;
@@ -23,6 +25,12 @@ world, and help foodbanks manage their stock, churches share their
 sermons, book-lovers catalogue their shelves, people pray for their
 neighbourhoods -- and whatever else.
 
+## Diagram
+
+![Fullstack App Container Diagram](diagram.svg)
+
+## Development
+
 If you're a developer, then you can clone this repo and get started:
 
 ```
@@ -40,11 +48,13 @@ That run script should set up two threads: one to serve a front-end user
 interface at [localhost:8000](http://localhost:8000), and the other to
 run a back-end API at [localhost:5000](http://localhost:5000).
 
+## Deployment
+
 While you're getting that working, you should also be able to find a
 working demo of the app [here](https://fullstack.me.uk/), with
 frontend hosted for free by [Netlify](https://netlify.com), backend
 hosted for free by [PythonAnywhere](https://pythonanywhere.com), and
-both immediately updated whenever new code is merged to the `master`
+both immediately updated whenever new code is merged to the `main`
 branch of this [Github](https://github.com) repo.
 
 You can deploy your own fork of this to Netlify, just by clicking here:

diagram.puml

@@ -0,0 +1,26 @@
+@startuml
+
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+Person(dev, Developer)
+Person(user, User)
+
+
+System_Boundary(fullstack_app, "Fullstack App") {
+    Container(spa, "Frontend UI", "Vanilla Javascript, HTML, CSS", "Hosted on Netlify")
+    Container(backend_api, "Backend API", "Python, Flask", "Hosted on PythonAnywhere")
+    ContainerDb(database, "Database", "SQLite Database", "Single file within PythonAnywhere userspace")
+}
+
+System_Ext(github, "GitHub", "Git Code Repository")
+
+Rel(user, spa, "Opens web page", "HTTPS")
+Rel(dev, github, "Pulls/pushes code", "git")
+Rel(spa, backend_api, "Authenticated Access", "async, JSON/HTTPS")
+Rel_Neighbor(backend_api, database, "Reads from and writes to", "SQLAlchemy")
+
+Rel_Neighbor(github, spa, "Triggers Netlify redeployment", "CI/CD")
+Rel_Neighbor(github, backend_api, "Webhook triggers PythonAnywhere pull from repo", "CI/CD")
+Rel(fullstack_app, github, "Fullstack app code hosted in git monorepo")
+Rel_Neighbor(dev, fullstack_app, "Develops app locally", "run.py")
+@enduml