# lawebcapsule/d9 architecture

> Architecture diagram of the GitHub repository lawebcapsule/d9, 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/lawebcapsule/d9
- Repository: https://github.com/lawebcapsule/d9

## Overview

d9 combines a Vue-based no-code Data Studio with a Node.js API for managing data in SQL databases. A typical workflow starts when a user works in the Studio; its client requests server metadata and authentication options, then uses the API’s REST or GraphQL surface to manage records and platform configuration. The API also supports files, extensibility, and event-driven flows. The README documents multi-database support, while the tree shows database and storage layers; sampled excerpts do not establish every service-to-driver call, so those links are omitted.

Main entry points: [`api/src/app.ts`](https://github.com/lawebcapsule/d9/blob/main/api/src/app.ts) (HTTP application), [`app/src/api.ts`](https://github.com/lawebcapsule/d9/blob/main/app/src/api.ts) (API client), [`app/src/app.vue`](https://github.com/lawebcapsule/d9/blob/main/app/src/app.vue) (Studio shell), [`app/src/stores/server.ts`](https://github.com/lawebcapsule/d9/blob/main/app/src/stores/server.ts) (Server state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_studio["Data Studio"]
  node_studio_app["Studio shell<br/>[app.vue]"]
  node_server_store["Server state<br/>[server.ts]"]
  node_studio_api["API client<br/>[api.ts]"]
  node_query_builder["GraphQL query builder"]
end

subgraph group_api["API"]
  node_api_app["HTTP application<br/>[app.ts]"]
  node_server_routes["Server routes<br/>[server.ts]"]
  node_graphql_routes["GraphQL routes<br/>[graphql.ts]"]
end

subgraph group_identity["Identity"]
  node_auth_routes["Authentication routes<br/>[auth.ts]"]
  node_auth_providers["Auth providers<br/>[index.ts]"]
end

subgraph group_data["Data and Files"]
  node_data_routes["Data routes<br/>[items.ts]"]
  node_data_services["Data services<br/>[items.ts]"]
  node_sql_database[("SQL database<br/>[index.ts]")]
  node_file_routes["File routes<br/>[files.ts]"]
  node_file_services["File services<br/>[files.ts]"]
  node_storage["Storage drivers"]
end

subgraph group_platform["Platform Features"]
  node_extension_manager["Extension manager<br/>[extensions.ts]"]
  node_flow_manager["Flow manager<br/>[flows.ts]"]
end

node_user(("Studio user"))
node_identity_services{{"Identity providers"}}

node_user -->|"uses"| node_studio_app
node_studio_app -->|"reads state"| node_server_store
node_server_store -->|"requests metadata"| node_studio_api
node_studio_api -->|"sends requests"| node_api_app
node_api_app -->|"dispatches"| node_server_routes
node_server_routes -->|"returns response"| node_api_app
node_api_app -->|"dispatches"| node_auth_routes
node_api_app -->|"dispatches"| node_data_routes
node_data_routes -->|"handles requests"| node_data_services
node_api_app -->|"dispatches"| node_file_routes
node_file_routes -->|"handles requests"| node_file_services
node_file_services -->|"uses drivers"| node_storage
node_api_app -->|"registers providers"| node_auth_providers
node_auth_providers -.->|"authenticates"| node_identity_services
node_api_app -->|"initializes"| node_extension_manager
node_api_app -->|"initializes"| node_flow_manager
node_api_app -->|"dispatches"| node_graphql_routes
node_studio_api -->|"builds queries"| node_query_builder

click node_studio_app "https://github.com/lawebcapsule/d9/blob/main/app/src/app.vue"
click node_server_store "https://github.com/lawebcapsule/d9/blob/main/app/src/stores/server.ts"
click node_studio_api "https://github.com/lawebcapsule/d9/blob/main/app/src/api.ts"
click node_query_builder "https://github.com/lawebcapsule/d9/blob/main/app/src/utils/query-to-gql-string.ts"
click node_api_app "https://github.com/lawebcapsule/d9/blob/main/api/src/app.ts"
click node_server_routes "https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/server.ts"
click node_auth_routes "https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/auth.ts"
click node_auth_providers "https://github.com/lawebcapsule/d9/blob/main/api/src/auth/drivers/index.ts"
click node_data_routes "https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/items.ts"
click node_data_services "https://github.com/lawebcapsule/d9/blob/main/api/src/services/items.ts"
click node_sql_database "https://github.com/lawebcapsule/d9/blob/main/api/src/database/index.ts"
click node_file_routes "https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/files.ts"
click node_file_services "https://github.com/lawebcapsule/d9/blob/main/api/src/services/files.ts"
click node_storage "https://github.com/lawebcapsule/d9/blob/main/api/src/storage/get-storage-driver.ts"
click node_extension_manager "https://github.com/lawebcapsule/d9/blob/main/api/src/extensions.ts"
click node_flow_manager "https://github.com/lawebcapsule/d9/blob/main/api/src/flows.ts"
click node_graphql_routes "https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/graphql.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_studio_app,node_server_store,node_studio_api,node_query_builder,node_user toneBlue
class node_api_app,node_server_routes,node_graphql_routes toneAmber
class node_auth_routes,node_auth_providers toneMint
class node_data_routes,node_data_services,node_sql_database,node_file_routes,node_file_services,node_storage toneRose
class node_extension_manager,node_flow_manager,node_identity_services toneIndigo
```

## Components

### Data Studio

- [Studio shell](https://github.com/lawebcapsule/d9/blob/main/app/src/app.vue): `app/src/app.vue`
- [Server state](https://github.com/lawebcapsule/d9/blob/main/app/src/stores/server.ts): `app/src/stores/server.ts`
- [API client](https://github.com/lawebcapsule/d9/blob/main/app/src/api.ts): `app/src/api.ts`
- [GraphQL query builder](https://github.com/lawebcapsule/d9/blob/main/app/src/utils/query-to-gql-string.ts): `app/src/utils/query-to-gql-string.ts`

### API

- [HTTP application](https://github.com/lawebcapsule/d9/blob/main/api/src/app.ts): `api/src/app.ts`
- [Server routes](https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/server.ts): `api/src/controllers/server.ts`
- [GraphQL routes](https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/graphql.ts): `api/src/controllers/graphql.ts`

### Identity

- [Authentication routes](https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/auth.ts): `api/src/controllers/auth.ts`
- [Auth providers](https://github.com/lawebcapsule/d9/blob/main/api/src/auth/drivers/index.ts): `api/src/auth/drivers/index.ts`

### Data and Files

- [Data routes](https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/items.ts): `api/src/controllers/items.ts`
- [Data services](https://github.com/lawebcapsule/d9/blob/main/api/src/services/items.ts): `api/src/services/items.ts`
- [SQL database](https://github.com/lawebcapsule/d9/blob/main/api/src/database/index.ts): `api/src/database/index.ts`
- [File routes](https://github.com/lawebcapsule/d9/blob/main/api/src/controllers/files.ts): `api/src/controllers/files.ts`
- [File services](https://github.com/lawebcapsule/d9/blob/main/api/src/services/files.ts): `api/src/services/files.ts`
- [Storage drivers](https://github.com/lawebcapsule/d9/blob/main/api/src/storage/get-storage-driver.ts): `api/src/storage/get-storage-driver.ts`

### Platform Features

- [Extension manager](https://github.com/lawebcapsule/d9/blob/main/api/src/extensions.ts): `api/src/extensions.ts`
- [Flow manager](https://github.com/lawebcapsule/d9/blob/main/api/src/flows.ts): `api/src/flows.ts`

### Other components

- **Studio user**
- **Identity providers**

## Connections

- Studio user → Studio shell: uses
- Studio shell → Server state: reads state
- Server state → API client: requests metadata
- API client → HTTP application: sends requests
- HTTP application → Server routes: dispatches
- Server routes → HTTP application: returns response
- HTTP application → Authentication routes: dispatches
- HTTP application → Data routes: dispatches
- Data routes → Data services: handles requests
- HTTP application → File routes: dispatches
- File routes → File services: handles requests
- File services → Storage drivers: uses drivers
- HTTP application → Auth providers: registers providers
- Auth providers → Identity providers: authenticates
- HTTP application → Extension manager: initializes
- HTTP application → Flow manager: initializes
- HTTP application → GraphQL routes: dispatches
- API client → GraphQL query builder: builds queries