# hayden-cn/comfyui-model-manager architecture

> Architecture diagram of the GitHub repository hayden-cn/comfyui-model-manager, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/hayden-cn/comfyui-model-manager
- Repository: https://github.com/hayden-cn/comfyui-model-manager

## Overview

ComfyUI Model Manager is a ComfyUI extension for browsing, managing, downloading, uploading, and scanning model files. Users open the manager, browse or search models, inspect and edit model details, and can download models from a URL or upload them; scan information is a separate batch workflow. The UI also supports sending models and embedded workflows into ComfyUI’s node graph. The excerpts show the app entry point, model and download hooks, and selected backend routes; connections for unsampled UI and backend internals are limited to documented capabilities.

Main entry points: [`src/hooks/request.ts`](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/hooks/request.ts) (HTTP client), [`src/App.vue`](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/App.vue) (App shell), [`src/hooks/model.ts`](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/hooks/model.ts) (Model state), [`py/information.py`](https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/information.py) (Information API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["ComfyUI interface"]
  node_extension["Extension bootstrap<br/>[__init__.py]"]
  node_app["App shell<br/>[App.vue]"]
  node_manager_ui["Model browser<br/>[DialogManager.vue]"]
  node_explorer_ui["Folder explorer<br/>[DialogExplorer.vue]"]
  node_detail_ui["Model details"]
  node_preview_ui["Preview editor<br/>[ModelPreview.vue]"]
  node_scan_ui["Information scan<br/>[DialogScanning.vue]"]
  node_download_ui["Download dialog<br/>[DialogDownload.vue]"]
  node_upload_ui["Upload dialog<br/>[DialogUpload.vue]"]
end

subgraph group_model["Model management"]
  node_model_hook["Model state<br/>[model.ts]"]
  node_legacy["Graph integration<br/>[legacy.ts]"]
end

subgraph group_transfer["Model transfers"]
  node_download_hook["Download state<br/>[download.ts]"]
end

subgraph group_backend["Backend services"]
  node_request["HTTP client<br/>[request.ts]"]
  node_manager_api["Model API<br/>[manager.py]"]
  node_info_api["Information API<br/>[information.py]"]
  node_download_api["Download service<br/>[download.py]"]
  node_upload_api["Upload service<br/>[upload.py]"]
  node_utils["Model utilities<br/>[utils.py]"]
end

subgraph group_state["Filesystem state"]
  node_disk[("Model files")]
end

node_user(("ComfyUI user"))
node_comfy(("ComfyUI graph"))
node_remote(("Model providers"))

node_user -->|"opens manager"| node_app
node_extension -->|"mounts UI"| node_app
node_app -->|"opens browser"| node_manager_ui
node_app -->|"opens explorer"| node_explorer_ui
node_app -->|"opens scan"| node_scan_ui
node_app -->|"opens downloads"| node_download_ui
node_app -->|"opens upload"| node_upload_ui
node_manager_ui -->|"reads models"| node_model_hook
node_explorer_ui -->|"browses models"| node_model_hook
node_model_hook -->|"opens details"| node_detail_ui
node_detail_ui -->|"saves edits"| node_model_hook
node_detail_ui -->|"edits preview"| node_preview_ui
node_manager_ui -->|"adds graph nodes"| node_legacy
node_legacy -->|"updates graph"| node_comfy
node_download_ui -->|"manages tasks"| node_download_hook
node_download_ui -.->|"selects model source"| node_remote
node_download_hook -->|"requests data"| node_request
node_model_hook -->|"requests model data"| node_request
node_scan_ui -->|"starts scan"| node_request
node_upload_ui -->|"sends files"| node_request
node_request -->|"calls model routes"| node_manager_api
node_request -->|"calls info routes"| node_info_api
node_request -->|"calls download routes"| node_download_api
node_request -->|"calls upload routes"| node_upload_api
node_manager_api -->|"resolves model paths"| node_utils
node_manager_api -->|"lists and edits"| node_disk
node_info_api -->|"reads model files"| node_disk
node_info_api -.->|"fetches metadata"| node_remote
node_download_api -->|"downloads files"| node_remote
node_download_api -->|"writes downloads"| node_disk
node_upload_api -->|"stores uploads"| node_disk
node_info_api -->|"queues scan downloads"| node_download_api

click node_extension "https://github.com/hayden-cn/comfyui-model-manager/blob/main/__init__.py"
click node_app "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/App.vue"
click node_manager_ui "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogManager.vue"
click node_explorer_ui "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogExplorer.vue"
click node_detail_ui "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogModelDetail.vue"
click node_preview_ui "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/ModelPreview.vue"
click node_scan_ui "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogScanning.vue"
click node_download_ui "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogDownload.vue"
click node_upload_ui "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogUpload.vue"
click node_model_hook "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/hooks/model.ts"
click node_legacy "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/utils/legacy.ts"
click node_download_hook "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/hooks/download.ts"
click node_request "https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/hooks/request.ts"
click node_manager_api "https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/manager.py"
click node_info_api "https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/information.py"
click node_download_api "https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/download.py"
click node_upload_api "https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/upload.py"
click node_utils "https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/utils.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_extension,node_app,node_manager_ui,node_explorer_ui,node_detail_ui,node_preview_ui,node_scan_ui,node_download_ui,node_upload_ui,node_user,node_comfy toneBlue
class node_model_hook,node_legacy toneAmber
class node_download_hook toneMint
class node_request,node_manager_api,node_info_api,node_download_api,node_upload_api,node_utils toneRose
class node_disk,node_remote toneIndigo
```

## Components

### ComfyUI interface

- [Extension bootstrap](https://github.com/hayden-cn/comfyui-model-manager/blob/main/__init__.py): `__init__.py`
- [App shell](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/App.vue): `src/App.vue`
- [Model browser](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogManager.vue): `src/components/DialogManager.vue`
- [Folder explorer](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogExplorer.vue): `src/components/DialogExplorer.vue`
- [Model details](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogModelDetail.vue): `src/components/DialogModelDetail.vue`
- [Preview editor](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/ModelPreview.vue): `src/components/ModelPreview.vue`
- [Information scan](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogScanning.vue): `src/components/DialogScanning.vue`
- [Download dialog](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogDownload.vue): `src/components/DialogDownload.vue`
- [Upload dialog](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/components/DialogUpload.vue): `src/components/DialogUpload.vue`

### Model management

- [Model state](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/hooks/model.ts): `src/hooks/model.ts`
- [Graph integration](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/utils/legacy.ts): `src/utils/legacy.ts`

### Model transfers

- [Download state](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/hooks/download.ts): `src/hooks/download.ts`

### Backend services

- [HTTP client](https://github.com/hayden-cn/comfyui-model-manager/blob/main/src/hooks/request.ts): `src/hooks/request.ts`
- [Model API](https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/manager.py): `py/manager.py`
- [Information API](https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/information.py): `py/information.py`
- [Download service](https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/download.py): `py/download.py`
- [Upload service](https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/upload.py): `py/upload.py`
- [Model utilities](https://github.com/hayden-cn/comfyui-model-manager/blob/main/py/utils.py): `py/utils.py`

### Filesystem state

- **Model files**

### Other components

- **ComfyUI user**
- **ComfyUI graph**
- **Model providers**

## Connections

- ComfyUI user → App shell: opens manager
- Extension bootstrap → App shell: mounts UI
- App shell → Model browser: opens browser
- App shell → Folder explorer: opens explorer
- App shell → Information scan: opens scan
- App shell → Download dialog: opens downloads
- App shell → Upload dialog: opens upload
- Model browser → Model state: reads models
- Folder explorer → Model state: browses models
- Model state → Model details: opens details
- Model details → Model state: saves edits
- Model details → Preview editor: edits preview
- Model browser → Graph integration: adds graph nodes
- Graph integration → ComfyUI graph: updates graph
- Download dialog → Download state: manages tasks
- Download dialog → Model providers: selects model source
- Download state → HTTP client: requests data
- Model state → HTTP client: requests model data
- Information scan → HTTP client: starts scan
- Upload dialog → HTTP client: sends files
- HTTP client → Model API: calls model routes
- HTTP client → Information API: calls info routes
- HTTP client → Download service: calls download routes
- HTTP client → Upload service: calls upload routes
- Model API → Model utilities: resolves model paths
- Model API → Model files: lists and edits
- Information API → Model files: reads model files
- Information API → Model providers: fetches metadata
- Download service → Model providers: downloads files
- Download service → Model files: writes downloads
- Upload service → Model files: stores uploads
- Information API → Download service: queues scan downloads