# xorelectronics/mappingeditor architecture

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

- Interactive diagram: https://gitdiagram.com/xorelectronics/mappingeditor
- Repository: https://github.com/xorelectronics/mappingeditor

## Overview

mappingeditor is a web editor for NerdSEQ mapping files, with separate HTML and VS Code viewer implementations in the repository. The main editor workflow is selecting a mapping file, interpreting its rows and source/destination options, and editing the resulting document. The tree and sampled code support the editor’s model/parser and UI relationships; HTML viewer wiring is inferred only at the module level from filenames, so uncertain call paths are omitted.

Main entry points: [`editor/src/components/EditorApp.vue`](https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/components/EditorApp.vue) (Editor interface), [`viewers/htmlViewer/src/index.ts`](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/index.ts) (Viewer entry), [`editor/src/modules/parsers.ts`](https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/parsers.ts) (File parser), [`viewers/htmlViewer/src/parsers.ts`](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/parsers.ts) (File parser)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Mapping editor"]
  node_editor_entry["Editor entry<br/>[main.ts]"]
  node_editor_ui["Editor interface<br/>[EditorApp.vue]"]
  node_editor_model["Document model<br/>[documentModel.ts]"]
  node_editor_parser["File parser<br/>[parsers.ts]"]
  node_editor_catalog["Mapping catalog<br/>[dataModel.ts]"]
  node_editor_extras["Specialized fields"]
  node_editor_format["Document formatting<br/>[formatters.ts]"]
end

subgraph group_html["HTML viewer"]
  node_html_entry["Viewer entry<br/>[index.ts]"]
  node_html_readers["File readers<br/>[fileReaders.js]"]
  node_html_parser["File parser<br/>[parsers.ts]"]
  node_html_model["Document model<br/>[documentModel.ts]"]
  node_html_catalog["Mapping catalog<br/>[dataModel.ts]"]
  node_html_format["View formatters<br/>[formatters.ts]"]
  node_html_document_format["Document formatting"]
end

subgraph group_vscode["VS Code viewer"]
  node_vscode_catalog["Mapping definitions<br/>[map.js]"]
end

node_user(("Mapping user"))
node_mapping_file["Mapping file"]

node_user -->|"edits mappings"| node_editor_ui
node_user -->|"selects file"| node_mapping_file
node_mapping_file -->|"loads file"| node_editor_ui
node_editor_entry -->|"mounts"| node_editor_ui
node_editor_ui -->|"parses file"| node_editor_parser
node_editor_parser -->|"builds document"| node_editor_model
node_editor_parser -->|"resolves types"| node_editor_catalog
node_editor_ui -->|"updates rows"| node_editor_model
node_editor_ui -->|"uses options"| node_editor_catalog
node_editor_ui -->|"edits extras"| node_editor_extras
node_editor_ui -->|"formats document"| node_editor_format
node_user -->|"views mappings"| node_html_entry
node_html_entry -->|"reads files"| node_html_readers
node_html_entry -->|"parses mappings"| node_html_parser
node_html_parser -->|"builds document"| node_html_model
node_html_parser -->|"resolves types"| node_html_catalog
node_html_entry -->|"formats view"| node_html_format
node_html_entry -->|"formats document"| node_html_document_format
node_user -.->|"consults mappings"| node_vscode_catalog

click node_editor_entry "https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/main.ts"
click node_editor_ui "https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/components/EditorApp.vue"
click node_editor_model "https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/documentModel.ts"
click node_editor_parser "https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/parsers.ts"
click node_editor_catalog "https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/dataModel.ts"
click node_editor_extras "https://github.com/xorelectronics/mappingeditor/tree/main/editor/src/components"
click node_editor_format "https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/formatters.ts"
click node_html_entry "https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/index.ts"
click node_html_readers "https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/public/modules/fileReaders.js"
click node_html_parser "https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/parsers.ts"
click node_html_model "https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/documentModel.ts"
click node_html_catalog "https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/dataModel.ts"
click node_html_format "https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/formatters.ts"
click node_html_document_format "https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/public/modules/documentFormatters.js"
click node_vscode_catalog "https://github.com/xorelectronics/mappingeditor/blob/main/viewers/vscodeViewer/map.js"

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_editor_entry,node_editor_ui,node_editor_model,node_editor_parser,node_editor_catalog,node_editor_extras,node_editor_format,node_user toneBlue
class node_html_entry,node_html_readers,node_html_parser,node_html_model,node_html_catalog,node_html_format,node_html_document_format toneAmber
class node_vscode_catalog toneMint
class node_mapping_file toneIndigo
```

## Components

### Mapping editor

- [Editor entry](https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/main.ts): `editor/src/modules/main.ts`
- [Editor interface](https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/components/EditorApp.vue): `editor/src/components/EditorApp.vue`
- [Document model](https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/documentModel.ts): `editor/src/modules/documentModel.ts`
- [File parser](https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/parsers.ts): `editor/src/modules/parsers.ts`
- [Mapping catalog](https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/dataModel.ts): `editor/src/modules/dataModel.ts`
- [Specialized fields](https://github.com/xorelectronics/mappingeditor/tree/main/editor/src/components): `editor/src/components`
- [Document formatting](https://github.com/xorelectronics/mappingeditor/blob/main/editor/src/modules/formatters.ts): `editor/src/modules/formatters.ts`

### HTML viewer

- [Viewer entry](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/index.ts): `viewers/htmlViewer/src/index.ts`
- [File readers](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/public/modules/fileReaders.js): `viewers/htmlViewer/public/modules/fileReaders.js`
- [File parser](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/parsers.ts): `viewers/htmlViewer/src/parsers.ts`
- [Document model](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/documentModel.ts): `viewers/htmlViewer/src/documentModel.ts`
- [Mapping catalog](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/dataModel.ts): `viewers/htmlViewer/src/dataModel.ts`
- [View formatters](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/src/formatters.ts): `viewers/htmlViewer/src/formatters.ts`
- [Document formatting](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/htmlViewer/public/modules/documentFormatters.js): `viewers/htmlViewer/public/modules/documentFormatters.js`

### VS Code viewer

- [Mapping definitions](https://github.com/xorelectronics/mappingeditor/blob/main/viewers/vscodeViewer/map.js): `viewers/vscodeViewer/map.js`

### Other components

- **Mapping user**
- **Mapping file**

## Connections

- Mapping user → Editor interface: edits mappings
- Mapping user → Mapping file: selects file
- Mapping file → Editor interface: loads file
- Editor entry → Editor interface: mounts
- Editor interface → File parser: parses file
- File parser → Document model: builds document
- File parser → Mapping catalog: resolves types
- Editor interface → Document model: updates rows
- Editor interface → Mapping catalog: uses options
- Editor interface → Specialized fields: edits extras
- Editor interface → Document formatting: formats document
- Mapping user → Viewer entry: views mappings
- Viewer entry → File readers: reads files
- Viewer entry → File parser: parses mappings
- File parser → Document model: builds document
- File parser → Mapping catalog: resolves types
- Viewer entry → View formatters: formats view
- Viewer entry → Document formatting: formats document
- Mapping user → Mapping definitions: consults mappings