[plan] Add visual workflow architecture diagram

[github-actions]

Objective

Create a simple visual diagram showing how markdown workflows are compiled and executed by GitHub Actions.

Context

Visual learners struggle to understand the flow: workflow.md → compile → workflow.lock.yml → GitHub Actions → Result. A diagram would make this immediately clear.

Current State

Documentation uses text descriptions but lacks visual representation of the workflow lifecycle.

Approach

1. Create a diagram showing the complete workflow lifecycle
2. Use a simple, beginner-friendly design (not overly technical)
3. Add to key documentation pages where workflow concepts are introduced
4. Consider using Mermaid diagrams (works in markdown) or SVG

Diagram Content

Show these stages:

[workflow.md] → [gh aw compile] → [workflow.lock.yml] → [GitHub Actions] → [✓ Result]
     ↓                                    ↓                      ↓
  (You write)                        (Committed)           (AI executes)

Include:

• Input (markdown file)
• Compilation step (CLI command)
• Output (lock file)
• Execution (GitHub Actions)
• Result (GitHub operations)

Files to Modify

• Update: docs/src/content/docs/guides/creating-workflows.mdx (add diagram)
• Update: docs/src/content/docs/index.mdx (consider adding to homepage)
• Create: Diagram file (Mermaid syntax or SVG in docs/src/assets/)

Acceptance Criteria

• Diagram is simple and beginner-friendly
• Shows complete workflow lifecycle
• Includes labels explaining each stage
• Works well on both light and dark themes
• Rendered inline in documentation (not external link)

AI generated by Plan Command for discussion #8477

[github-actions]

🍪 Issue Monster has assigned this to Copilot!

I've identified this issue as a good candidate for automated resolution and assigned it to the Copilot agent.

The Copilot agent will analyze the issue and create a pull request with the fix.

Om nom nom! 🍪

AI generated by Issue Monster