Fix the margin overflow in the architecture diagram

What does this MR do?

Mermaid's default config option about flowcharts makes the big ones have a top/bottom margin, see upstream issue https://github.com/mermaid-js/mermaid/issues/1758

Since mermaid 8.6.0, we can apply an init directive and fix this https://mermaid-js.github.io/mermaid/#/8.6.0_docs?id=init.

With this fix, the diagram is now magnified and you have to scroll to see the whole picture. I still think it's an improvement from the previous one where everything was too small.

I would provide a screenshot, but the diagram is too big :/

Here's a before/after:

• Before: https://docs.gitlab.com/ee/development/architecture.html#component-diagram
• After: http://main-ee-65003.178.62.207.141.nip.io/ee/development/architecture.html#component-diagram

Related issues

Discussion !64818 (comment 612973679)

Author's checklist

• Follow the Documentation Guidelines and Style Guide.
• [-] Ensure that the product tier badge is added to doc's h1.
• Request a review based on the documentation page's metadata and associated Technical Writer.

To avoid having this MR be added to code verification QA issues, don't add these labels: feature, frontend, backend, ~"bug", or database

Review checklist

Documentation-related MRs should be reviewed by a Technical Writer for a non-blocking review, based on Documentation Guidelines and the Style Guide.

• If the content requires it, ensure the information is reviewed by a subject matter expert.
• Technical writer review items:
  • Ensure docs metadata is present and up-to-date.
  • Ensure the appropriate labels are added to this MR.
  • If relevant to this MR, ensure content topic type principles are in use, including:
    • The headings should be something you'd do a Google search for. Instead of Default behavior, say something like Default behavior when you close an issue.
    • The headings (other than the page title) should be active. Instead of Configuring GDK, say something like Configure GDK.
    • Any task steps should be written as a numbered list.
    • If the content still needs to be edited for topic types, you can create a follow-up issue with the docs-technical-debt label.
• Review by assigned maintainer, who can always request/require the above reviews. Maintainer's review can occur before or after a technical writer review.
• Ensure a release milestone is set.