# diaki137/odini-webvowl architecture

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

- Interactive diagram: https://gitdiagram.com/diaki137/odini-webvowl
- Repository: https://github.com/diaki137/odini-webvowl

## Overview

WebVOWL is a browser-based ontology visualization and editing application. Users load ontology data, which is parsed into graph elements and displayed as an interactive visualization; they can then inspect, search, filter, edit, and export it. The README documents local service operation but not detailed runtime wiring, so edges below are limited to relationships visible in excerpts, the source index, or README; unsampled capability modules are included without guessed connections.

Main entry points: [`src/webvowl/js/graph.js`](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/graph.js) (Graph runtime), [`src/webvowl/js/parser.js`](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/parser.js) (Ontology parser), [`src/webvowl/js/elements/properties/BaseProperty.js`](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/properties/BaseProperty.js) (Graph properties), [`src/webvowl/js/elements/BaseElement.js`](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/BaseElement.js) (Ontology elements)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Application UI"]
  node_app["Application setup<br/>[app.js]"]
  node_loader["Ontology loading<br/>[loadingModule.js]"]
  node_ontology_menu["Ontology controls<br/>[ontologyMenu.js]"]
  node_export["Export controls<br/>[exportMenu.js]"]
  node_ttl["TTL export<br/>[exportTTLModule.js]"]
end

subgraph group_data["Ontology Data"]
  node_parser["Ontology parser<br/>[parser.js]"]
  node_attribute_parser["Attribute parsing<br/>[attributeParser.js]"]
  node_prefix["Prefix utilities<br/>[prefixTools.js]"]
end

subgraph group_visual["Visualization Engine"]
  node_graph["Graph runtime<br/>[graph.js]"]
  node_elements["Ontology elements<br/>[BaseElement.js]"]
  node_nodes["Graph nodes<br/>[BaseNode.js]"]
  node_properties["Graph properties<br/>[BaseProperty.js]"]
  node_links["Rendered links<br/>[PlainLink.js]"]
  node_webvowl["Visualization API<br/>[webvowl.js]"]
end

subgraph group_interaction["Explore and Edit"]
  node_search["Search<br/>[searchMenu.js]"]
  node_editing["Element editing<br/>[editSidebar.js]"]
  node_sidebar["Details sidebar<br/>[sidebar.js]"]
  node_filters["Graph filters<br/>[statistics.js]"]
  node_draggers["Drag interactions"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"configures"| node_graph
node_loader -->|"loads data"| node_graph
node_loader -->|"updates controls"| node_ontology_menu
node_graph -->|"parses data"| node_parser
node_parser -->|"parses attributes"| node_attribute_parser
node_parser -->|"creates instances"| node_nodes
node_parser -->|"creates instances"| node_properties
node_nodes -->|"extends"| node_elements
node_properties -->|"extends"| node_elements
node_properties -->|"constructs"| node_links
node_graph -->|"computes statistics"| node_filters
node_search -->|"queries graph"| node_graph
node_editing -->|"edits elements"| node_graph
node_sidebar -->|"reads graph"| node_graph
node_export -->|"exports graph"| node_graph
node_export -->|"delegates export"| node_ttl
node_ttl -->|"reads graph"| node_graph
node_graph -->|"uses interactions"| node_draggers
node_elements -->|"formats identifiers"| node_prefix
node_webvowl -.->|"exposes runtime"| node_graph

click node_app "https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/app.js"
click node_loader "https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/loadingModule.js"
click node_ontology_menu "https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/menu/ontologyMenu.js"
click node_search "https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/menu/searchMenu.js"
click node_editing "https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/editSidebar.js"
click node_sidebar "https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/sidebar.js"
click node_export "https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/menu/exportMenu.js"
click node_ttl "https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/menu/exportTTLModule.js"
click node_graph "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/graph.js"
click node_parser "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/parser.js"
click node_attribute_parser "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/parsing/attributeParser.js"
click node_elements "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/BaseElement.js"
click node_nodes "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/nodes/BaseNode.js"
click node_properties "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/properties/BaseProperty.js"
click node_links "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/links/PlainLink.js"
click node_filters "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/modules/filters/statistics.js"
click node_draggers "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/draggers/abstractDomainRangeDragger.js"
click node_prefix "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/util/prefixTools.js"
click node_webvowl "https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/webvowl.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_app,node_loader,node_ontology_menu,node_export,node_ttl,node_user toneBlue
class node_parser,node_attribute_parser,node_prefix toneAmber
class node_graph,node_elements,node_nodes,node_properties,node_links,node_webvowl toneMint
class node_search,node_editing,node_sidebar,node_filters,node_draggers toneRose
```

## Components

### Application UI

- [Application setup](https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/app.js): `src/app/js/app.js`
- [Ontology loading](https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/loadingModule.js): `src/app/js/loadingModule.js`
- [Ontology controls](https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/menu/ontologyMenu.js): `src/app/js/menu/ontologyMenu.js`
- [Export controls](https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/menu/exportMenu.js): `src/app/js/menu/exportMenu.js`
- [TTL export](https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/menu/exportTTLModule.js): `src/app/js/menu/exportTTLModule.js`

### Ontology Data

- [Ontology parser](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/parser.js): `src/webvowl/js/parser.js`
- [Attribute parsing](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/parsing/attributeParser.js): `src/webvowl/js/parsing/attributeParser.js`
- [Prefix utilities](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/util/prefixTools.js): `src/webvowl/js/util/prefixTools.js`

### Visualization Engine

- [Graph runtime](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/graph.js): `src/webvowl/js/graph.js`
- [Ontology elements](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/BaseElement.js): `src/webvowl/js/elements/BaseElement.js`
- [Graph nodes](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/nodes/BaseNode.js): `src/webvowl/js/elements/nodes/BaseNode.js`
- [Graph properties](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/properties/BaseProperty.js): `src/webvowl/js/elements/properties/BaseProperty.js`
- [Rendered links](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/elements/links/PlainLink.js): `src/webvowl/js/elements/links/PlainLink.js`
- [Visualization API](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/webvowl.js): `src/webvowl/js/webvowl.js`

### Explore and Edit

- [Search](https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/menu/searchMenu.js): `src/app/js/menu/searchMenu.js`
- [Element editing](https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/editSidebar.js): `src/app/js/editSidebar.js`
- [Details sidebar](https://github.com/diaki137/odini-webvowl/blob/main/src/app/js/sidebar.js): `src/app/js/sidebar.js`
- [Graph filters](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/modules/filters/statistics.js): `src/webvowl/js/modules/filters/statistics.js`
- [Drag interactions](https://github.com/diaki137/odini-webvowl/blob/main/src/webvowl/js/draggers/abstractDomainRangeDragger.js): `src/webvowl/js/draggers/abstractDomainRangeDragger.js`

### Other components

- **User**

## Connections

- User → Application setup: uses (evidence: `README.md`)
- Application setup → Graph runtime: configures (evidence: `src/app/js/app.js`)
- Ontology loading → Graph runtime: loads data (evidence: `src/app/js/loadingModule.js`)
- Ontology loading → Ontology controls: updates controls (evidence: `src/app/js/loadingModule.js`)
- Graph runtime → Ontology parser: parses data (evidence: `src/webvowl/js/graph.js`)
- Ontology parser → Attribute parsing: parses attributes (evidence: `src/webvowl/js/parser.js`)
- Ontology parser → Graph nodes: creates instances (evidence: `src/webvowl/js/parser.js`)
- Ontology parser → Graph properties: creates instances (evidence: `src/webvowl/js/parser.js`)
- Graph nodes → Ontology elements: extends (evidence: `src/webvowl/js/elements/nodes/BaseNode.js`)
- Graph properties → Ontology elements: extends (evidence: `src/webvowl/js/elements/properties/BaseProperty.js`)
- Graph properties → Rendered links: constructs (evidence: `src/webvowl/js/elements/properties/BaseProperty.js`)
- Graph runtime → Graph filters: computes statistics (evidence: `src/app/js/loadingModule.js`)
- Search → Graph runtime: queries graph (evidence: `src/app/js/menu/searchMenu.js`)
- Element editing → Graph runtime: edits elements (evidence: `src/app/js/editSidebar.js`)
- Details sidebar → Graph runtime: reads graph (evidence: `src/app/js/sidebar.js`)
- Export controls → Graph runtime: exports graph (evidence: `src/app/js/menu/exportMenu.js`)
- Export controls → TTL export: delegates export (evidence: `src/app/js/menu/exportMenu.js`)
- TTL export → Graph runtime: reads graph (evidence: `src/app/js/menu/exportTTLModule.js`)
- Graph runtime → Drag interactions: uses interactions (evidence: `src/webvowl/js/graph.js`)
- Ontology elements → Prefix utilities: formats identifiers (evidence: `src/webvowl/js/elements/BaseElement.js`)
- Visualization API → Graph runtime: exposes runtime