# sige5193/bittly architecture

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

## Overview

Bittly is a desktop and browser tool for exercising device and service communications, organizing reusable directives, and analyzing responses. Its main workflow is to configure a directive and its parameters, execute it through a selected communication type, then inspect or preserve the response. The product also supports mock services, project environments, interactive panels, testcases, documentation export, and plugins. The README establishes these capabilities; sampled source confirms application initialization and selected persistence, plugin, and window behavior, but does not expose every module’s runtime wiring.

Main entry points: [`src/App.vue`](https://github.com/sige5193/bittly/blob/main/src/App.vue) (App shell), [`src/modules/directive/Main.vue`](https://github.com/sige5193/bittly/blob/main/src/modules/directive/Main.vue) (Directive workspace), [`src/modules/directive/communicators/CommunicatorFactory.js`](https://github.com/sige5193/bittly/blob/main/src/modules/directive/communicators/CommunicatorFactory.js) (Communicator factory), [`src/modules/directive/Executor.js`](https://github.com/sige5193/bittly/blob/main/src/modules/directive/Executor.js) (Directive executor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["App shell<br/>[App.vue]"]
end

subgraph group_directives["Directive workflow"]
  node_directive["Directive workspace<br/>[Main.vue]"]
  node_parameters["Parameter editors<br/>[Builder.js]"]
  node_executor["Directive executor<br/>[Executor.js]"]
  node_communicators["Communicator factory"]
  node_serial["Serial transport<br/>[Communicator.js]"]
  node_network["Network and HTTP<br/>[Communicator.js]"]
  node_bluetooth["Bluetooth transport<br/>[Communicator.js]"]
  node_othercomms["Other transports"]
  node_responses["Response viewers<br/>[Viewer.vue]"]
  node_testcases["Directive testcases<br/>[MdbTestcase.js]"]
end

subgraph group_projects["Project workspace"]
  node_project["Project management"]
  node_environment["Environments<br/>[Main.vue]"]
  node_documents["Document export<br/>[Main.vue]"]
end

subgraph group_simulation["Mocks and panels"]
  node_mock["Mock services<br/>[Main.vue]"]
  node_panel["Interactive panels<br/>[Main.vue]"]
  node_panelruntime["Panel runtime<br/>[Runtime.js]"]
end

subgraph group_platform["Platform services"]
  node_models["Domain models<br/>[MdbDirective.js]"]
  node_database["Database setup<br/>[Setup.js]"]
  node_sqlite[("SQLite storage<br/>[StorageSqlite.js]")]
  node_plugins["Plugin manager<br/>[Manager.js]"]
  node_serverstore["Remote storage<br/>[StorageServer.js]"]
  node_electron["Electron windows<br/>[WindowManager.js]"]
end

node_user(("Engineer"))
node_storage_service[("Bittly data service")]

node_user -->|"uses"| node_app
node_app -->|"opens"| node_project
node_app -->|"activates"| node_directive
node_app -->|"activates"| node_environment
node_app -->|"activates"| node_documents
node_app -->|"activates"| node_mock
node_app -->|"activates"| node_panel
node_app -->|"initializes"| node_database
node_app -->|"starts"| node_plugins
node_database -->|"sets up"| node_sqlite
node_directive -->|"edits"| node_parameters
node_directive -->|"executes"| node_executor
node_executor -->|"selects"| node_communicators
node_communicators -->|"creates"| node_serial
node_communicators -->|"creates"| node_network
node_communicators -->|"creates"| node_bluetooth
node_communicators -->|"creates"| node_othercomms
node_executor -->|"presents"| node_responses
node_directive -->|"supports"| node_testcases
node_directive -->|"uses"| node_environment
node_panel -->|"runs"| node_panelruntime
node_panel -->|"binds directives"| node_executor
node_mock -.->|"simulates"| node_serial
node_plugins -.->|"extends"| node_directive
node_plugins -.->|"extends"| node_panel
node_project -->|"manages"| node_models
node_environment -->|"persists"| node_models
node_documents -->|"exports definitions"| node_models
node_sqlite -->|"stores records"| node_models
node_serverstore -.->|"sends operations"| node_storage_service
node_app -.->|"runs in"| node_electron

click node_app "https://github.com/sige5193/bittly/blob/main/src/App.vue"
click node_project "https://github.com/sige5193/bittly/blob/main/src/modules/project/PageProjectIndex.vue"
click node_models "https://github.com/sige5193/bittly/blob/main/src/models/MdbDirective.js"
click node_database "https://github.com/sige5193/bittly/blob/main/src/utils/database/Setup.js"
click node_sqlite "https://github.com/sige5193/bittly/blob/main/src/utils/database/StorageSqlite.js"
click node_directive "https://github.com/sige5193/bittly/blob/main/src/modules/directive/Main.vue"
click node_parameters "https://github.com/sige5193/bittly/blob/main/src/modules/directive/parameters/Builder.js"
click node_executor "https://github.com/sige5193/bittly/blob/main/src/modules/directive/Executor.js"
click node_communicators "https://github.com/sige5193/bittly/blob/main/src/modules/directive/communicators/CommunicatorFactory.js"
click node_serial "https://github.com/sige5193/bittly/blob/main/src/modules/directive/communicators/serialport/Communicator.js"
click node_network "https://github.com/sige5193/bittly/blob/main/src/modules/directive/communicators/http/Communicator.js"
click node_bluetooth "https://github.com/sige5193/bittly/blob/main/src/modules/directive/communicators/bluetooth/Communicator.js"
click node_othercomms "https://github.com/sige5193/bittly/tree/main/src/modules/directive/communicators"
click node_responses "https://github.com/sige5193/bittly/blob/main/src/modules/directive/response/Viewer.vue"
click node_testcases "https://github.com/sige5193/bittly/blob/main/src/models/MdbTestcase.js"
click node_environment "https://github.com/sige5193/bittly/blob/main/src/modules/environment/Main.vue"
click node_documents "https://github.com/sige5193/bittly/blob/main/src/modules/document/Main.vue"
click node_mock "https://github.com/sige5193/bittly/blob/main/src/modules/mock/Main.vue"
click node_panel "https://github.com/sige5193/bittly/blob/main/src/modules/panel/Main.vue"
click node_panelruntime "https://github.com/sige5193/bittly/blob/main/src/modules/panel/Runtime.js"
click node_plugins "https://github.com/sige5193/bittly/blob/main/src/modules/plugin/Manager.js"
click node_serverstore "https://github.com/sige5193/bittly/blob/main/src/utils/database/StorageServer.js"
click node_electron "https://github.com/sige5193/bittly/blob/main/src/main/WindowManager.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 toneBlue
class node_directive,node_parameters,node_executor,node_communicators,node_serial,node_network,node_bluetooth,node_othercomms,node_responses,node_testcases,node_storage_service toneAmber
class node_project,node_environment,node_documents toneMint
class node_mock,node_panel,node_panelruntime toneRose
class node_models,node_database,node_sqlite,node_plugins,node_serverstore,node_electron,node_user toneIndigo
```

## Components

### Application shell

- [App shell](https://github.com/sige5193/bittly/blob/main/src/App.vue): `src/App.vue`

### Directive workflow

- [Directive workspace](https://github.com/sige5193/bittly/blob/main/src/modules/directive/Main.vue): `src/modules/directive/Main.vue`
- [Parameter editors](https://github.com/sige5193/bittly/blob/main/src/modules/directive/parameters/Builder.js): `src/modules/directive/parameters/Builder.js`
- [Directive executor](https://github.com/sige5193/bittly/blob/main/src/modules/directive/Executor.js): `src/modules/directive/Executor.js`
- [Communicator factory](https://github.com/sige5193/bittly/blob/main/src/modules/directive/communicators/CommunicatorFactory.js): `src/modules/directive/communicators/CommunicatorFactory.js`
- [Serial transport](https://github.com/sige5193/bittly/blob/main/src/modules/directive/communicators/serialport/Communicator.js): `src/modules/directive/communicators/serialport/Communicator.js`
- [Network and HTTP](https://github.com/sige5193/bittly/blob/main/src/modules/directive/communicators/http/Communicator.js): `src/modules/directive/communicators/http/Communicator.js`
- [Bluetooth transport](https://github.com/sige5193/bittly/blob/main/src/modules/directive/communicators/bluetooth/Communicator.js): `src/modules/directive/communicators/bluetooth/Communicator.js`
- [Other transports](https://github.com/sige5193/bittly/tree/main/src/modules/directive/communicators): `src/modules/directive/communicators`
- [Response viewers](https://github.com/sige5193/bittly/blob/main/src/modules/directive/response/Viewer.vue): `src/modules/directive/response/Viewer.vue`
- [Directive testcases](https://github.com/sige5193/bittly/blob/main/src/models/MdbTestcase.js): `src/models/MdbTestcase.js`

### Project workspace

- [Project management](https://github.com/sige5193/bittly/blob/main/src/modules/project/PageProjectIndex.vue): `src/modules/project/PageProjectIndex.vue`
- [Environments](https://github.com/sige5193/bittly/blob/main/src/modules/environment/Main.vue): `src/modules/environment/Main.vue`
- [Document export](https://github.com/sige5193/bittly/blob/main/src/modules/document/Main.vue): `src/modules/document/Main.vue`

### Mocks and panels

- [Mock services](https://github.com/sige5193/bittly/blob/main/src/modules/mock/Main.vue): `src/modules/mock/Main.vue`
- [Interactive panels](https://github.com/sige5193/bittly/blob/main/src/modules/panel/Main.vue): `src/modules/panel/Main.vue`
- [Panel runtime](https://github.com/sige5193/bittly/blob/main/src/modules/panel/Runtime.js): `src/modules/panel/Runtime.js`

### Platform services

- [Domain models](https://github.com/sige5193/bittly/blob/main/src/models/MdbDirective.js): `src/models/MdbDirective.js`
- [Database setup](https://github.com/sige5193/bittly/blob/main/src/utils/database/Setup.js): `src/utils/database/Setup.js`
- [SQLite storage](https://github.com/sige5193/bittly/blob/main/src/utils/database/StorageSqlite.js): `src/utils/database/StorageSqlite.js`
- [Plugin manager](https://github.com/sige5193/bittly/blob/main/src/modules/plugin/Manager.js): `src/modules/plugin/Manager.js`
- [Remote storage](https://github.com/sige5193/bittly/blob/main/src/utils/database/StorageServer.js): `src/utils/database/StorageServer.js`
- [Electron windows](https://github.com/sige5193/bittly/blob/main/src/main/WindowManager.js): `src/main/WindowManager.js`

### Other components

- **Engineer**
- **Bittly data service**

## Connections

- Engineer → App shell: uses
- App shell → Project management: opens
- App shell → Directive workspace: activates
- App shell → Environments: activates
- App shell → Document export: activates
- App shell → Mock services: activates
- App shell → Interactive panels: activates
- App shell → Database setup: initializes
- App shell → Plugin manager: starts
- Database setup → SQLite storage: sets up
- Directive workspace → Parameter editors: edits
- Directive workspace → Directive executor: executes
- Directive executor → Communicator factory: selects
- Communicator factory → Serial transport: creates
- Communicator factory → Network and HTTP: creates
- Communicator factory → Bluetooth transport: creates
- Communicator factory → Other transports: creates
- Directive executor → Response viewers: presents
- Directive workspace → Directive testcases: supports
- Directive workspace → Environments: uses
- Interactive panels → Panel runtime: runs
- Interactive panels → Directive executor: binds directives
- Mock services → Serial transport: simulates
- Plugin manager → Directive workspace: extends
- Plugin manager → Interactive panels: extends
- Project management → Domain models: manages
- Environments → Domain models: persists
- Document export → Domain models: exports definitions
- SQLite storage → Domain models: stores records
- Remote storage → Bittly data service: sends operations
- App shell → Electron windows: runs in