# igbojionu/django_builder architecture

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

- Interactive diagram: https://gitdiagram.com/igbojionu/django_builder
- Repository: https://github.com/igbojionu/django_builder

## Overview

Django Builder lets users define Django projects, apps, models, fields, and relationships in a web UI or through a CLI, then generates a runnable Django project archive. The newer UI persists project structure through Firebase and reconstructs core domain objects for editing; the generator renders project files and packages them. The repository also contains an older web UI. The README documents CLI archive generation and optional HTMX/Channels capabilities; source excerpts establish only some internal links, so unsampled links are omitted.

Main entry points: [`lib/djangobuilder-core/src/rendering.ts`](https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/rendering.ts) (File renderer), [`packages/djangobuilder4/src/stores/user.ts`](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/stores/user.ts) (User and project state), [`packages/djangobuilder4/src/views/ProjectsView.vue`](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/views/ProjectsView.vue) (Project list), [`packages/djangobuilder4/src/firebase.ts`](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/firebase.ts) (Firebase data API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Project editor"]
  node_projects_view["Project list<br/>[ProjectsView.vue]"]
  node_project_editor["Project editor<br/>[ProjectBody.vue]"]
  node_project_tree["Project tree<br/>[ProjectTree.vue]"]
  node_model_editor["Model editor<br/>[ModelEditor.vue]"]
  node_user_store["User and project state<br/>[user.ts]"]
  node_firebase_api["Firebase data API<br/>[firebase.ts]"]
end

subgraph group_legacy["Legacy web UI"]
  node_legacy_routes["Legacy routes<br/>[router.js]"]
  node_legacy_app["Legacy project UI<br/>[AppView.vue]"]
  node_legacy_forms["Generated forms<br/>[FormGenerator.vue]"]
end

subgraph group_generator["Project generator"]
  node_domain_model["Django project model<br/>[api.ts]"]
  node_generator_api["Generation API<br/>[api.ts]"]
  node_renderer["File renderer<br/>[rendering.ts]"]
  node_archive["Tar archive<br/>[tar.ts]"]
  node_cli["Command-line interface<br/>[cli.ts]"]
end

subgraph group_django["Generated Django"]
  node_django_config["Django project config<br/>[settings.ts]"]
  node_django_app["Generated app modules"]
  node_django_templates["Generated templates"]
  node_htmx["HTMX support<br/>[htmx.ts]"]
  node_channels["Channels routing<br/>[routing.ts]"]
end

node_user(("Project author"))
node_firestore[("Firebase Firestore")]
node_auth["Firebase Auth"]

node_user -->|"creates projects"| node_projects_view
node_projects_view -->|"reads projects"| node_user_store
node_projects_view -->|"creates project"| node_firebase_api
node_project_editor -->|"uses tree"| node_project_tree
node_project_editor -->|"uses state"| node_user_store
node_user_store -->|"fetches and mutates"| node_firebase_api
node_firebase_api -->|"reads and writes"| node_firestore
node_user_store -->|"builds core objects"| node_domain_model
node_user -->|"navigates"| node_legacy_routes
node_legacy_routes -->|"routes to"| node_legacy_app
node_legacy_app -->|"uses form generator"| node_legacy_forms
node_user -->|"runs generator"| node_cli
node_cli -.->|"generates project"| node_generator_api
node_generator_api -.->|"uses project definitions"| node_domain_model
node_renderer -->|"renders template"| node_django_config
node_renderer -->|"renders app files"| node_django_app
node_renderer -->|"renders templates"| node_django_templates
node_renderer -->|"adds files"| node_archive
node_renderer -->|"renders optional files"| node_htmx
node_renderer -->|"renders routing"| node_channels
node_htmx -.->|"uses templates"| node_django_templates

click node_projects_view "https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/views/ProjectsView.vue"
click node_project_editor "https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/components/ProjectBody.vue"
click node_project_tree "https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/components/ProjectTree.vue"
click node_model_editor "https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/components/ModelEditor.vue"
click node_user_store "https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/stores/user.ts"
click node_firebase_api "https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/firebase.ts"
click node_legacy_routes "https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder.io/src/router.js"
click node_legacy_app "https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder.io/src/components/AppView.vue"
click node_legacy_forms "https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder.io/src/components/forms/FormGenerator.vue"
click node_domain_model "https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/api.ts"
click node_generator_api "https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/api.ts"
click node_renderer "https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/rendering.ts"
click node_archive "https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/tar.ts"
click node_cli "https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/cli.ts"
click node_django_config "https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/django/python/settings.ts"
click node_django_app "https://github.com/igbojionu/django_builder/tree/master/lib/djangobuilder-core/src/django/python/app"
click node_django_templates "https://github.com/igbojionu/django_builder/tree/master/lib/djangobuilder-core/src/django/templates"
click node_htmx "https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/django/python/app/htmx.ts"
click node_channels "https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/django/python/routing.ts"

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_projects_view,node_project_editor,node_project_tree,node_model_editor,node_user_store,node_firebase_api toneBlue
class node_legacy_routes,node_legacy_app,node_legacy_forms,node_firestore toneAmber
class node_domain_model,node_generator_api,node_renderer,node_archive,node_cli toneMint
class node_django_config,node_django_app,node_django_templates,node_htmx,node_channels toneRose
class node_user,node_auth toneIndigo
```

## Components

### Project editor

- [Project list](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/views/ProjectsView.vue): `packages/djangobuilder4/src/views/ProjectsView.vue`
- [Project editor](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/components/ProjectBody.vue): `packages/djangobuilder4/src/components/ProjectBody.vue`
- [Project tree](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/components/ProjectTree.vue): `packages/djangobuilder4/src/components/ProjectTree.vue`
- [Model editor](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/components/ModelEditor.vue): `packages/djangobuilder4/src/components/ModelEditor.vue`
- [User and project state](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/stores/user.ts): `packages/djangobuilder4/src/stores/user.ts`
- [Firebase data API](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder4/src/firebase.ts): `packages/djangobuilder4/src/firebase.ts`

### Legacy web UI

- [Legacy routes](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder.io/src/router.js): `packages/djangobuilder.io/src/router.js`
- [Legacy project UI](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder.io/src/components/AppView.vue): `packages/djangobuilder.io/src/components/AppView.vue`
- [Generated forms](https://github.com/igbojionu/django_builder/blob/master/packages/djangobuilder.io/src/components/forms/FormGenerator.vue): `packages/djangobuilder.io/src/components/forms/FormGenerator.vue`

### Project generator

- [Django project model](https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/api.ts): `lib/djangobuilder-core/src/api.ts`
- [Generation API](https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/api.ts): `lib/djangobuilder-core/src/api.ts`
- [File renderer](https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/rendering.ts): `lib/djangobuilder-core/src/rendering.ts`
- [Tar archive](https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/tar.ts): `lib/djangobuilder-core/src/tar.ts`
- [Command-line interface](https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/cli.ts): `lib/djangobuilder-core/src/cli.ts`

### Generated Django

- [Django project config](https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/django/python/settings.ts): `lib/djangobuilder-core/src/django/python/settings.ts`
- [Generated app modules](https://github.com/igbojionu/django_builder/tree/master/lib/djangobuilder-core/src/django/python/app): `lib/djangobuilder-core/src/django/python/app`
- [Generated templates](https://github.com/igbojionu/django_builder/tree/master/lib/djangobuilder-core/src/django/templates): `lib/djangobuilder-core/src/django/templates`
- [HTMX support](https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/django/python/app/htmx.ts): `lib/djangobuilder-core/src/django/python/app/htmx.ts`
- [Channels routing](https://github.com/igbojionu/django_builder/blob/master/lib/djangobuilder-core/src/django/python/routing.ts): `lib/djangobuilder-core/src/django/python/routing.ts`

### Other components

- **Project author**
- **Firebase Firestore**
- **Firebase Auth**

## Connections

- Project author → Project list: creates projects (evidence: `packages/djangobuilder4/src/views/ProjectsView.vue`)
- Project list → User and project state: reads projects (evidence: `packages/djangobuilder4/src/views/ProjectsView.vue`)
- Project list → Firebase data API: creates project (evidence: `packages/djangobuilder4/src/views/ProjectsView.vue`)
- Project editor → Project tree: uses tree (evidence: `packages/djangobuilder4/src/components/ProjectBody.vue`)
- Project editor → User and project state: uses state (evidence: `packages/djangobuilder4/src/components/ProjectBody.vue`)
- User and project state → Firebase data API: fetches and mutates (evidence: `packages/djangobuilder4/src/stores/user.ts`)
- Firebase data API → Firebase Firestore: reads and writes (evidence: `packages/djangobuilder4/src/firebase.ts`)
- User and project state → Django project model: builds core objects (evidence: `packages/djangobuilder4/src/stores/user.ts`)
- Project author → Legacy routes: navigates (evidence: `packages/djangobuilder.io/src/router.js`)
- Legacy routes → Legacy project UI: routes to (evidence: `packages/djangobuilder.io/src/router.js`)
- Legacy project UI → Generated forms: uses form generator (evidence: `packages/djangobuilder.io/src/components/forms/FormGenerator.vue`)
- Project author → Command-line interface: runs generator
- Command-line interface → Generation API: generates project
- Generation API → Django project model: uses project definitions (evidence: `lib/djangobuilder-core/src/api.ts`)
- File renderer → Django project config: renders template (evidence: `lib/djangobuilder-core/src/rendering.ts`)
- File renderer → Generated app modules: renders app files (evidence: `lib/djangobuilder-core/src/rendering.ts`)
- File renderer → Generated templates: renders templates (evidence: `lib/djangobuilder-core/src/rendering.ts`)
- File renderer → Tar archive: adds files (evidence: `lib/djangobuilder-core/src/rendering.ts`)
- File renderer → HTMX support: renders optional files (evidence: `lib/djangobuilder-core/src/rendering.ts`)
- File renderer → Channels routing: renders routing (evidence: `lib/djangobuilder-core/src/rendering.ts`)
- HTMX support → Generated templates: uses templates