# wiscaksono/cadview architecture

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

## Overview

@cadview is a browser-based CAD drawing viewer: users load DXF (or optionally DWG), then view, navigate, select, and measure drawing geometry. Its runtime spans format conversion and parsing, document rendering, and interactive viewer tools; React, Svelte, and Vue packages adapt the core for framework applications. The README documents several capabilities whose internal wiring is not shown in the sampled source, so the graph represents those documented links at subsystem level and omits uncertain implementation details.

Main entry points: [`packages/core/src/viewer/viewer.ts`](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/viewer.ts) (CAD viewer), [`packages/core/src/parser/index.ts`](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/parser/index.ts) (DXF parser), [`packages/core/src/renderer/canvas-renderer.ts`](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/renderer/canvas-renderer.ts) (Canvas renderer), [`packages/dwg/src/index.ts`](https://github.com/wiscaksono/cadview/blob/main/packages/dwg/src/index.ts) (DWG converter)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_formats["Formats and parsing"]
  node_dxf_parser["DXF parser<br/>[index.ts]"]
  node_tokenizer["DXF tokenizer<br/>[tokenizer.ts]"]
  node_section_parsers["Section parsers"]
  node_entity_parsers["Entity parsers"]
  node_worker_manager["Parse worker manager<br/>[worker-manager.ts]"]
  node_parse_worker["Parse worker<br/>[parse-worker.ts]"]
  node_dwg_converter["DWG converter<br/>[index.ts]"]
end

subgraph group_viewing["Viewer and rendering"]
  node_core_api["Core API<br/>[index.ts]"]
  node_cad_viewer["CAD viewer<br/>[viewer.ts]"]
  node_input_handler["Input handling<br/>[input-handler.ts]"]
  node_camera["Camera and transforms<br/>[camera.ts]"]
  node_canvas_renderer["Canvas renderer<br/>[canvas-renderer.ts]"]
  node_entity_draw["Entity drawing<br/>[index.ts]"]
  node_theme_color["Themes and colors<br/>[theme.ts]"]
  node_spatial_index["Spatial selection<br/>[selection.ts]"]
  node_measure_tool["Measure and snap<br/>[measure.ts]"]
  node_layer_manager["Layer controls<br/>[layers.ts]"]
  node_bounds["Geometry bounds<br/>[bbox.ts]"]
end

subgraph group_integrations["Framework integrations"]
  node_react_wrapper["React wrapper<br/>[CadViewer.tsx]"]
  node_react_hook["React hook<br/>[useCadViewer.ts]"]
  node_svelte_wrapper["Svelte wrapper<br/>[CadViewer.svelte]"]
  node_vue_wrapper["Vue wrapper<br/>[CadViewer.tsx]"]
  node_vue_composable["Vue composable<br/>[useCadViewer.ts]"]
end

node_user(("Application user"))

node_user -->|"loads and operates"| node_cad_viewer
node_core_api -->|"exports"| node_cad_viewer
node_cad_viewer -->|"parses DXF"| node_dxf_parser
node_cad_viewer -->|"offloads parsing"| node_worker_manager
node_worker_manager -->|"dispatches parse"| node_parse_worker
node_parse_worker -->|"parses payload"| node_dxf_parser
node_dxf_parser -->|"tokenizes input"| node_tokenizer
node_dxf_parser -->|"parses sections"| node_section_parsers
node_section_parsers -->|"parses entities"| node_entity_parsers
node_cad_viewer -->|"renders document"| node_canvas_renderer
node_canvas_renderer -->|"draws entities"| node_entity_draw
node_canvas_renderer -->|"resolves display colors"| node_theme_color
node_cad_viewer -->|"updates view"| node_camera
node_canvas_renderer -->|"fits drawing bounds"| node_bounds
node_input_handler -->|"dispatches input"| node_cad_viewer
node_cad_viewer -->|"handles canvas input"| node_input_handler
node_cad_viewer -->|"selects entities"| node_spatial_index
node_cad_viewer -->|"measures and snaps"| node_measure_tool
node_cad_viewer -->|"controls layers"| node_layer_manager
node_user -->|"uses component"| node_react_wrapper
node_react_wrapper -->|"adapts core viewer"| node_cad_viewer
node_user -->|"uses hook"| node_react_hook
node_react_hook -->|"creates and controls"| node_cad_viewer
node_user -->|"uses component"| node_svelte_wrapper
node_svelte_wrapper -->|"adapts core viewer"| node_cad_viewer
node_user -->|"uses component"| node_vue_wrapper
node_vue_wrapper -->|"adapts core viewer"| node_cad_viewer
node_user -->|"uses composable"| node_vue_composable
node_vue_composable -->|"creates and controls"| node_cad_viewer
node_user -.->|"supplies DWG"| node_dwg_converter
node_cad_viewer -.->|"optionally converts format"| node_dwg_converter
node_dwg_converter -.->|"returns DXF for parsing"| node_dxf_parser

click node_core_api "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/index.ts"
click node_cad_viewer "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/viewer.ts"
click node_input_handler "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/input-handler.ts"
click node_camera "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/renderer/camera.ts"
click node_canvas_renderer "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/renderer/canvas-renderer.ts"
click node_entity_draw "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/renderer/entities/index.ts"
click node_theme_color "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/renderer/theme.ts"
click node_spatial_index "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/selection.ts"
click node_measure_tool "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/measure.ts"
click node_layer_manager "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/layers.ts"
click node_bounds "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/utils/bbox.ts"
click node_dxf_parser "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/parser/index.ts"
click node_tokenizer "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/parser/tokenizer.ts"
click node_section_parsers "https://github.com/wiscaksono/cadview/tree/main/packages/core/src/parser/sections"
click node_entity_parsers "https://github.com/wiscaksono/cadview/tree/main/packages/core/src/parser/entities"
click node_worker_manager "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/worker/worker-manager.ts"
click node_parse_worker "https://github.com/wiscaksono/cadview/blob/main/packages/core/src/worker/parse-worker.ts"
click node_dwg_converter "https://github.com/wiscaksono/cadview/blob/main/packages/dwg/src/index.ts"
click node_react_wrapper "https://github.com/wiscaksono/cadview/blob/main/packages/react/src/CadViewer.tsx"
click node_react_hook "https://github.com/wiscaksono/cadview/blob/main/packages/react/src/useCadViewer.ts"
click node_svelte_wrapper "https://github.com/wiscaksono/cadview/blob/main/packages/svelte/src/lib/CadViewer.svelte"
click node_vue_wrapper "https://github.com/wiscaksono/cadview/blob/main/packages/vue/src/CadViewer.tsx"
click node_vue_composable "https://github.com/wiscaksono/cadview/blob/main/packages/vue/src/useCadViewer.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_dxf_parser,node_tokenizer,node_section_parsers,node_entity_parsers,node_worker_manager,node_parse_worker,node_dwg_converter,node_user toneBlue
class node_core_api,node_cad_viewer,node_input_handler,node_camera,node_canvas_renderer,node_entity_draw,node_theme_color,node_spatial_index,node_measure_tool,node_layer_manager,node_bounds toneAmber
class node_react_wrapper,node_react_hook,node_svelte_wrapper,node_vue_wrapper,node_vue_composable toneMint
```

## Components

### Formats and parsing

- [DXF parser](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/parser/index.ts): `packages/core/src/parser/index.ts`
- [DXF tokenizer](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/parser/tokenizer.ts): `packages/core/src/parser/tokenizer.ts`
- [Section parsers](https://github.com/wiscaksono/cadview/tree/main/packages/core/src/parser/sections): `packages/core/src/parser/sections`
- [Entity parsers](https://github.com/wiscaksono/cadview/tree/main/packages/core/src/parser/entities): `packages/core/src/parser/entities`
- [Parse worker manager](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/worker/worker-manager.ts): `packages/core/src/worker/worker-manager.ts`
- [Parse worker](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/worker/parse-worker.ts): `packages/core/src/worker/parse-worker.ts`
- [DWG converter](https://github.com/wiscaksono/cadview/blob/main/packages/dwg/src/index.ts): `packages/dwg/src/index.ts`

### Viewer and rendering

- [Core API](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/index.ts): `packages/core/src/index.ts`
- [CAD viewer](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/viewer.ts): `packages/core/src/viewer/viewer.ts`
- [Input handling](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/input-handler.ts): `packages/core/src/viewer/input-handler.ts`
- [Camera and transforms](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/renderer/camera.ts): `packages/core/src/renderer/camera.ts`
- [Canvas renderer](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/renderer/canvas-renderer.ts): `packages/core/src/renderer/canvas-renderer.ts`
- [Entity drawing](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/renderer/entities/index.ts): `packages/core/src/renderer/entities/index.ts`
- [Themes and colors](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/renderer/theme.ts): `packages/core/src/renderer/theme.ts`
- [Spatial selection](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/selection.ts): `packages/core/src/viewer/selection.ts`
- [Measure and snap](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/measure.ts): `packages/core/src/viewer/measure.ts`
- [Layer controls](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/viewer/layers.ts): `packages/core/src/viewer/layers.ts`
- [Geometry bounds](https://github.com/wiscaksono/cadview/blob/main/packages/core/src/utils/bbox.ts): `packages/core/src/utils/bbox.ts`

### Framework integrations

- [React wrapper](https://github.com/wiscaksono/cadview/blob/main/packages/react/src/CadViewer.tsx): `packages/react/src/CadViewer.tsx`
- [React hook](https://github.com/wiscaksono/cadview/blob/main/packages/react/src/useCadViewer.ts): `packages/react/src/useCadViewer.ts`
- [Svelte wrapper](https://github.com/wiscaksono/cadview/blob/main/packages/svelte/src/lib/CadViewer.svelte): `packages/svelte/src/lib/CadViewer.svelte`
- [Vue wrapper](https://github.com/wiscaksono/cadview/blob/main/packages/vue/src/CadViewer.tsx): `packages/vue/src/CadViewer.tsx`
- [Vue composable](https://github.com/wiscaksono/cadview/blob/main/packages/vue/src/useCadViewer.ts): `packages/vue/src/useCadViewer.ts`

### Other components

- **Application user**

## Connections

- Application user → CAD viewer: loads and operates
- Core API → CAD viewer: exports
- CAD viewer → DXF parser: parses DXF
- CAD viewer → Parse worker manager: offloads parsing
- Parse worker manager → Parse worker: dispatches parse
- Parse worker → DXF parser: parses payload
- DXF parser → DXF tokenizer: tokenizes input
- DXF parser → Section parsers: parses sections
- Section parsers → Entity parsers: parses entities
- CAD viewer → Canvas renderer: renders document
- Canvas renderer → Entity drawing: draws entities
- Canvas renderer → Themes and colors: resolves display colors
- CAD viewer → Camera and transforms: updates view
- Canvas renderer → Geometry bounds: fits drawing bounds
- Input handling → CAD viewer: dispatches input
- CAD viewer → Input handling: handles canvas input
- CAD viewer → Spatial selection: selects entities
- CAD viewer → Measure and snap: measures and snaps
- CAD viewer → Layer controls: controls layers
- Application user → React wrapper: uses component
- React wrapper → CAD viewer: adapts core viewer
- Application user → React hook: uses hook
- React hook → CAD viewer: creates and controls
- Application user → Svelte wrapper: uses component
- Svelte wrapper → CAD viewer: adapts core viewer
- Application user → Vue wrapper: uses component
- Vue wrapper → CAD viewer: adapts core viewer
- Application user → Vue composable: uses composable
- Vue composable → CAD viewer: creates and controls
- Application user → DWG converter: supplies DWG
- CAD viewer → DWG converter: optionally converts format
- DWG converter → DXF parser: returns DXF for parsing