docs: C4 architecture using mermaid (#31)

Using mermaid is more flexible as the previous diagram was a static image that couldn't be updated.

---------

Signed-off-by: jrhender <[email protected]>
Co-authored-by: jrhender <[email protected]>

Author: jrhender

apps/vc-api/README.md

@@ -11,10 +11,26 @@ See [tutorials](./docs/tutorials/).
 
 ## Architecture
 
-The following is a [C4 Component diagram](https://c4model.com/#ComponentDiagram) of the VC-API app.
-The diagram was generated from the [EnergyWeb IcePanel](https://s.icepanel.io/gODPIqAQio/-/-/ogr9zwswt9s/CtO2okz0wV/204/200/1). 
-
-![vc-api c4 component diagram](./vc-api.c4component.png)
+The following is a [C4 Component diagram](https://c4model.com/#ComponentDiagram) of key functional modules of the VC-API implementation.
+
+```mermaid
+C4Component
+Component(vc-api, "VC-API Module", "Nest.js Module", "VC API spec Holder, Issue and Verifier endpoints")
+Component(did, "DID Module", "Nest.js Module", "DID Generation, Storage/Retrieval")
+Component(key, "Key Module", "Nest.js Module", "Key Generation, Storage and Retrieval")
+
+Rel(vc-api, did, "Get Verification Method for signing")
+Rel(vc-api, key, "Get Private Key for signing")
+Rel(did, db, "Read & Write DID Documents")
+Rel(key, db, "Read & Write keys")
+
+ContainerDb(db, "DIDs, Keys", "Relational Database", "")
+UpdateLayoutConfig($c4ShapeInRow="2")
+UpdateRelStyle(vc-api, did, $offsetY="-20", $offsetX="-80")
+UpdateRelStyle(vc-api, key, $offsetX="-150")
+UpdateRelStyle(did, db, $offsetX="-165")
+UpdateRelStyle(key, db, $offsetY="10", $offsetX="-50")
+```
 
 ## Credential Exchanges