# appsbender/ngx-org-chart-workspace architecture

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

- Interactive diagram: https://gitdiagram.com/appsbender/ngx-org-chart-workspace
- Repository: https://github.com/appsbender/ngx-org-chart-workspace

## Overview

This Angular library renders an organization hierarchy from caller-supplied node data. Its main workflow is to accept a root node, recursively display employee nodes, and emit click, expand, and collapse events. It also exports a viewer that fits and scales chart content, and supports both module-based and standalone consumption. The README documents responsive layout and CSS-variable theming; zoom and pan are described as roadmap items, while the sampled viewer already implements zoom controls. The component templates and styles were not excerpted, so rendering and styling links are documented rather than source-verified.

Main entry points: [`projects/org-chart/src/lib/components/org-chart/org-chart.component.ts`](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/org-chart/org-chart.component.ts) (Chart component), [`projects/org-chart/src/public-api.ts`](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/public-api.ts) (Public exports), [`projects/org-chart/src/lib/components/employee/employee.component.ts`](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/employee/employee.component.ts) (Employee component), [`projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.ts`](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.ts) (Viewer component)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["Library API"]
  node_public_api["Public exports<br/>[public-api.ts]"]
  node_module["Org chart module"]
end

subgraph group_chart["Chart Rendering"]
  node_chart_component["Chart component"]
  node_employee_component["Employee component"]
  node_employee_view["Employee node view"]
  node_chart_view["Chart template"]
  node_chart_styles["Chart styles<br/>[org-chart.scss]"]
  node_employee_styles["Employee styles"]
end

subgraph group_viewer["Chart Viewer"]
  node_viewer_component["Viewer component"]
  node_viewer_view["Viewer template"]
  node_viewer_styles["Viewer styles"]
  node_theme["Theme variables<br/>[_theme.scss]"]
end

subgraph group_model["Data and Events"]
  node_node_model["Organization node model"]
  node_event_model["Chart event model<br/>[org-chart-event.ts]"]
end

node_consumer(("Angular consumer"))

node_consumer -->|"imports library"| node_public_api
node_public_api -->|"exports module"| node_module
node_public_api -->|"exports component"| node_chart_component
node_public_api -->|"exports component"| node_employee_component
node_public_api -->|"exports viewer"| node_viewer_component
node_public_api -->|"exports model"| node_node_model
node_public_api -->|"exports events"| node_event_model
node_module -->|"declares component"| node_chart_component
node_module -->|"declares component"| node_employee_component
node_module -.->|"declares component"| node_viewer_component
node_chart_component -->|"uses node data"| node_node_model
node_chart_component -->|"emits events"| node_event_model
node_chart_component -.->|"renders template"| node_chart_view
node_chart_view -.->|"renders nodes"| node_employee_component
node_employee_component -->|"uses employee data"| node_node_model
node_employee_component -.->|"renders template"| node_employee_view
node_chart_component -.->|"uses styles"| node_chart_styles
node_employee_component -.->|"uses styles"| node_employee_styles
node_viewer_component -.->|"renders template"| node_viewer_view
node_viewer_component -.->|"uses styles"| node_viewer_styles
node_theme -.->|"themes chart"| node_chart_styles
node_event_model -->|"types event node"| node_node_model
node_consumer -.->|"provides root node"| node_chart_component
node_chart_component -.->|"emits node events"| node_consumer
node_consumer -.->|"wraps chart"| node_viewer_component

click node_public_api "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/public-api.ts"
click node_module "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/org-chart.module.ts"
click node_chart_component "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/org-chart/org-chart.component.ts"
click node_employee_component "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/employee/employee.component.ts"
click node_employee_view "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/employee/employee.component.html"
click node_chart_view "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/org-chart/org-chart.component.html"
click node_chart_styles "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/org-chart.scss"
click node_employee_styles "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/employee/employee.component.scss"
click node_viewer_component "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.ts"
click node_viewer_view "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.html"
click node_viewer_styles "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.scss"
click node_theme "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/styles/_theme.scss"
click node_node_model "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/models/employee.interface.ts"
click node_event_model "https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/models/org-chart-event.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_public_api,node_module toneBlue
class node_chart_component,node_employee_component,node_employee_view,node_chart_view,node_chart_styles,node_employee_styles toneAmber
class node_viewer_component,node_viewer_view,node_viewer_styles,node_theme toneMint
class node_node_model,node_event_model toneRose
class node_consumer toneIndigo
```

## Components

### Library API

- [Public exports](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/public-api.ts): `projects/org-chart/src/public-api.ts`
- [Org chart module](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/org-chart.module.ts): `projects/org-chart/src/lib/org-chart.module.ts`

### Chart Rendering

- [Chart component](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/org-chart/org-chart.component.ts): `projects/org-chart/src/lib/components/org-chart/org-chart.component.ts`
- [Employee component](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/employee/employee.component.ts): `projects/org-chart/src/lib/components/employee/employee.component.ts`
- [Employee node view](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/employee/employee.component.html): `projects/org-chart/src/lib/components/employee/employee.component.html`
- [Chart template](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/org-chart/org-chart.component.html): `projects/org-chart/src/lib/components/org-chart/org-chart.component.html`
- [Chart styles](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/org-chart.scss): `projects/org-chart/src/lib/org-chart.scss`
- [Employee styles](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/employee/employee.component.scss): `projects/org-chart/src/lib/components/employee/employee.component.scss`

### Chart Viewer

- [Viewer component](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.ts): `projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.ts`
- [Viewer template](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.html): `projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.html`
- [Viewer styles](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.scss): `projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.scss`
- [Theme variables](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/styles/_theme.scss): `projects/org-chart/src/lib/styles/_theme.scss`

### Data and Events

- [Organization node model](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/models/employee.interface.ts): `projects/org-chart/src/lib/models/employee.interface.ts`
- [Chart event model](https://github.com/appsbender/ngx-org-chart-workspace/blob/master/projects/org-chart/src/lib/models/org-chart-event.ts): `projects/org-chart/src/lib/models/org-chart-event.ts`

### Other components

- **Angular consumer**

## Connections

- Angular consumer → Public exports: imports library (evidence: `projects/org-chart/src/public-api.ts`)
- Public exports → Org chart module: exports module (evidence: `projects/org-chart/src/public-api.ts`)
- Public exports → Chart component: exports component (evidence: `projects/org-chart/src/public-api.ts`)
- Public exports → Employee component: exports component (evidence: `projects/org-chart/src/public-api.ts`)
- Public exports → Viewer component: exports viewer (evidence: `projects/org-chart/src/public-api.ts`)
- Public exports → Organization node model: exports model (evidence: `projects/org-chart/src/public-api.ts`)
- Public exports → Chart event model: exports events (evidence: `projects/org-chart/src/public-api.ts`)
- Org chart module → Chart component: declares component (evidence: `projects/org-chart/src/lib/org-chart.module.ts`)
- Org chart module → Employee component: declares component (evidence: `projects/org-chart/src/lib/org-chart.module.ts`)
- Org chart module → Viewer component: declares component
- Chart component → Organization node model: uses node data (evidence: `projects/org-chart/src/lib/components/org-chart/org-chart.component.ts`)
- Chart component → Chart event model: emits events (evidence: `projects/org-chart/src/lib/components/org-chart/org-chart.component.ts`)
- Chart component → Chart template: renders template
- Chart template → Employee component: renders nodes
- Employee component → Organization node model: uses employee data (evidence: `projects/org-chart/src/lib/components/employee/employee.component.ts`)
- Employee component → Employee node view: renders template
- Chart component → Chart styles: uses styles
- Employee component → Employee styles: uses styles
- Viewer component → Viewer template: renders template
- Viewer component → Viewer styles: uses styles
- Theme variables → Chart styles: themes chart
- Chart event model → Organization node model: types event node (evidence: `projects/org-chart/src/lib/models/org-chart-event.ts`)
- Angular consumer → Chart component: provides root node (evidence: `README.md`)
- Chart component → Angular consumer: emits node events (evidence: `README.md`)
- Angular consumer → Viewer component: wraps chart (evidence: `README.md`)