# watanabe3tipapa/svg-generator architecture

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

- Interactive diagram: https://gitdiagram.com/watanabe3tipapa/svg-generator
- Repository: https://github.com/watanabe3tipapa/svg-generator

## Overview

SVG Generator’s main product workflow is the full-stack Studio: users configure and preview a logo, export or edit SVG, optionally request AI style suggestions, and save or share projects. The README also describes a separate static editor, but its `docs/` files are absent from the supplied tree, so its implementation cannot be mapped here. Several Studio relationships are supported by excerpts or the README; unsampled UI and service wiring is omitted rather than inferred.

Main entry points: [`studio/client/src/pages/Home.tsx`](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/pages/Home.tsx) (Studio workspace), [`studio/server/routers.ts`](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/routers.ts) (API procedures), [`studio/server/_core/llm.ts`](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/llm.ts) (AI suggestions), [`studio/server/_core/sdk.ts`](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/sdk.ts) (Auth SDK)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Studio interface"]
  node_home["Studio workspace<br/>[Home.tsx]"]
  node_app["App router<br/>[App.tsx]"]
  node_api_client["tRPC client<br/>[main.tsx]"]
end

subgraph group_design["Logo creation"]
  node_svg["SVG engine<br/>[svgStudio.ts]"]
  node_local["Browser autosave<br/>[Home.tsx]"]
end

subgraph group_api["API and services"]
  node_routes["API procedures<br/>[routers.ts]"]
  node_llm["AI suggestions<br/>[llm.ts]"]
  node_system["System procedures<br/>[systemRouter.ts]"]
  node_notify["Owner notifications<br/>[notification.ts]"]
end

subgraph group_persistence["Identity and projects"]
  node_projects["Project operations<br/>[svgProjects.ts]"]
  node_database[("Project database<br/>[schema.ts]")]
  node_db_access["Database access<br/>[db.ts]"]
  node_oauth["OAuth integration<br/>[oauth.ts]"]
  node_sdk["Auth SDK<br/>[sdk.ts]"]
end

node_user(("Logo creator"))
node_ai_service{{"AI service"}}
node_forge{{"Forge services"}}

node_user -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_user -->|"configures"| node_home
node_home -->|"generates and exports"| node_svg
node_home -.->|"autosaves"| node_local
node_home -.->|"requests services"| node_api_client
node_api_client -->|"calls"| node_routes
node_routes -->|"dispatches"| node_projects
node_projects -->|"reads and writes"| node_db_access
node_db_access -->|"queries"| node_database
node_routes -->|"requests suggestions"| node_llm
node_llm -->|"sends prompts"| node_ai_service
node_routes -->|"registers"| node_system
node_system -->|"calls"| node_notify
node_oauth -->|"uses"| node_sdk
node_sdk -->|"accesses users"| node_db_access
node_sdk -->|"uses schema"| node_database
node_llm -->|"calls"| node_forge
node_notify -.->|"uses configured service"| node_forge

click node_home "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/pages/Home.tsx"
click node_app "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/App.tsx"
click node_svg "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/lib/svgStudio.ts"
click node_local "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/pages/Home.tsx"
click node_api_client "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/main.tsx"
click node_routes "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/routers.ts"
click node_projects "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/svgProjects.ts"
click node_database "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/drizzle/schema.ts"
click node_db_access "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/db.ts"
click node_llm "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/llm.ts"
click node_oauth "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/oauth.ts"
click node_sdk "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/sdk.ts"
click node_system "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/systemRouter.ts"
click node_notify "https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/notification.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_home,node_app,node_api_client toneBlue
class node_svg,node_local toneAmber
class node_routes,node_llm,node_system,node_notify toneMint
class node_projects,node_database,node_db_access,node_oauth,node_sdk toneRose
class node_user,node_ai_service,node_forge toneIndigo
```

## Components

### Studio interface

- [Studio workspace](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/pages/Home.tsx): `studio/client/src/pages/Home.tsx`
- [App router](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/App.tsx): `studio/client/src/App.tsx`
- [tRPC client](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/main.tsx): `studio/client/src/main.tsx`

### Logo creation

- [SVG engine](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/lib/svgStudio.ts): `studio/client/src/lib/svgStudio.ts`
- [Browser autosave](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/client/src/pages/Home.tsx): `studio/client/src/pages/Home.tsx`

### API and services

- [API procedures](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/routers.ts): `studio/server/routers.ts`
- [AI suggestions](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/llm.ts): `studio/server/_core/llm.ts`
- [System procedures](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/systemRouter.ts): `studio/server/_core/systemRouter.ts`
- [Owner notifications](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/notification.ts): `studio/server/_core/notification.ts`

### Identity and projects

- [Project operations](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/svgProjects.ts): `studio/server/svgProjects.ts`
- [Project database](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/drizzle/schema.ts): `studio/drizzle/schema.ts`
- [Database access](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/db.ts): `studio/server/db.ts`
- [OAuth integration](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/oauth.ts): `studio/server/_core/oauth.ts`
- [Auth SDK](https://github.com/watanabe3tipapa/svg-generator/blob/main/studio/server/_core/sdk.ts): `studio/server/_core/sdk.ts`

### Other components

- **Logo creator**
- **AI service**
- **Forge services**

## Connections

- Logo creator → App router: opens
- App router → Studio workspace: routes to (evidence: `studio/client/src/App.tsx`)
- Logo creator → Studio workspace: configures
- Studio workspace → SVG engine: generates and exports
- Studio workspace → Browser autosave: autosaves (evidence: `studio/client/src/pages/Home.tsx`)
- Studio workspace → tRPC client: requests services
- tRPC client → API procedures: calls (evidence: `studio/client/src/main.tsx`)
- API procedures → Project operations: dispatches (evidence: `studio/server/routers.ts`)
- Project operations → Database access: reads and writes (evidence: `studio/server/svgProjects.ts`)
- Database access → Project database: queries (evidence: `studio/server/db.ts`)
- API procedures → AI suggestions: requests suggestions (evidence: `studio/server/routers.ts`)
- AI suggestions → AI service: sends prompts (evidence: `studio/server/_core/llm.ts`)
- API procedures → System procedures: registers (evidence: `studio/server/routers.ts`)
- System procedures → Owner notifications: calls (evidence: `studio/server/_core/systemRouter.ts`)
- OAuth integration → Auth SDK: uses (evidence: `studio/server/_core/oauth.ts`)
- Auth SDK → Database access: accesses users (evidence: `studio/server/_core/sdk.ts`)
- Auth SDK → Project database: uses schema (evidence: `studio/server/_core/sdk.ts`)
- AI suggestions → Forge services: calls (evidence: `studio/server/_core/llm.ts`)
- Owner notifications → Forge services: uses configured service