Convert ASCII art diagrams to SVG images

Author: taylorarndt

docs/01-understanding-github-web-structure.md

@@ -196,34 +196,7 @@ Your personal home (`github.com`) shows activity from repositories you follow. Y
 
 A repository home page is laid out from top to bottom as follows. The Global Navigation bar (landmark: "Navigation Menu") contains the GitHub logo, Search, Copilot, Pull Requests, Issues, Notifications bell, and your avatar. Below that are the Repository Tabs (landmark: "Repository navigation") showing Code, Issues (12), Pull requests (3), Actions, and more. Next is the Repository Header, which is the H1 heading "owner / repo-name" plus Star (42), Watch, and Fork (8) buttons. The main content area is split into two columns. On the left is the File Area with the branch selector (main), Go to file button, Code button, and the File Table (a landmark) listing files like .github/, docs/, and README.md with dates. On the right is the Sidebar with the About section, description text, topics (accessibility), Releases (3), Contributors (5), and Languages (Markdown 100%). Below both columns is the rendered README (landmark: "Repository files navigation"), and at the bottom is the Footer.
 
-```text
-+----------------------------------------------------------+
-|  GLOBAL NAVIGATION (landmark: "Navigation Menu")         |
-|  [GitHub] [Search] [Copilot] [PRs] [Issues] [Bell] [You]|
-+----------------------------------------------------------+
-|  REPOSITORY TABS (landmark: "Repository navigation")     |
-|  [Code] [Issues 12] [Pull requests 3] [Actions] [...]   |
-+----------------------------------------------------------+
-|  REPOSITORY HEADER                                        |
-|  owner / repo-name  (this is the H1 heading)             |
-|  [Star 42]  [Watch]  [Fork 8]                             |
-+-----------------------------+----------------------------+
-|  FILE AREA                  |  SIDEBAR                   |
-|  Branch: [main v]           |  About                     |
-|  [Go to file]  [Code v]     |  Description text          |
-|                             |  Topics: accessibility     |
-|  FILE TABLE (landmark)      |  Releases: 3               |
-|  .github/     3 days ago    |  Contributors: 5           |
-|  docs/        2 days ago    |  Languages: Markdown 100%  |
-|  README.md    yesterday     |                            |
-+-----------------------------+----------------------------+
-|  README (landmark: "Repository files navigation")         |
-|  # Rendered README content here                           |
-|  ...                                                      |
-+----------------------------------------------------------+
-|  FOOTER                                                   |
-+----------------------------------------------------------+
-```
+![Diagram showing the visual layout of a GitHub repository page from top to bottom: global navigation, repository tabs, header, file area and sidebar side by side, README, and footer](images/repo-page-layout-01.svg)
 
 ### Screen reader navigation of this page
 

docs/02-navigating-repositories.md

@@ -31,27 +31,7 @@ When you navigate to a GitHub repository (e.g., `https://github.com/owner/repo-n
 
 The repository home page is organized from top to bottom as follows. The Navigation bar (GitHub global nav) contains the avatar menu, Notifications, and search. Below that is the Repository header showing "owner / repo-name" as the H1 heading, plus Star, Watch, and Fork buttons. Next are the Repository navigation tabs (a landmark) with Code (active), Issues, Pull requests, Actions, and more. The main content area is split into two columns: on the left is the File tree / code panel with the branch selector, Files table (navigable as a table), and last commit message; on the right is the Sidebar with the About section, topics, and releases. Below both columns is the rendered README.md in a separate landmark region.
 
-```text
-┌────────────────────────────────────────────────────┐
-│  Navigation bar (GitHub global nav)                │
-│  avatar menu | Notifications | search               │
-├────────────────────────────────────────────────────┤
-│  Repository header                                  │
-│  owner / repo-name  (h1)                            │
-│  [Star] [Watch] [Fork] buttons                      │
-├────────────────────────────────────────────────────┤
-│  Repository navigation tabs (landmark)              │
-│  < Code > Issues  Pull requests  Actions  etc.      │
-├─────────────────────────────┬──────────────────────┤
-│  File tree / code panel     │  Sidebar              │
-│  Branch selector            │  About section        │
-│  Files table (t:table)      │  Topics               │
-│  Last commit message         │  Releases             │
-├─────────────────────────────┴──────────────────────┤
-│  README.md (rendered)                               │
-│  (a separate landmark region)                       │
-└────────────────────────────────────────────────────┘
-```
+![Diagram showing the repository page layout with navigation bar, header, tabs, file tree and sidebar columns, and README section](images/repo-page-layout-02.svg)
 
 
 ## Landing on a Repository - What to Expect

docs/03-the-learning-room.md

@@ -25,15 +25,7 @@ Before starting Chapter 4 challenges, students should be able to:
 
 The learning-room is a single shared repository. It has a protected main branch, and each student opens pull requests against it. For example: Student A's PR #12 is open and assigned to Student B for review, Student B's PR #13 is assigned to Student C, Student C's PR #14 is assigned to Student A, and Student A's earlier PR #11 has already been merged. More PRs appear as students contribute.
 
-```text
-learning-room (SHARED)
-├── main branch (protected)
-├── Student A's PR #12 (open, assigned to Student B for review)
-├── Student B's PR #13 (open, assigned to Student C for review)
-├── Student C's PR #14 (open, assigned to Student A for review)
-├── Student A's PR #11 (merged, closed)
-└── [More PRs as students contribute]
-```
+![Diagram showing the learning-room shared repository structure with a protected main branch and student pull requests](images/learning-room-tree.svg)
 
 ### Why one shared repo?
 

docs/12-github-pull-requests-extension.md

@@ -192,18 +192,7 @@ gh pr list --search "review-requested:@me"
 
 The GitHub Pull Requests panel has two top-level sections. "My Pull Requests" contains four filters: Assigned to Me, Created by Me, Waiting for my Review, and All Open. The repository section shows Local Pull Request Branches (checked out locally), All Open Pull Requests, and All Closed Pull Requests.
 
-```text
-GitHub Pull Requests
-├── My Pull Requests
-│   ├── Assigned to Me
-│   ├── Created by Me
-│   ├── Waiting for my Review
-│   └── All Open
-├── [Repository Name]
-│   ├── Local Pull Request Branches (checked out locally)
-│   ├── All Open Pull Requests
-│   └── All Closed Pull Requests
-```
+![Diagram showing the GitHub Pull Requests panel tree with My Pull Requests filters and repository sections](images/pr-tree.svg)
 
 #### Screen reader announcement example
 

docs/15-issue-templates.md

@@ -195,16 +195,7 @@ Templates live in a specific folder in your repository:
 
 Templates live inside your-repo/.github/. The ISSUE_TEMPLATE/ subfolder contains: bug_report.md (Markdown template), feature_request.md (Markdown template), accessibility-bug.yml (YAML form template), and config.yml (template chooser configuration). The pull_request_template.md file sits directly in .github/, not inside ISSUE_TEMPLATE/.
 
-```text
-your-repo/
-└── .github/
-    ├── ISSUE_TEMPLATE/
-    │   ├── bug_report.md         ← Markdown template
-    │   ├── feature_request.md    ← Markdown template
-    │   ├── accessibility-bug.yml ← YAML form template
-    │   └── config.yml            ← Template chooser configuration
-    └── pull_request_template.md  ← PR template (singular)
-```
+![Diagram showing the template folder structure inside .github with ISSUE_TEMPLATE subfolder and PR template](images/template-folder-tree.svg)
 
 **Markdown templates (`.md`):** Traditional template format. Pre-fills a text editor with structured Markdown content. Contributors edit the template directly, replacing instructions and placeholder text with their own content.
 

docs/appendix-m-vscode-accessibility-reference.md

@@ -177,18 +177,7 @@ The Accessible Diff Viewer presents file diffs as a structured, line-by-line lis
 
 The Accessible Diff Viewer starts with a header showing the file path and change summary. It then shows each hunk (changed section) in order. Each hunk contains: the hunk location (line range), unchanged context lines, the modified, added, or removed lines with their prefix, and more context lines. After all hunks, a footer shows the totals for additions and deletions.
 
-```text
-Accessible Diff Viewer
-├── Header (file path, change summary)
-├── Hunk 1 of N
-│   ├── Hunk location (line range)
-│   ├── Unchanged lines (context)
-│   ├── Modified/Added/Removed lines (with prefix)
-│   └── More unchanged lines (context)
-├── Hunk 2 of N
-│   └── ...
-└── Footer (totals: X additions, Y deletions)
-```
+![Diagram showing the Accessible Diff Viewer tree structure with header, hunks containing line ranges and changes, and footer](images/diff-viewer-tree.svg)
 
 #### Line prefixes
 

docs/appendix-q-github-actions-workflows.md

@@ -57,15 +57,7 @@ Workflow files live in a specific, mandatory location:
 
 Workflow files live at your-repository/.github/workflows/. Example files include: ci.yml (runs tests on every push or PR), lint.yml (checks code style), a11y-scan.yml (accessibility scanning), and deploy.yml (deploys the site when code merges to main).
 
-```text
-your-repository/
-└── .github/
-    └── workflows/
-        ├── ci.yml              ← Runs tests on every push/PR
-        ├── lint.yml            ← Checks code style
-        ├── a11y-scan.yml       ← Accessibility scanning
-        └── deploy.yml          ← Deploys the site when code merges to main
-```
+![Diagram showing the workflow folder structure at .github/workflows with CI, lint, accessibility, and deploy YAML files](images/workflow-folder-tree.svg)
 
 The `.github/` folder is hidden by convention (starts with a dot). To find it: