Replace the PNG diagram with Mermaid

[reyang]

Fixes #27.

Here goes what the diagram looks like:

Old version, please refer to the new one and the discussion #29 (comment)

graph TD

classDef dotnet fill:#7F007F
classDef golang fill:#3F3FCF
classDef java   fill:#FF0000
classDef nodejs fill:#007F00
classDef python fill:#7F7F00


adservice(Ad Service):::java
cache[(Cache<br/>&#40redis&#41)]
cartservice(Cart Service):::dotnet
checkoutservice(Checkout Service):::golang
currencyservice(Currency Service):::nodejs
emailservice(Email Service):::python
frontend(Frontend):::golang
loadgenerator([Load Generator]):::python
paymentservice(Payment Service):::nodejs
productcatalogservice(ProductCatalog Service):::golang
recommendationservice(Recommendation Service):::python
shippingservice(Shipping Service):::golang

Internet -->|HTTP| frontend
loadgenerator -->|HTTP| frontend

checkoutservice --> cartservice --> cache
checkoutservice --> productcatalogservice
checkoutservice --> currencyservice
checkoutservice --> emailservice
checkoutservice --> paymentservice
checkoutservice --> shippingservice

frontend --> adservice
frontend --> cartservice
frontend --> productcatalogservice
frontend --> checkoutservice
frontend --> currencyservice
frontend --> recommendationservice --> productcatalogservice
frontend --> shippingservice

Loading

[cartersocha]

Is it possible to have a legend like in the original png? I looked at the mermaid docs to do it myself quickly but it didn't seem obvious what do or would we need to add it in the markdown itself?

[cartersocha]

Looks really nice though

[reyang]

Is it possible to have a legend like in the original png? I looked at the mermaid docs to do it myself quickly but it didn't seem obvious what do or would we need to add it in the markdown itself?

It is possible, however after played with the diagram (especially trying to find the color that works for both dark/light modes), I start to prefer that we don't specify color at all:

1. considering 7% developers are color-blinded
2. in the end we might have 10+ languages - which translates to too many colors, and a long legend

[reyang]

This is what I would suggest after tried various approaches (which looks nice in both light/dark theme):

graph TD

adservice(Ad Service<br/>&#40Java&#41):::java
cache[(Cache<br/>&#40redis&#41)]
cartservice(Cart Service<br/>&#40.NET&#41):::dotnet
checkoutservice(Checkout Service<br/>&#40Go&#41):::golang
currencyservice(Currency Service<br/>&#40Node.js&#41):::nodejs
emailservice(Email Service<br/>&#40Python&#41):::python
frontend(Frontend<br/>&#40Go&#41):::golang
loadgenerator([Load Generator<br/>&#40Python&#41]):::python
paymentservice(Payment Service<br/>&#40Node.js&#41):::nodejs
productcatalogservice(ProductCatalog Service<br/>&#40Go&#41):::golang
recommendationservice(Recommendation Service<br/>&#40Python&#41):::python
shippingservice(Shipping Service<br/>&#40Go&#41):::golang

Internet -->|HTTP| frontend
loadgenerator -->|HTTP| frontend

checkoutservice --> cartservice --> cache
checkoutservice --> productcatalogservice
checkoutservice --> currencyservice
checkoutservice --> emailservice
checkoutservice --> paymentservice
checkoutservice --> shippingservice

frontend --> adservice
frontend --> cartservice
frontend --> productcatalogservice
frontend --> checkoutservice
frontend --> currencyservice
frontend --> recommendationservice --> productcatalogservice
frontend --> shippingservice

Loading

[cartersocha]

future enhancement would be to add grpc / http between the various services but non blocking for now. We can open an issue for that later

[cartersocha]

#30