Use mermaid in Content Editor architecture diagram

What does this MR do?

This MR replaces a diagram PNG diagram used to describe the Content Editor’s high level architecture with a mermaid-based one. The purpose of this change is ensuring that we only display diagrams in the documentation that are visually consistent with GitLab’s doc site styles. We also want to ensure they are readable by assistive technology like screen readers.

Preview (Screenshot)

Here's what the diagram looks like:

stateDiagram-v2
  s1 : Idle
  s2 : Rendering
  s2.1 : Markdown API (Renderer)
  s3 : Editing
  s3.1 : Updating document
  s4 : Exporting
  s1 --> s2: Imports Markdown
  state s2 {
    [*] --> s2.1 : sends markdown
    s2.1 --> [*] : returns HTML
  }
  s2 --> s3: Loads HTML
  state s3 {
    [*] --> s3.1 : user modifies/adds content
    s3.1 --> [*]
  }
  s3 --> s4: Export to Markdown
  s4 --> [*]

Related issues

#332480 (closed)

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.