fix: Updated cloud sdk diagram using mermaid

[BrigittaK307]

Closes https://github.com/SAP/ai-sdk-js-backlog/issues/490.

Updated mail client due to deprecation of the mail client.

State before:

Current state:

[davidkna-sap]

Apart from my comment, LGTM, but I would prefer an additional review on this.

[marikaner]

Generally, I like this approach, although I am not convinced that it is easier than adjusting pictures...

Anyways. I hate the colors. Can we add this to the themeConfig in the docusaurus.config.js:

    mermaid: {
      theme: { light: 'neutral', dark: 'dark' }
    },

I think this would very much improve looks.

[marikaner]

[req] Please adjust the names so that they reflect the package names (odata-v2, not odataV2) for all of the packages.

[marikaner]

[q] Is it possible to achieve the same layout as before. Now the arrow goes through one of the boxes, which doesn't look good. Also, the layout before was structured explicitly so that each "line" was a different layer (top generated clients, middle client related layer, bottom core).
[q] Is it possible to change the connectors to be something different than arrows. This isn't really a flow or interitance. Still, arrows are okayish too.

[BrigittaK307]

I have changed it to simple lines instead of arrows.
Unfortunately I don't think that I can put the generators with mermaid on the same level as the odatav2/v4 and openapi (as it was before), without putting them in a subgraph.

[BrigittaK307]

Generally, I like this approach, although I am not convinced that it is easier than adjusting pictures...

Anyways. I hate the colors. Can we add this to the themeConfig in the docusaurus.config.js:

    mermaid: {
      theme: { light: 'neutral', dark: 'dark' }
    },

I think this would very much improve looks.

I have added it to the config.
In the task it suggested to use mermaid, so I didn't even really look at other options to solve this.

[marikaner]

I played around with mermaid. It is really difficult to get what I want, however this is the closest I could get with mermaid:

---
config:

---
flowchart TB

  subgraph odataClientsGroup["OData Clients"]
    odataV2Clients["OData v2 clients"]@{shape: stacked-rectangle}
    odataV4Clients["OData v4 clients"]@{shape: stacked-rectangle}
  end

  subgraph openapiClientsGroup["OpenAPI Clients"]
    openapiClients["OpenAPI clients"]@{shape: stacked-rectangle}
  end

  odataClientsGroup ~~~ generator
  openapiClientsGroup ~~~ openapi-generator

  openapi-generator -.-> |generates| openapiClientsGroup
  generator -.-> |generates| odataClientsGroup

  openapi-generator ~~~ http-client
  openapi --> http-client
  odata-v2 --> http-client
  odata-v4 --> http-client
  generator ~~~ http-client

  openapiClients --> openapi
  odataV2Clients --> odata-v2
  odataV4Clients --> odata-v4

  http-client --> connectivity

Loading

Consider this as a starting point.
@jjtang1985 In my opinion we should stick with the old procedure and adjust the images. I think this is easier and it works as expected. The problem with mermaid is, that you have to rely on automatic layouting and this can go wrong...

[BrigittaK307]

I played around with mermaid. It is really difficult to get what I want, however this is the closest I could get with mermaid:

---
config:

---
flowchart TB

  subgraph odataClientsGroup["OData Clients"]
    odataV2Clients["OData v2 clients"]@{shape: stacked-rectangle}
    odataV4Clients["OData v4 clients"]@{shape: stacked-rectangle}
  end

  subgraph openapiClientsGroup["OpenAPI Clients"]
    openapiClients["OpenAPI clients"]@{shape: stacked-rectangle}
  end

  odataClientsGroup ~~~ generator
  openapiClientsGroup ~~~ openapi-generator

  openapi-generator -.-> |generates| openapiClientsGroup
  generator -.-> |generates| odataClientsGroup

  openapi-generator ~~~ http-client
  openapi --> http-client
  odata-v2 --> http-client
  odata-v4 --> http-client
  generator ~~~ http-client

  openapiClients --> openapi
  odataV2Clients --> odata-v2
  odataV4Clients --> odata-v4

  http-client --> connectivity

Loading

Consider this as a starting point. @jjtang1985 In my opinion we should stick with the old procedure and adjust the images. I think this is easier and it works as expected. The problem with mermaid is, that you have to rely on automatic layouting and this can go wrong...

Because of the docusaurus configurations, for me it looks slightly different, like this:

[marikaner]

btw @BrigittaK307, please take a look at this file: https://github.com/SAP/cloud-sdk/blob/main/static/img/.where-to-get-images.md

[jjtang1985]

mermaid is just one idea.
I would leave the decision to the team.