Skip to content

[workshop-diagrams] Add theme-aware explanatory diagram for pattern triage flow - #4561

Closed
github-actions[bot] wants to merge 1 commit into
mainfrom
add-pattern-triage-diagram-2239c47dba72bbc3
Closed

github-actions[bot] wants to merge 1 commit into
mainfrom
add-pattern-triage-diagram-2239c47dba72bbc3

Conversation

@github-actions

Copy link
Copy Markdown
Contributor

Summary

Adds a new conceptual diagram to workshop/side-quest-09-01-debug-output.md (no existing images to migrate in this file).

  • Workshop file changed: workshop/side-quest-09-01-debug-output.md
  • Type of change: new concept (this page had zero images)
  • Files added:
    • workshop/images/side-quest-09-01-pattern-triage-flow-light.svg
    • workshop/images/side-quest-09-01-pattern-triage-flow-dark.svg

Why this helps learners

The side quest page presents five diagnostic patterns only as a prose table plus a link to a separate checklist page. The new diagram makes the overall triage flow visible at a glance: Run Output → match against 5 known patterns → open the matching micro-step → confirm with the full Debugging Checklist, with a dashed loop-back arrow showing what to do if the symptom is still unclear. This gives learners a mental model before they dive into the five individual micro-steps.

Implementation notes

  • Canvas 1200x560, matches the workshop's established light/dark palette (#f2f5f3/#101411 backgrounds, #08872b/#5fed83 accents).
  • Numbered badges (1–4) establish a left-to-right reading order independent of color.
  • Uses the GitHub workflow/play Octicon path (unmodified geometry) for the run-output node; other nodes use plain shapes since they aren't GitHub entities.
  • role="img", aria-label, data-visual-kind="diagram", and a stable data-visual-id are set on the SVG root; data-node on each stage.
  • Markdown edit is a single <picture> block insertion (6 lines) using the canonical theme-aware pattern, with the light variant as the <img> fallback and alt text only on <img>.

Validation performed

  • node scripts/check-svg-visual-language.js run against both new SVGs — no violations.
  • Rendered the exact <picture> block with Playwright in both light and dark colorScheme, confirmed currentSrc resolves to -light.svg and -dark.svg respectively.
  • Visually inspected both screenshots: images are nonblank, all labels stay inside their boxes/chips/badges at normal zoom.

Warning

Firewall blocked 7 domains

The following domains were blocked by the firewall during workflow execution:

  • accounts.google.com
  • android.clients.google.com
  • clients2.google.com
  • registry.npmjs.org
  • update.googleapis.com
  • www.google.com
  • www.gstatic.com

To allow these domains, add them to the network.allowed list in your workflow frontmatter:

network:
  allowed:
    - defaults
    - "accounts.google.com"
    - "android.clients.google.com"
    - "clients2.google.com"
    - "registry.npmjs.org"
    - "update.googleapis.com"
    - "www.google.com"
    - "www.gstatic.com"

See Network Configuration for more information.

Generated by 🧠 Workshop Explanatory Diagram Generator · copilot · auto · 128.2 AIC · ⌖ 18.9 AIC · ⊞ 10.7K · ◷

  • expires on Oct 15, 2026, 2:42 AM UTC

Add a light/dark SVG diagram illustrating the 5-pattern triage flow
(run output -> match pattern -> micro-step -> checklist, with a
loop-back for unresolved symptoms) to the debug output side quest
landing page, replacing the previous text-only pattern table intro.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions

Copy link
Copy Markdown
Contributor Author

This pull request was automatically closed because it expired on 2026-10-15T02:42:58.614Z.

Closed by Workflow

@github-actions github-actions Bot closed this Oct 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants