Add system architecture diagram to SDKs How it works page

[fern-api]

Summary

Adds a new "System architecture" section to the SDKs "How it works" page with a mermaid flowchart diagram showing the complete SDK generation system architecture, including API input formats, DockerHub generators, the remote code generation service, GitHub repositories, package managers, and the Fern Definition Registry.

Updates since last revision

• Updated mermaid diagram to use exact user-provided syntax with fixed layout configuration and specific node/edge annotations

Review & Testing Checklist for Human

• Verify the mermaid diagram renders correctly in the preview - the syntax uses advanced features like @{ } shape annotations and fixed layout that may behave differently across mermaid versions
• Compare the rendered diagram against the reference architecture images to ensure it matches the intended design
• Check that all nodes, edges, and labels display properly (especially the Square's\nGo SDK labels with escaped newlines)

Recommended test plan: Open the preview link and navigate to the How it works page. Scroll to the new "System architecture" section and verify the diagram renders with all components visible and properly connected.

Notes

Preview: https://fern-preview-c9ea1381-7bda-4c03-a12d-944e5e3f95ba.docs.buildwithfern.com/learn/sdks/how-it-works

Devin session: https://app.devin.ai/sessions/4f1238fd81ed439b850c9cf1ab6a1daf
Requested by: Fern Support

[github-actions]

🌿 Preview your docs: https://fern-preview-c9ea1381-7bda-4c03-a12d-944e5e3f95ba.docs.buildwithfern.com/learn

[github-actions]

🌿 Preview your docs: https://fern-preview-8f1fe756-28a8-4995-ae11-e299a3bc133b.docs.buildwithfern.com/learn