Add architecture diagram to documentation

[Miyamura80]

Summary

Added a visual architecture diagram to the documentation that illustrates how Desktest works, replacing a static screenshot with an interactive SVG diagram.

Changes

• Added docs/architecture.svg: A comprehensive SVG diagram showing the Desktest architecture with:

  • CLI component for task execution
  • Desktop app under test with screenshot and accessibility capture
  • PyAutoGUI for automation control
  • LLM Agent as the core decision-making component
  • Artifacts output (screenshots, logs, traces)
  • Visual flow showing the observe-act loop between components
  • Support for virtualized environments (Docker, macOS, Windows)

• Updated README.md: Replaced the embedded screenshot image with a reference to the new SVG diagram, improving maintainability and providing a clearer visual representation of the system architecture

Implementation Details

The SVG diagram uses:

• Custom icon symbols for different components (CLI, app, camera, code, robot, stack)
• Color-coded elements with cyan (#C3FFFD) accents on dark background
• Directional arrows showing data flow and interactions
• Labeled sections for clarity and understanding of the testing workflow

https://claude.ai/code/session_01SwbTLdCG4w9TE5XAJrfZux

---

Summary by cubic

Add an interactive architecture diagram (docs/architecture.svg) and update README.md to use it instead of the screenshot. The diagram outlines the CLI, app under test, capture/automation, LLM agent, artifacts, and the observe–act loop, with Docker/macOS/Windows support.

^{Written for commit bd7ed12. Summary will update on new commits.}

[qodo-code-review]

ⓘ You've reached your Qodo monthly free-tier limit. Reviews pause until next month — upgrade your plan to continue now, or link your paid account if you already have one.

[cubic-dev-ai]

No issues found across 2 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.