# erfan-xray/xraymesh architecture

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

- Interactive diagram: https://gitdiagram.com/erfan-xray/xraymesh
- Repository: https://github.com/erfan-xray/xraymesh

## Overview

XRayMesh is a web panel for configuring a private server mesh, managing peers and port-forwarding tunnels, and running peer-to-peer diagnostics. Users sign in, create or join a mesh, then manage servers and tunnels or run ping and speed tests. The frontend calls a local HTTP API served by the Python backend; README documents EasyTier as the mesh core. The graph preserves major documented capabilities, but backend internals and several UI call paths were not excerpted, so uncertain links are omitted.

Main entry points: [`frontend/src/App.tsx`](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/App.tsx) (Dashboard shell), [`frontend/src/services/api.ts`](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/services/api.ts) (HTTP API client), [`frontend/src/components/NodeConfig/SetupFlow.tsx`](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/NodeConfig/SetupFlow.tsx) (Mesh setup and join), [`web/server.py`](https://github.com/erfan-xray/xraymesh/blob/main/web/server.py) (Panel server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_panel["Web panel"]
  node_app["Dashboard shell<br/>[App.tsx]"]
  node_header["Navigation and preferences<br/>[Header.tsx]"]
  node_translations["English and Persian<br/>[translations.ts]"]
end

subgraph group_mesh["Mesh management"]
  node_node_setup["Mesh setup and join<br/>[SetupFlow.tsx]"]
  node_connections["Connections and invites"]
  node_invite_tools["Invite parsing<br/>[meshInvite.ts]"]
  node_peers["Peer management<br/>[PeersTab.tsx]"]
  node_peer_display["Peer status display<br/>[PeerRow.tsx]"]
  node_cluster_sync["SafeSync settings"]
end

subgraph group_operations["Network operations"]
  node_tunnels_ui["Tunnel management<br/>[TunnelsTab.tsx]"]
  node_tunnel_state["Tunnel state<br/>[useTunnels.ts]"]
  node_ping["Peer ping<br/>[PingTab.tsx]"]
  node_speedtest["Peer speed tests<br/>[SpeedtestTab.tsx]"]
  node_updates["Node updates<br/>[useNodeUpdates.ts]"]
end

subgraph group_backend["Backend and mesh core"]
  node_api["HTTP API client<br/>[api.ts]"]
  node_server["Panel server<br/>[server.py]"]
  node_easytier["EasyTier mesh core"]
  node_external_integrations["Tunnel engines and HTTPS"]
end

node_operator(("Administrator"))

node_operator -->|"uses"| node_app
node_app -->|"renders"| node_header
node_app -->|"loads"| node_tunnel_state
node_app -.->|"offers"| node_tunnels_ui
node_app -.->|"offers"| node_ping
node_app -.->|"offers"| node_speedtest
node_app -.->|"offers"| node_node_setup
node_header -->|"imports"| node_translations
node_node_setup -->|"calls"| node_api
node_node_setup -->|"uses"| node_invite_tools
node_connections -->|"calls"| node_api
node_connections -->|"uses"| node_invite_tools
node_peers -->|"renders"| node_peer_display
node_peers -->|"uses"| node_updates
node_cluster_sync -->|"calls"| node_api
node_tunnels_ui -->|"uses"| node_tunnel_state
node_tunnel_state -->|"fetches"| node_api
node_updates -->|"calls"| node_api
node_api -->|"requests"| node_server
node_server -.->|"integrates"| node_easytier
node_server -.->|"supports"| node_external_integrations

click node_app "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/App.tsx"
click node_header "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Header.tsx"
click node_translations "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/i18n/translations.ts"
click node_node_setup "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/NodeConfig/SetupFlow.tsx"
click node_connections "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/NodeConfig/ConnectionsPanel.tsx"
click node_invite_tools "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/utils/meshInvite.ts"
click node_peers "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Tabs/PeersTab.tsx"
click node_peer_display "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Peers/PeerRow.tsx"
click node_cluster_sync "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Modals/ClusterSyncModal.tsx"
click node_tunnels_ui "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Tabs/TunnelsTab.tsx"
click node_tunnel_state "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/hooks/useTunnels.ts"
click node_ping "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Tabs/PingTab.tsx"
click node_speedtest "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Tabs/SpeedtestTab.tsx"
click node_updates "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/hooks/useNodeUpdates.ts"
click node_api "https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/services/api.ts"
click node_server "https://github.com/erfan-xray/xraymesh/blob/main/web/server.py"

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_header,node_translations toneBlue
class node_node_setup,node_connections,node_invite_tools,node_peers,node_peer_display,node_cluster_sync toneAmber
class node_tunnels_ui,node_tunnel_state,node_ping,node_speedtest,node_updates toneMint
class node_api,node_server,node_easytier,node_external_integrations toneRose
class node_operator toneIndigo
```

## Components

### Web panel

- [Dashboard shell](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Navigation and preferences](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Header.tsx): `frontend/src/components/Header.tsx`
- [English and Persian](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/i18n/translations.ts): `frontend/src/i18n/translations.ts`

### Mesh management

- [Mesh setup and join](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/NodeConfig/SetupFlow.tsx): `frontend/src/components/NodeConfig/SetupFlow.tsx`
- [Connections and invites](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/NodeConfig/ConnectionsPanel.tsx): `frontend/src/components/NodeConfig/ConnectionsPanel.tsx`
- [Invite parsing](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/utils/meshInvite.ts): `frontend/src/utils/meshInvite.ts`
- [Peer management](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Tabs/PeersTab.tsx): `frontend/src/components/Tabs/PeersTab.tsx`
- [Peer status display](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Peers/PeerRow.tsx): `frontend/src/components/Peers/PeerRow.tsx`
- [SafeSync settings](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Modals/ClusterSyncModal.tsx): `frontend/src/components/Modals/ClusterSyncModal.tsx`

### Network operations

- [Tunnel management](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Tabs/TunnelsTab.tsx): `frontend/src/components/Tabs/TunnelsTab.tsx`
- [Tunnel state](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/hooks/useTunnels.ts): `frontend/src/hooks/useTunnels.ts`
- [Peer ping](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Tabs/PingTab.tsx): `frontend/src/components/Tabs/PingTab.tsx`
- [Peer speed tests](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/components/Tabs/SpeedtestTab.tsx): `frontend/src/components/Tabs/SpeedtestTab.tsx`
- [Node updates](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/hooks/useNodeUpdates.ts): `frontend/src/hooks/useNodeUpdates.ts`

### Backend and mesh core

- [HTTP API client](https://github.com/erfan-xray/xraymesh/blob/main/frontend/src/services/api.ts): `frontend/src/services/api.ts`
- [Panel server](https://github.com/erfan-xray/xraymesh/blob/main/web/server.py): `web/server.py`
- **EasyTier mesh core**
- **Tunnel engines and HTTPS**

### Other components

- **Administrator**

## Connections

- Administrator → Dashboard shell: uses (evidence: `README.md`)
- Dashboard shell → Navigation and preferences: renders (evidence: `frontend/src/App.tsx`)
- Dashboard shell → Tunnel state: loads (evidence: `frontend/src/App.tsx`)
- Dashboard shell → Tunnel management: offers (evidence: `README.md`)
- Dashboard shell → Peer ping: offers (evidence: `README.md`)
- Dashboard shell → Peer speed tests: offers (evidence: `README.md`)
- Dashboard shell → Mesh setup and join: offers (evidence: `README.md`)
- Navigation and preferences → English and Persian: imports (evidence: `frontend/src/components/Header.tsx`)
- Mesh setup and join → HTTP API client: calls (evidence: `frontend/src/components/NodeConfig/SetupFlow.tsx`)
- Mesh setup and join → Invite parsing: uses (evidence: `frontend/src/components/NodeConfig/SetupFlow.tsx`)
- Connections and invites → HTTP API client: calls (evidence: `frontend/src/components/NodeConfig/ConnectionsPanel.tsx`)
- Connections and invites → Invite parsing: uses (evidence: `frontend/src/components/NodeConfig/ConnectionsPanel.tsx`)
- Peer management → Peer status display: renders (evidence: `frontend/src/components/Tabs/PeersTab.tsx`)
- Peer management → Node updates: uses (evidence: `frontend/src/components/Tabs/PeersTab.tsx`)
- SafeSync settings → HTTP API client: calls (evidence: `frontend/src/components/Modals/ClusterSyncModal.tsx`)
- Tunnel management → Tunnel state: uses (evidence: `frontend/src/components/Tabs/TunnelsTab.tsx`)
- Tunnel state → HTTP API client: fetches (evidence: `frontend/src/hooks/useTunnels.ts`)
- Node updates → HTTP API client: calls (evidence: `frontend/src/hooks/useNodeUpdates.ts`)
- HTTP API client → Panel server: requests (evidence: `frontend/src/services/api.ts`)
- Panel server → EasyTier mesh core: integrates (evidence: `README.md`)
- Panel server → Tunnel engines and HTTPS: supports (evidence: `README.md`)