docs: add an ASCII diagram of Widget to the Views overview

Bug: None
Change-Id: I97c0be5309ec4319cb50dc98451c07e8b040aa17
Reviewed-on: https://chromium-review.googlesource.com/c/1181469
Commit-Queue: Elly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: Scott Violet <sky@chromium.org>
Cr-Commit-Position: refs/heads/master@{#621213}

docs/ui/views/overview.md

@@ -127,6 +127,22 @@ client view occupies is sometimes referred to as the Widget's "client area". The
 non-client frame view may be swapped out as the system theme changes without
 affecting the client view.
 
+The overall structure of a Widget and its helper Views looks like this:
+
+```
+(Widget
+  (RootView
+    (NonClientView
+      (NonClientFrameView
+        title
+        non-client buttons, e.g. close button
+        ...)
+      (ClientView
+        contents
+        dialog buttons
+        ...))))
+```
+
 ## Dialogs
 
 A commonly-used type of client view is a **dialog client view**, which has a