docs: replace vague Collector diagram with Mermaid flowchart (#9494)

[LoveChauhan-18]

• I have read and followed the Contributing docs, especially the "First-time contributing?" section.
• This PR has content that I did not fully write myself.
  • I used AI and I have read and followed the Generative AI Contribution Policy.
• I have the experience and knowledge necessary to understand, review, and validate all content in this PR.¹

---

Resolves #9494 by replacing the vague static SVG diagram in the Collector introduction with a Mermaid flowchart that explicitly models the two deployment options discussed in the text:

1. Option 1: Direct Export - App sends directly to backends (for dev/simple setups)
2. Option 2: Via Collector - App -> OTel Collector (Receivers | Processors | Exporters) -> Backends (recommended for production)

This clarifies the app-to-backend flow and completely replaces the obsolete otel-collector.svg asset across all three locales (en, ja, zh).

Footnotes

1. Yes, I can answer maintainer questions about the content of this PR, without using AI. ↩

[ymotongpoo]

https://opentelemetry.io/docs/contributing/localization/#prs-should-not-span-locales

Please remove the changes other than English.

[LoveChauhan-18]

@ymotongpoo Thanks for the review! I've updated the PR to address your feedback:

• Reverted the changes to the Japanese and Chinese _index.md files back to their state on main.
• Restored content/en/docs/collector/img/otel-collector.svg so that the localized files won't have broken image references.
• Rebased/merged with the latest main to ensure everything is up to date and there are no merge conflicts.

[ymotongpoo]

@LoveChauhan-18 you need to make your first 3 PRs with human-written change (with minimum AI assistance). please follow the guideline.

ditto as #9476 and #9493.