# zyyzyykk/kkterminal architecture

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

- Interactive diagram: https://gitdiagram.com/zyyzyykk/kkterminal
- Repository: https://github.com/zyyzyykk/kkterminal

## Overview

kkTerminal is a browser-based Web SSH client with a Spring Boot backend. The main workflow initializes the app, checks access when configured, opens a terminal session to a remote server, and supports file operations over SSH/SFTP. Separate product branches provide preference and command workflows, cloud synchronization, collaboration, monitoring, and Docker management. Controller excerpts are partial, so some UI-to-controller links are based on documented capabilities; uncertain internal dispatch details are omitted.

Main entry points: [`front/terminal/src/utils/Request.js`](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/utils/Request.js) (HTTP client), [`front/terminal/src/views/TerminalView.vue`](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/views/TerminalView.vue) (Terminal UI), [`front/terminal/src/App.vue`](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/App.vue) (App bootstrap), [`front/terminal/src/components/file/FileBlock.vue`](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/file/FileBlock.vue) (File browser)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser client"]
  node_app["App bootstrap<br/>[App.vue]"]
  node_router["View routing<br/>[index.js]"]
  node_terminalui["Terminal UI<br/>[TerminalView.vue]"]
  node_fileui["File browser<br/>[FileBlock.vue]"]
  node_preview["File preview<br/>[FilePreview.vue]"]
  node_connect["Connection settings<br/>[ConnectSetting.vue]"]
  node_preferences["Preferences"]
  node_cmdcode["Command workflows"]
end

subgraph group_access["Access and setup"]
  node_accessui["Access check<br/>[AccessCheck.vue]"]
  node_request["HTTP client<br/>[Request.js]"]
  node_cloudclient["Cloud sync client<br/>[Cloud.js]"]
  node_system["System API"]
  node_accessapi["Access API"]
  node_sessions[("Session state<br/>[SessionUtil.java]")]
end

subgraph group_remote["Remote operations"]
  node_fileapi["File API"]
  node_sshutil["SSH and SFTP<br/>[SSHUtil.java]"]
  node_websocket["Terminal socket"]
end

subgraph group_extras["Advanced features"]
  node_cloudapi["Cloud API"]
  node_cloudstore[("Cloud files")]
  node_advanceui["Advanced UI<br/>[CooperateGen.vue]"]
  node_advanceapi["Advanced API"]
end

node_user(("User"))
node_remotehost["Remote server"]

node_user -->|"opens"| node_app
node_app -->|"initializes via"| node_request
node_app -->|"selects view"| node_router
node_request -->|"requests init"| node_system
node_system -->|"reads/writes"| node_sessions
node_router -->|"shows login"| node_accessui
node_accessui -->|"submits access"| node_request
node_request -->|"requests login"| node_accessapi
node_accessapi -->|"reads/writes"| node_sessions
node_router -->|"shows terminal"| node_terminalui
node_terminalui -->|"configures connection"| node_connect
node_terminalui -->|"opens socket"| node_websocket
node_websocket -->|"SSH session"| node_remotehost
node_terminalui -->|"opens file module"| node_fileui
node_fileui -->|"requests file actions"| node_request
node_request -->|"calls file API"| node_fileapi
node_fileapi -->|"uses SFTP/SSH"| node_sshutil
node_sshutil -->|"operates remotely"| node_remotehost
node_fileui -->|"opens selected file"| node_preview
node_preview -->|"requests save"| node_fileui
node_terminalui -->|"configures display"| node_preferences
node_terminalui -->|"runs workflows"| node_cmdcode
node_app -->|"syncs data"| node_cloudclient
node_cloudclient -->|"uses HTTP"| node_request
node_request -->|"calls cloud API"| node_cloudapi
node_cloudapi -->|"reads/writes"| node_cloudstore
node_terminalui -->|"opens advanced tools"| node_advanceui
node_advanceui -->|"requests operations"| node_request
node_request -->|"calls advanced API"| node_advanceapi
node_advanceapi -->|"runs remote commands"| node_sshutil
node_advanceapi -->|"manages cooperation"| node_websocket

click node_app "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/App.vue"
click node_router "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/router/index.js"
click node_terminalui "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/views/TerminalView.vue"
click node_fileui "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/file/FileBlock.vue"
click node_preview "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/preview/FilePreview.vue"
click node_connect "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/connect/ConnectSetting.vue"
click node_preferences "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/preference/PreferenceSetting.vue"
click node_cmdcode "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/cmdcode/CmdCodeWorkflow.vue"
click node_accessui "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/views/AccessCheck.vue"
click node_request "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/utils/Request.js"
click node_cloudclient "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/utils/Cloud.js"
click node_system "https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/SystemController.java"
click node_accessapi "https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/AccessController.java"
click node_sessions "https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/utils/SessionUtil.java"
click node_fileapi "https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/FileController.java"
click node_sshutil "https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/utils/SSHUtil.java"
click node_websocket "https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/consumer/WebSocketServer.java"
click node_cloudapi "https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/CloudController.java"
click node_cloudstore "https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/CloudController.java"
click node_advanceui "https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/advance/CooperateGen.vue"
click node_advanceapi "https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/AdvanceController.java"

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_router,node_terminalui,node_fileui,node_preview,node_connect,node_preferences,node_cmdcode,node_user toneBlue
class node_accessui,node_request,node_cloudclient,node_system,node_accessapi,node_sessions toneAmber
class node_fileapi,node_sshutil,node_websocket,node_remotehost toneMint
class node_cloudapi,node_cloudstore,node_advanceui,node_advanceapi toneRose
```

## Components

### Browser client

- [App bootstrap](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/App.vue): `front/terminal/src/App.vue`
- [View routing](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/router/index.js): `front/terminal/src/router/index.js`
- [Terminal UI](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/views/TerminalView.vue): `front/terminal/src/views/TerminalView.vue`
- [File browser](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/file/FileBlock.vue): `front/terminal/src/components/file/FileBlock.vue`
- [File preview](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/preview/FilePreview.vue): `front/terminal/src/components/preview/FilePreview.vue`
- [Connection settings](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/connect/ConnectSetting.vue): `front/terminal/src/components/connect/ConnectSetting.vue`
- [Preferences](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/preference/PreferenceSetting.vue): `front/terminal/src/components/preference/PreferenceSetting.vue`
- [Command workflows](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/cmdcode/CmdCodeWorkflow.vue): `front/terminal/src/components/cmdcode/CmdCodeWorkflow.vue`

### Access and setup

- [Access check](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/views/AccessCheck.vue): `front/terminal/src/views/AccessCheck.vue`
- [HTTP client](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/utils/Request.js): `front/terminal/src/utils/Request.js`
- [Cloud sync client](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/utils/Cloud.js): `front/terminal/src/utils/Cloud.js`
- [System API](https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/SystemController.java): `backend/terminal/src/main/java/com/kkbpro/terminal/controller/SystemController.java`
- [Access API](https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/AccessController.java): `backend/terminal/src/main/java/com/kkbpro/terminal/controller/AccessController.java`
- [Session state](https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/utils/SessionUtil.java): `backend/terminal/src/main/java/com/kkbpro/terminal/utils/SessionUtil.java`

### Remote operations

- [File API](https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/FileController.java): `backend/terminal/src/main/java/com/kkbpro/terminal/controller/FileController.java`
- [SSH and SFTP](https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/utils/SSHUtil.java): `backend/terminal/src/main/java/com/kkbpro/terminal/utils/SSHUtil.java`
- [Terminal socket](https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/consumer/WebSocketServer.java): `backend/terminal/src/main/java/com/kkbpro/terminal/consumer/WebSocketServer.java`

### Advanced features

- [Cloud API](https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/CloudController.java): `backend/terminal/src/main/java/com/kkbpro/terminal/controller/CloudController.java`
- [Cloud files](https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/CloudController.java): `backend/terminal/src/main/java/com/kkbpro/terminal/controller/CloudController.java`
- [Advanced UI](https://github.com/zyyzyykk/kkterminal/blob/master/front/terminal/src/components/advance/CooperateGen.vue): `front/terminal/src/components/advance/CooperateGen.vue`
- [Advanced API](https://github.com/zyyzyykk/kkterminal/blob/master/backend/terminal/src/main/java/com/kkbpro/terminal/controller/AdvanceController.java): `backend/terminal/src/main/java/com/kkbpro/terminal/controller/AdvanceController.java`

### Other components

- **User**
- **Remote server**

## Connections

- User → App bootstrap: opens
- App bootstrap → HTTP client: initializes via
- App bootstrap → View routing: selects view
- HTTP client → System API: requests init
- System API → Session state: reads/writes
- View routing → Access check: shows login
- Access check → HTTP client: submits access
- HTTP client → Access API: requests login
- Access API → Session state: reads/writes
- View routing → Terminal UI: shows terminal
- Terminal UI → Connection settings: configures connection
- Terminal UI → Terminal socket: opens socket
- Terminal socket → Remote server: SSH session
- Terminal UI → File browser: opens file module
- File browser → HTTP client: requests file actions
- HTTP client → File API: calls file API
- File API → SSH and SFTP: uses SFTP/SSH
- SSH and SFTP → Remote server: operates remotely
- File browser → File preview: opens selected file
- File preview → File browser: requests save
- Terminal UI → Preferences: configures display
- Terminal UI → Command workflows: runs workflows
- App bootstrap → Cloud sync client: syncs data
- Cloud sync client → HTTP client: uses HTTP
- HTTP client → Cloud API: calls cloud API
- Cloud API → Cloud files: reads/writes
- Terminal UI → Advanced UI: opens advanced tools
- Advanced UI → HTTP client: requests operations
- HTTP client → Advanced API: calls advanced API
- Advanced API → SSH and SFTP: runs remote commands
- Advanced API → Terminal socket: manages cooperation