# evmar/webtreemap architecture

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

## Overview

webtreemap is a browser-based DOM treemap library with a command-line path that converts size/path input into a self-contained HTML visualization, plus a backward-compatible API. The web workflow accepts a tree and renders it into a container; the CLI parses lines, prepares a tree, and embeds the renderer in HTML. The legacy entry point adapts older data before rendering. Connections for CLI embedding and web invocation follow README statements; unsampled demo behavior is not expanded.

Main entry points: [`src/treemap.ts`](https://github.com/evmar/webtreemap/blob/master/src/treemap.ts) (DOM treemap renderer), [`src/tree.ts`](https://github.com/evmar/webtreemap/blob/master/src/tree.ts) (Tree transformations), [`src/cli.ts`](https://github.com/evmar/webtreemap/blob/master/src/cli.ts) (Tree preparation), [`src/oldapi.ts`](https://github.com/evmar/webtreemap/blob/master/src/oldapi.ts) (Legacy data adapter)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web rendering"]
  node_public_api["Public API<br/>[index.ts]"]
  node_renderer["DOM treemap renderer<br/>[treemap.ts]"]
end

subgraph group_data["Tree data"]
  node_tree_model["Tree transformations<br/>[tree.ts]"]
end

subgraph group_cli["Command line"]
  node_cli_input["Line input parsing<br/>[cli.ts]"]
  node_cli_prepare["Tree preparation<br/>[cli.ts]"]
  node_html_output["Self-contained HTML<br/>[cli.ts]"]
end

subgraph group_legacy["Legacy API"]
  node_legacy_entry["Legacy global entry<br/>[oldapi-main.ts]"]
  node_legacy_adapter["Legacy data adapter<br/>[oldapi.ts]"]
end

node_web_user(("Web caller"))
node_cli_user(("CLI data producer"))

node_web_user -->|"requests render"| node_renderer
node_public_api -->|"exports types"| node_tree_model
node_public_api -->|"exports rendering"| node_renderer
node_renderer -->|"lays out tree"| node_tree_model
node_cli_user -->|"provides lines"| node_cli_input
node_cli_input -->|"parses lines"| node_cli_prepare
node_cli_prepare -->|"builds and normalizes"| node_tree_model
node_cli_prepare -->|"serializes tree"| node_html_output
node_renderer -->|"embedded by CLI"| node_html_output
node_legacy_entry -->|"registers render"| node_legacy_adapter
node_legacy_adapter -->|"converts data"| node_tree_model
node_legacy_adapter -->|"renders converted tree"| node_renderer

click node_public_api "https://github.com/evmar/webtreemap/blob/master/src/index.ts"
click node_renderer "https://github.com/evmar/webtreemap/blob/master/src/treemap.ts"
click node_tree_model "https://github.com/evmar/webtreemap/blob/master/src/tree.ts"
click node_cli_input "https://github.com/evmar/webtreemap/blob/master/src/cli.ts"
click node_cli_prepare "https://github.com/evmar/webtreemap/blob/master/src/cli.ts"
click node_html_output "https://github.com/evmar/webtreemap/blob/master/src/cli.ts"
click node_legacy_entry "https://github.com/evmar/webtreemap/blob/master/src/oldapi-main.ts"
click node_legacy_adapter "https://github.com/evmar/webtreemap/blob/master/src/oldapi.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_renderer toneBlue
class node_tree_model toneAmber
class node_cli_input,node_cli_prepare,node_html_output toneMint
class node_legacy_entry,node_legacy_adapter toneRose
class node_web_user,node_cli_user toneIndigo
```

## Components

### Web rendering

- [Public API](https://github.com/evmar/webtreemap/blob/master/src/index.ts): `src/index.ts`
- [DOM treemap renderer](https://github.com/evmar/webtreemap/blob/master/src/treemap.ts): `src/treemap.ts`

### Tree data

- [Tree transformations](https://github.com/evmar/webtreemap/blob/master/src/tree.ts): `src/tree.ts`

### Command line

- [Line input parsing](https://github.com/evmar/webtreemap/blob/master/src/cli.ts): `src/cli.ts`
- [Tree preparation](https://github.com/evmar/webtreemap/blob/master/src/cli.ts): `src/cli.ts`
- [Self-contained HTML](https://github.com/evmar/webtreemap/blob/master/src/cli.ts): `src/cli.ts`

### Legacy API

- [Legacy global entry](https://github.com/evmar/webtreemap/blob/master/src/oldapi-main.ts): `src/oldapi-main.ts`
- [Legacy data adapter](https://github.com/evmar/webtreemap/blob/master/src/oldapi.ts): `src/oldapi.ts`

### Other components

- **Web caller**
- **CLI data producer**

## Connections

- Web caller → DOM treemap renderer: requests render (evidence: `README.md`)
- Public API → Tree transformations: exports types (evidence: `src/index.ts`)
- Public API → DOM treemap renderer: exports rendering (evidence: `src/index.ts`)
- DOM treemap renderer → Tree transformations: lays out tree (evidence: `src/treemap.ts`)
- CLI data producer → Line input parsing: provides lines (evidence: `README.md`)
- Line input parsing → Tree preparation: parses lines (evidence: `src/cli.ts`)
- Tree preparation → Tree transformations: builds and normalizes (evidence: `src/cli.ts`)
- Tree preparation → Self-contained HTML: serializes tree (evidence: `src/cli.ts`)
- DOM treemap renderer → Self-contained HTML: embedded by CLI (evidence: `README.md`)
- Legacy global entry → Legacy data adapter: registers render (evidence: `src/oldapi-main.ts`)
- Legacy data adapter → Tree transformations: converts data (evidence: `src/oldapi.ts`)
- Legacy data adapter → DOM treemap renderer: renders converted tree (evidence: `src/oldapi.ts`)