diff --git a/.gitignore b/.gitignore
index e8441b44..626725a5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ test-results/
 playwright-report/
 resources/vc_redist.x64.exe
 resources/vc_redist.x64.exe.tmp
+docs/screenshots/
diff --git a/docs/view-flow-plan.md b/docs/view-flow-plan.md
new file mode 100644
index 00000000..fd19eab3
--- /dev/null
+++ b/docs/view-flow-plan.md
@@ -0,0 +1,80 @@
+# View/Modal Flow Documentation — Plan
+
+Issue: [#226](https://github.com/Comfy-Org/ComfyUI-Desktop-2.0-Beta/issues/226)
+
+## Goal
+
+Generate a living, regenerable diagram of how all screens (views and modals) in Desktop 2.0 connect to each other, with visual previews. Ideally portable into Figma for designers.
+
+## Current State
+
+The app has **6 sidebar tab views** + **7 modal views** + **1 global ModalDialog**, all orchestrated via events in `App.vue`:
+
+- **Tab views:** Dashboard, InstallationList, Running, Models, Media, Settings
+- **Modal views:** DetailModal, ConsoleModal, ProgressModal, NewInstallModal, QuickInstallModal, TrackModal, LoadSnapshotModal
+- **Global:** ModalDialog (alerts/confirms/prompts/selects)
+
+There are 2 e2e test files using Playwright but no screenshot-capture infrastructure yet.
+
+---
+
+## Phase 1: Automated Screenshot Capture (Playwright)
+
+Add a Playwright test file (`e2e/view-flow-screenshots.spec.ts`) that navigates to each view/modal state and captures a screenshot to `docs/screenshots/`.
+
+- Mock the Electron IPC layer (already partially done in `e2e/support/`) to render each view with representative dummy data.
+- Initial output: 10 PNG files covering 6 tab views + 4 modals (empty/welcome states).
+- Future: add populated-state screenshots for DetailModal, ConsoleModal, ProgressModal once mock data seeding is implemented (~13–14 total).
+
+**Effort:** 2–3 days
+
+## Phase 2: Flow Graph Generator Script
+
+Create a Node script (`scripts/generate-view-flow.ts`) that:
+
+1. **Parses `App.vue`** and all `views/*.vue` files to extract `defineEmits` and `@event` bindings (the emit→handler wiring).
+2. Builds a directed graph of view→view transitions.
+3. Outputs a **Mermaid diagram** (`docs/view-flow.md`) with clickable links to source files.
+4. Optionally outputs an **HTML page** (`docs/view-flow.html`) that renders the graph with screenshot thumbnails embedded at each node (using the Phase 1 PNGs).
+
+This script can be re-run anytime the views change. Could be added to CI.
+
+**Effort:** 1–2 days
+
+## Phase 3: Figma Integration
+
+### Feasibility
+
+| Approach | Feasibility | Notes |
+|----------|-------------|-------|
+| **Figma REST API** | ❌ Cannot create/modify file content | REST API is read-only for nodes/images. No endpoint to create frames or upload image fills. |
+| **Figma Plugin** | ✅ Best path | Plugin API has full write access: `createFrame()`, `createImage()`, `createConnector()`. |
+| **Figma MCP / Make** | 🟡 Emerging | Not yet stable enough for programmatic pipelines. Worth revisiting. |
+| **FigJam board** | ✅ Quick alternative | Connectors + image frames are a natural fit. Possibly better UX for designers. |
+
+### Recommended Approach
+
+Build a small **Figma/FigJam plugin** that:
+
+1. Accepts a JSON file (generated by Phase 2) containing: node list (id, label, screenshot URL/base64), edge list (from, to, label).
+2. Creates a frame per view with the screenshot as an image fill.
+3. Draws connectors between frames labeled with the event name.
+4. Designers run the plugin whenever they want the latest flow — it clears the old one and regenerates.
+
+**Effort:** 2–3 days (depends on Phase 1 + 2 outputs)
+
+## Phase 4: CI Integration (Optional)
+
+- Add a GitHub Actions workflow that runs the Playwright screenshot capture + flow generator on every PR that touches `src/renderer/src/views/` or `src/renderer/src/components/`.
+- Commit updated screenshots and Mermaid docs automatically, or post them as PR comments.
+
+**Effort:** 1 day
+
+## Summary
+
+| Phase | Effort | Dependency |
+|-------|--------|------------|
+| Phase 1 (Screenshots) | 2–3 days | Requires expanding e2e IPC mocks |
+| Phase 2 (Graph generator) | 1–2 days | None |
+| Phase 3 (Figma plugin) | 2–3 days | Phase 1 + 2 outputs |
+| Phase 4 (CI) | 1 day | Phase 1 + 2 |
diff --git a/docs/view-flow.md b/docs/view-flow.md
new file mode 100644
index 00000000..ee896268
--- /dev/null
+++ b/docs/view-flow.md
@@ -0,0 +1,99 @@
+# View/Modal Flow — Desktop 2.0
+
+> Auto-generated by `scripts/generate-view-flow.mjs` — do not edit manually.
+>
+> Run: `node scripts/generate-view-flow.mjs`
+
+## Navigation Graph
+
+```mermaid
+flowchart TD
+
+  %% Tab Views
+  dashboard-view["📊 Dashboard"]
+  installation-list["📦 Installs"]
+  running-view["▶️ Running"]
+  models-view["📁 Models"]
+  media-view["🖼️ Media"]
+  settings-view["⚙️ Settings"]
+
+  %% Modals
+  quick-install-modal("⚡ Quick Install Modal")
+  detail-modal("🔍 Detail Modal")
+  console-modal("💻 Console Modal")
+  progress-modal("⏳ Progress Modal")
+  new-install-modal("➕ New Install Modal")
+  track-modal("📂 Track Existing Modal")
+  load-snapshot-modal("📸 Load Snapshot Modal")
+
+  sidebar{{"🧭 Sidebar"}}
+
+  %% Sidebar navigation
+  sidebar --> dashboard-view
+  sidebar --> installation-list
+  sidebar --> running-view
+  sidebar --> models-view
+  sidebar --> media-view
+  sidebar --> settings-view
+
+  %% View → Modal transitions
+  dashboard-view -->|show-quick-install| quick-install-modal
+  dashboard-view -->|show-settings| settings-view
+  dashboard-view -->|show-detail| detail-modal
+  dashboard-view -->|show-console| console-modal
+  dashboard-view -->|show-progress| progress-modal
+  installation-list -->|show-detail| detail-modal
+  installation-list -->|show-migrate| detail-modal
+  installation-list -->|show-console| console-modal
+  installation-list -->|show-progress| progress-modal
+  installation-list -->|show-new-install| new-install-modal
+  installation-list -->|show-track| track-modal
+  installation-list -->|show-load-snapshot| load-snapshot-modal
+  running-view -->|show-detail| detail-modal
+  running-view -->|show-console| console-modal
+  running-view -->|show-progress| progress-modal
+
+  %% Modal → View/Modal transitions
+  detail-modal -->|show-progress| progress-modal
+  detail-modal -->|navigate-list| installation-list
+  progress-modal -->|show-detail| detail-modal
+  progress-modal -->|show-console| console-modal
+  new-install-modal -->|show-progress| progress-modal
+  new-install-modal -->|navigate-list| installation-list
+  quick-install-modal -->|show-progress| progress-modal
+  track-modal -->|navigate-list| installation-list
+  load-snapshot-modal -->|show-progress| progress-modal
+
+  %% Styles
+  classDef tabView fill:#1a1a2e,stroke:#00d9ff,color:#e0e0e0,stroke-width:2px
+  classDef modal fill:#1a1a2e,stroke:#ff6b6b,color:#e0e0e0,stroke-width:2px
+  classDef nav fill:#1a1a2e,stroke:#ffd93d,color:#e0e0e0,stroke-width:2px
+  class dashboard-view,installation-list,running-view,models-view,media-view,settings-view tabView
+  class quick-install-modal,detail-modal,console-modal,progress-modal,new-install-modal,track-modal,load-snapshot-modal modal
+  class sidebar nav
+```
+
+## Legend
+
+- **Blue border** = Tab view (sidebar navigation)
+- **Red border** = Modal (overlay)
+- **Yellow border** = Sidebar navigator
+- Edge labels show the Vue event name that triggers the transition
+
+## Source Files
+
+| View/Modal | Source |
+|------------|--------|
+| 📊 Dashboard | [`src/renderer/src/views/DashboardView.vue`](../src/renderer/src/views/DashboardView.vue) |
+| 📦 Installs | [`src/renderer/src/views/InstallationList.vue`](../src/renderer/src/views/InstallationList.vue) |
+| ▶️ Running | [`src/renderer/src/views/RunningView.vue`](../src/renderer/src/views/RunningView.vue) |
+| 📁 Models | [`src/renderer/src/views/ModelsView.vue`](../src/renderer/src/views/ModelsView.vue) |
+| 🖼️ Media | [`src/renderer/src/views/MediaView.vue`](../src/renderer/src/views/MediaView.vue) |
+| ⚙️ Settings | [`src/renderer/src/views/SettingsView.vue`](../src/renderer/src/views/SettingsView.vue) |
+| ⚡ Quick Install Modal | [`src/renderer/src/views/QuickInstallModal.vue`](../src/renderer/src/views/QuickInstallModal.vue) |
+| 🔍 Detail Modal | [`src/renderer/src/views/DetailModal.vue`](../src/renderer/src/views/DetailModal.vue) |
+| 💻 Console Modal | [`src/renderer/src/views/ConsoleModal.vue`](../src/renderer/src/views/ConsoleModal.vue) |
+| ⏳ Progress Modal | [`src/renderer/src/views/ProgressModal.vue`](../src/renderer/src/views/ProgressModal.vue) |
+| ➕ New Install Modal | [`src/renderer/src/views/NewInstallModal.vue`](../src/renderer/src/views/NewInstallModal.vue) |
+| 📂 Track Existing Modal | [`src/renderer/src/views/TrackModal.vue`](../src/renderer/src/views/TrackModal.vue) |
+| 📸 Load Snapshot Modal | [`src/renderer/src/views/LoadSnapshotModal.vue`](../src/renderer/src/views/LoadSnapshotModal.vue) |
diff --git a/e2e/view-flow-screenshots.spec.ts b/e2e/view-flow-screenshots.spec.ts
new file mode 100644
index 00000000..86e1fe02
--- /dev/null
+++ b/e2e/view-flow-screenshots.spec.ts
@@ -0,0 +1,126 @@
+/**
+ * View Flow Screenshots — Issue #226
+ *
+ * Captures a screenshot of every major view and modal in the launcher UI.
+ * Screenshots are saved to docs/screenshots/ and can be used by the
+ * flow-graph generator (Phase 2) and Figma plugin (Phase 3).
+ *
+ * Run: pnpm exec playwright test e2e/view-flow-screenshots.spec.ts
+ */
+import { expect, test, type Page } from '@playwright/test'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { type LauncherAppHandle, launchLauncherApp } from './support/electronHarness'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const SCREENSHOT_DIR = path.resolve(__dirname, '..', 'docs', 'screenshots')
+
+const UI_TIMEOUT = 12_000
+
+let handle: LauncherAppHandle
+let page: Page
+
+async function screenshot(name: string): Promise<void> {
+  await page.screenshot({
+    path: path.join(SCREENSHOT_DIR, `${name}.png`),
+    type: 'png',
+  })
+}
+
+async function clickSidebar(text: string): Promise<void> {
+  const item = page.locator('.sidebar-item', { hasText: text })
+  await item.click()
+  await expect(item).toHaveClass(/active/, { timeout: UI_TIMEOUT })
+}
+
+async function openModal(locator: ReturnType<Page['locator']>, screenshotName: string): Promise<void> {
+  await expect(locator).toBeVisible({ timeout: UI_TIMEOUT })
+  await locator.click()
+  await expect(page.locator('.modal-overlay, .modal, [class*="modal"]')).toBeVisible({ timeout: UI_TIMEOUT })
+  await screenshot(screenshotName)
+  await page.keyboard.press('Escape')
+  await expect(page.locator('.modal-overlay, .modal, [class*="modal"]')).toBeHidden({ timeout: UI_TIMEOUT })
+}
+
+test.describe('View Flow Screenshots (#226)', () => {
+  test.beforeAll(async () => {
+    handle = await launchLauncherApp()
+    page = await handle.application.firstWindow()
+
+    await expect(page.locator('#app')).toBeAttached({ timeout: UI_TIMEOUT })
+    await expect(page.locator('.sidebar')).toBeVisible({ timeout: UI_TIMEOUT })
+    // Wait for Vue to finish mounting and i18n to load
+    await expect(page.locator('.sidebar-item')).toHaveCount(7, { timeout: UI_TIMEOUT })
+  })
+
+  test.afterAll(async () => {
+    await handle.cleanup()
+  })
+
+  // ── Tab Views ──────────────────────────────────────────────
+
+  test('01 — Dashboard @macos @windows @linux', async () => {
+    await screenshot('01-dashboard')
+  })
+
+  test('02 — Installation List @macos @windows @linux', async () => {
+    await clickSidebar('Installs')
+    await screenshot('02-installation-list')
+  })
+
+  test('03 — Running @macos @windows @linux', async () => {
+    await clickSidebar('Running')
+    await screenshot('03-running')
+  })
+
+  test('04 — Models @macos @windows @linux', async () => {
+    await clickSidebar('Models')
+    await screenshot('04-models')
+  })
+
+  test('05 — Media @macos @windows @linux', async () => {
+    await clickSidebar('Media')
+    await screenshot('05-media')
+  })
+
+  test('06 — Settings @macos @windows @linux', async () => {
+    await clickSidebar('Settings')
+    await screenshot('06-settings')
+  })
+
+  // ── Modals (opened from Installation List) ─────────────────
+
+  test('07 — New Install modal @macos @windows @linux', async () => {
+    await clickSidebar('Installs')
+    await openModal(
+      page.locator('.toolbar button', { hasText: 'New Install' }),
+      '07-new-install-modal',
+    )
+  })
+
+  test('08 — Track Existing modal @macos @windows @linux', async () => {
+    await clickSidebar('Installs')
+    await openModal(
+      page.locator('button', { hasText: 'Track Existing' }),
+      '08-track-modal',
+    )
+  })
+
+  test('09 — Load Snapshot modal @macos @windows @linux', async () => {
+    await clickSidebar('Installs')
+    await openModal(
+      page.locator('button', { hasText: 'Load Snapshot' }),
+      '09-load-snapshot-modal',
+    )
+  })
+
+  // ── Dashboard modal entry points ───────────────────────────
+
+  test('10 — Quick Install modal @macos @windows @linux', async () => {
+    await clickSidebar('Dashboard')
+    await openModal(
+      page.locator('button', { hasText: 'Install ComfyUI' }),
+      '10-quick-install-modal',
+    )
+  })
+})
diff --git a/package.json b/package.json
index 1aab914d..5818dc6c 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "format:check": "prettier --check \"src/**/*.{ts,vue}\" \"*.{json,ts,yml}\"",
     "test": "vitest run",
     "test:e2e": "playwright test",
+    "generate:view-flow": "node scripts/generate-view-flow.mjs",
     "test:e2e:macos": "playwright test --project=macos",
     "test:e2e:windows": "playwright test --project=windows",
     "test:e2e:linux": "playwright test --project=linux",
diff --git a/scripts/generate-view-flow.mjs b/scripts/generate-view-flow.mjs
new file mode 100644
index 00000000..0d9df7e7
--- /dev/null
+++ b/scripts/generate-view-flow.mjs
@@ -0,0 +1,314 @@
+/**
+ * View Flow Graph Generator — Phase 2 of Issue #226
+ *
+ * Parses App.vue to extract the view→modal→view navigation graph
+ * and outputs a Mermaid diagram to docs/view-flow.md.
+ *
+ * Run: node scripts/generate-view-flow.mjs
+ */
+import { readFileSync, writeFileSync, mkdirSync } from 'node:fs'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const ROOT = resolve(__dirname, '..')
+const APP_VUE = resolve(ROOT, 'src/renderer/src/App.vue')
+const VIEWS_DIR = resolve(ROOT, 'src/renderer/src/views')
+const OUTPUT = resolve(ROOT, 'docs/view-flow.md')
+
+const VIEW_COMPONENTS = [
+  'DashboardView', 'InstallationList', 'RunningView',
+  'SettingsView', 'ModelsView', 'MediaView',
+  'DetailModal', 'ConsoleModal', 'ProgressModal',
+  'NewInstallModal', 'QuickInstallModal', 'TrackModal',
+  'LoadSnapshotModal',
+]
+
+const TAB_VIEWS = ['DashboardView', 'InstallationList', 'RunningView', 'ModelsView', 'MediaView', 'SettingsView']
+
+const VIEW_TO_FILE = {
+  DashboardView: 'DashboardView.vue',
+  InstallationList: 'InstallationList.vue',
+  RunningView: 'RunningView.vue',
+  ModelsView: 'ModelsView.vue',
+  MediaView: 'MediaView.vue',
+  SettingsView: 'SettingsView.vue',
+  DetailModal: 'DetailModal.vue',
+  ConsoleModal: 'ConsoleModal.vue',
+  ProgressModal: 'ProgressModal.vue',
+  NewInstallModal: 'NewInstallModal.vue',
+  QuickInstallModal: 'QuickInstallModal.vue',
+  TrackModal: 'TrackModal.vue',
+  LoadSnapshotModal: 'LoadSnapshotModal.vue',
+}
+
+const NODE_LABELS = {
+  Sidebar: '🧭 Sidebar',
+  DashboardView: '📊 Dashboard',
+  InstallationList: '📦 Installs',
+  RunningView: '▶️ Running',
+  ModelsView: '📁 Models',
+  MediaView: '🖼️ Media',
+  SettingsView: '⚙️ Settings',
+  DetailModal: '🔍 Detail Modal',
+  ConsoleModal: '💻 Console Modal',
+  ProgressModal: '⏳ Progress Modal',
+  NewInstallModal: '➕ New Install Modal',
+  QuickInstallModal: '⚡ Quick Install Modal',
+  TrackModal: '📂 Track Existing Modal',
+  LoadSnapshotModal: '📸 Load Snapshot Modal',
+}
+
+const SWITCH_VIEW_MAP = {
+  dashboard: 'DashboardView',
+  list: 'InstallationList',
+  running: 'RunningView',
+  models: 'ModelsView',
+  media: 'MediaView',
+  settings: 'SettingsView',
+}
+
+// ── Helpers ──────────────────────────────────────────────────
+
+function extractTemplate(vue) {
+  const match = vue.match(/<template>([\s\S]*)<\/template>/)
+  return match?.[1] ?? ''
+}
+
+function nodeId(name) {
+  return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function isModal(name) {
+  return name.endsWith('Modal')
+}
+
+// ── Parse App.vue template for @event bindings ───────────────
+
+function parseComponentBindings(template) {
+  const bindings = []
+  const componentPattern = /<([A-Z][A-Za-z]+)[\s\S]*?(?:\/>|<\/\1>)/g
+  let match
+
+  while ((match = componentPattern.exec(template)) !== null) {
+    const [block, component] = match
+    if (!VIEW_COMPONENTS.includes(component)) continue
+
+    const events = []
+    const eventPattern = /@([\w-]+)="([^"]+)"/g
+    let eventMatch
+    while ((eventMatch = eventPattern.exec(block)) !== null) {
+      events.push({ event: eventMatch[1], handler: eventMatch[2] })
+    }
+
+    bindings.push({ component, events })
+  }
+
+  return bindings
+}
+
+// ── Resolve handler string → target component ────────────────
+
+function resolveHandler(handler) {
+  if (handler.includes('openDetail')) return 'DetailModal'
+  if (handler.includes('openConsole')) return 'ConsoleModal'
+  if (handler.includes('openNewInstall')) return 'NewInstallModal'
+  if (handler.includes('openQuickInstall')) return 'QuickInstallModal'
+  if (handler.includes('openTrack')) return 'TrackModal'
+  if (handler.includes('openLoadSnapshot')) return 'LoadSnapshotModal'
+  if (handler.includes('showProgress')) return 'ProgressModal'
+  if (handler.includes('handleNavigateList')) return 'InstallationList'
+  if (handler.includes('handleProgressShowDetail')) return 'DetailModal'
+
+  if (handler.includes('switchView')) {
+    const viewMatch = handler.match(/switchView\('(\w+)'\)/)
+    if (viewMatch) return SWITCH_VIEW_MAP[viewMatch[1]] ?? null
+  }
+
+  // close/update handlers don't navigate
+  return null
+}
+
+// ── Parse child view emit() calls ────────────────────────────
+
+function parseChildEmits(filePath) {
+  try {
+    const content = readFileSync(filePath, 'utf-8')
+    const emits = new Set()
+    const emitPattern = /emit\(['"]([^'"]+)['"]/g
+    let m
+    while ((m = emitPattern.exec(content)) !== null) {
+      emits.add(m[1])
+    }
+    return [...emits]
+  } catch {
+    return []
+  }
+}
+
+// ── Build the graph ──────────────────────────────────────────
+
+function buildGraph() {
+  const appVue = readFileSync(APP_VUE, 'utf-8')
+  const template = extractTemplate(appVue)
+  const bindings = parseComponentBindings(template)
+
+  const nodes = new Set()
+  const edges = []
+  const edgeSet = new Set()
+
+  function addEdge(from, to, event) {
+    const key = `${from}→${to}:${event}`
+    if (edgeSet.has(key)) return
+    edgeSet.add(key)
+    nodes.add(from)
+    nodes.add(to)
+    edges.push({ from, to, event })
+  }
+
+  // Sidebar → tab views
+  nodes.add('Sidebar')
+  for (const view of TAB_VIEWS) {
+    addEdge('Sidebar', view, 'click')
+  }
+
+  // App.vue component bindings
+  for (const binding of bindings) {
+    nodes.add(binding.component)
+    for (const { event, handler } of binding.events) {
+      const target = resolveHandler(handler)
+      if (target) addEdge(binding.component, target, event)
+    }
+  }
+
+  // Child view emits → App.vue handler resolution
+  for (const [component, file] of Object.entries(VIEW_TO_FILE)) {
+    const emits = parseChildEmits(resolve(VIEWS_DIR, file))
+    const binding = bindings.find((b) => b.component === component)
+    for (const event of emits) {
+      const handler = binding?.events.find((e) => e.event === event)?.handler
+      if (handler) {
+        const target = resolveHandler(handler)
+        if (target) addEdge(component, target, event)
+      }
+    }
+  }
+
+  return { nodes, edges }
+}
+
+// ── Generate Mermaid ─────────────────────────────────────────
+
+function generateMermaid(nodes, edges) {
+  const lines = ['flowchart TD']
+
+  lines.push('')
+  lines.push('  %% Tab Views')
+  for (const node of nodes) {
+    if (TAB_VIEWS.includes(node)) {
+      lines.push(`  ${nodeId(node)}["${NODE_LABELS[node]}"]`)
+    }
+  }
+
+  lines.push('')
+  lines.push('  %% Modals')
+  for (const node of nodes) {
+    if (isModal(node)) {
+      lines.push(`  ${nodeId(node)}("${NODE_LABELS[node]}")`)
+    }
+  }
+
+  if (nodes.has('Sidebar')) {
+    lines.push('')
+    lines.push(`  sidebar{{"${NODE_LABELS.Sidebar}"}}`)
+  }
+
+  lines.push('')
+  lines.push('  %% Sidebar navigation')
+  for (const edge of edges) {
+    if (edge.from === 'Sidebar') {
+      lines.push(`  ${nodeId(edge.from)} --> ${nodeId(edge.to)}`)
+    }
+  }
+
+  lines.push('')
+  lines.push('  %% View → Modal transitions')
+  for (const edge of edges) {
+    if (edge.from !== 'Sidebar' && !isModal(edge.from)) {
+      lines.push(`  ${nodeId(edge.from)} -->|${edge.event}| ${nodeId(edge.to)}`)
+    }
+  }
+
+  lines.push('')
+  lines.push('  %% Modal → View/Modal transitions')
+  for (const edge of edges) {
+    if (isModal(edge.from)) {
+      lines.push(`  ${nodeId(edge.from)} -->|${edge.event}| ${nodeId(edge.to)}`)
+    }
+  }
+
+  lines.push('')
+  lines.push('  %% Styles')
+  lines.push('  classDef tabView fill:#1a1a2e,stroke:#00d9ff,color:#e0e0e0,stroke-width:2px')
+  lines.push('  classDef modal fill:#1a1a2e,stroke:#ff6b6b,color:#e0e0e0,stroke-width:2px')
+  lines.push('  classDef nav fill:#1a1a2e,stroke:#ffd93d,color:#e0e0e0,stroke-width:2px')
+
+  const tabNodes = [...nodes].filter((n) => TAB_VIEWS.includes(n)).map(nodeId).join(',')
+  const modalNodes = [...nodes].filter(isModal).map(nodeId).join(',')
+
+  if (tabNodes) lines.push(`  class ${tabNodes} tabView`)
+  if (modalNodes) lines.push(`  class ${modalNodes} modal`)
+  if (nodes.has('Sidebar')) lines.push('  class sidebar nav')
+
+  return lines.join('\n')
+}
+
+// ── Source file table ────────────────────────────────────────
+
+function generateSourceLinks(nodes) {
+  const lines = ['', '## Source Files', '']
+  lines.push('| View/Modal | Source |')
+  lines.push('|------------|--------|')
+  for (const node of nodes) {
+    const file = VIEW_TO_FILE[node]
+    if (file) {
+      const fullPath = `src/renderer/src/views/${file}`
+      lines.push(`| ${NODE_LABELS[node]} | [\`${fullPath}\`](../${fullPath}) |`)
+    }
+  }
+  return lines.join('\n')
+}
+
+// ── Main ─────────────────────────────────────────────────────
+
+const { nodes, edges } = buildGraph()
+const mermaid = generateMermaid(nodes, edges)
+
+const output = [
+  '# View/Modal Flow — Desktop 2.0',
+  '',
+  '> Auto-generated by `scripts/generate-view-flow.mjs` — do not edit manually.',
+  '>',
+  '> Run: `node scripts/generate-view-flow.mjs`',
+  '',
+  '## Navigation Graph',
+  '',
+  '```mermaid',
+  mermaid,
+  '```',
+  '',
+  '## Legend',
+  '',
+  '- **Blue border** = Tab view (sidebar navigation)',
+  '- **Red border** = Modal (overlay)',
+  '- **Yellow border** = Sidebar navigator',
+  '- Edge labels show the Vue event name that triggers the transition',
+  generateSourceLinks(nodes),
+  '',
+].join('\n')
+
+mkdirSync(dirname(OUTPUT), { recursive: true })
+writeFileSync(OUTPUT, output, 'utf-8')
+
+console.log(`✅ Generated ${OUTPUT}`)
+console.log(`   ${nodes.size} nodes, ${edges.length} edges`)