Consider a Mermaid diagram?

[reyang]

Currently the "architecture diagram" is a PNG file https://github.com/open-telemetry/opentelemetry-demo-webstore/blob/b28cb38af2f1f1273f92a321d713e0f7706536b6/docs/img/architecture-diagram.png.

I imagine we'll keep improving the architecture, and PNG is hard for change management / comment. I propose that we use mermaid. In OpenTelemetry .NET and C++ I've seen good results open-telemetry/opentelemetry-dotnet#2952.

If folks like the idea, I can take this work.

[cartersocha]

Great suggestion! It took me a second to figure out how they work but perfect for our use case. Let's try & keep the colors by language if possible or just consider what we can do to improve readability from the grey / black default. Not sure how much configuration is possible

[reyang]

Just trying to give folks some initial feel/taste - I'll add color in the next few days:

graph
  Internet(Internet) -->|HTTP| Frontend(Frontend)
  Load([Load Generator]) -->|HTTP| Frontend

  Frontend --> Ad(Ad Service)
  Frontend --> Cart(Cart Service)
  Frontend --> Catalog(ProductCatalog Service)
  Frontend --> Checkout(Checkout Service)
  Frontend --> Currency(Currency Service)
  Frontend --> Recommendation(Recommendation Service)
  Frontend --> Shipping(Shipping Service)

  Checkout --> Cart --> Cache[(Cache<br/>&#40redis&#41)]
  Checkout --> Catalog
  Checkout --> Currency
  Checkout --> Email(Email Service)
  Checkout --> Payment(Payment Service)
  Checkout --> Shipping

  Recommendation --> Catalog

Loading