Skip to content

Commit 02b65d1

Browse files
n4itr0-07n4itr0-07
committed
Add rich Mermaid architecture diagrams to README
1 parent ead06e7 commit 02b65d1

1 file changed

Lines changed: 331 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 331 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,300 @@ npm run start
203203

204204
---
205205

206+
## 🏗️ System Architecture
207+
208+
### High-Level Overview
209+
210+
```mermaid
211+
flowchart TB
212+
subgraph Client["🌐 Client Browser"]
213+
UI["🖥️ User Interface"]
214+
SW["⚡ Service Worker"]
215+
LS["💾 Local Storage"]
216+
end
217+
218+
subgraph App["⚛️ React Application"]
219+
Router["🔀 React Router v7"]
220+
Components["🧩 Components"]
221+
Hooks["🪝 Custom Hooks"]
222+
Utils["🔧 Utilities"]
223+
end
224+
225+
subgraph Tools["🛠️ Security Tools Suite"]
226+
direction TB
227+
Security["🔐 Security Analysis"]
228+
Crypto["🔑 Cryptography"]
229+
Encoding["📝 Encoding/Hashing"]
230+
DevTools["🛠️ Dev Utilities"]
231+
end
232+
233+
UI --> Router
234+
Router --> Components
235+
Components --> Hooks
236+
Components --> Utils
237+
Hooks --> Tools
238+
Utils --> Tools
239+
SW -.-> LS
240+
Tools -.-> LS
241+
242+
style Client fill:#1a1a2e,stroke:#00a3c7,stroke-width:2px,color:#fff
243+
style App fill:#16213e,stroke:#e94560,stroke-width:2px,color:#fff
244+
style Tools fill:#0f3460,stroke:#00ff88,stroke-width:2px,color:#fff
245+
```
246+
247+
### Tool Categories Architecture
248+
249+
```mermaid
250+
flowchart LR
251+
subgraph SecurityTools["🔐 Security Analysis"]
252+
direction TB
253+
SA["Security Analyzer"]
254+
JWT["JWT Suite"]
255+
SSL["SSL Inspector"]
256+
CORS["CORS Checker"]
257+
CSP["CSP Generator"]
258+
API["API Security"]
259+
Privacy["Privacy Analyzer"]
260+
end
261+
262+
subgraph CryptoTools["🔑 Cryptography"]
263+
direction TB
264+
AES["AES Encryption"]
265+
RSA["RSA Generator"]
266+
HMAC["HMAC Generator"]
267+
Caesar["Caesar Cipher"]
268+
XOR["XOR Cipher"]
269+
TOTP["TOTP Generator"]
270+
SecretGen["Secret Generator"]
271+
PassGen["Password Generator"]
272+
end
273+
274+
subgraph EncodingTools["📝 Encoding & Hashing"]
275+
direction TB
276+
Hash["Hash Tools"]
277+
HashID["Hash Identifier"]
278+
B64["Base64 Tools"]
279+
URL["URL Encoder"]
280+
HTML["HTML Entities"]
281+
Base["Base Converter"]
282+
end
283+
284+
subgraph DevUtilities["🛠️ Developer Tools"]
285+
direction TB
286+
JSON["JSON Formatter"]
287+
URLParse["URL Parser"]
288+
UUID["UUID Generator"]
289+
Time["Timestamp Converter"]
290+
Regex["Regex Tester"]
291+
Diff["Text Diff"]
292+
Color["Color Converter"]
293+
HTTP["HTTP Builder"]
294+
DNS["DNS Lookup"]
295+
Subnet["Subnet Calculator"]
296+
Sanitize["Data Sanitizer"]
297+
end
298+
299+
User((👤 User)) --> SecurityTools
300+
User --> CryptoTools
301+
User --> EncodingTools
302+
User --> DevUtilities
303+
304+
style SecurityTools fill:#dc3545,stroke:#fff,stroke-width:2px,color:#fff
305+
style CryptoTools fill:#6f42c1,stroke:#fff,stroke-width:2px,color:#fff
306+
style EncodingTools fill:#fd7e14,stroke:#fff,stroke-width:2px,color:#fff
307+
style DevUtilities fill:#20c997,stroke:#fff,stroke-width:2px,color:#fff
308+
style User fill:#0d6efd,stroke:#fff,stroke-width:3px,color:#fff
309+
```
310+
311+
### Component Architecture
312+
313+
```mermaid
314+
flowchart TB
315+
subgraph Root["📦 App Root"]
316+
RootTSX["root.tsx"]
317+
end
318+
319+
subgraph Layout["🎨 Layout Layer"]
320+
Nav["Navigation"]
321+
Theme["Theme Toggle"]
322+
Toast["Toast System"]
323+
end
324+
325+
subgraph Pages["📄 Route Pages"]
326+
Home["🏠 Home"]
327+
Dashboard["📊 Dashboard"]
328+
Favorites["⭐ Favorites"]
329+
Recent["🕐 Recent"]
330+
Docs["📚 Documentation"]
331+
ToolPages["🛠️ 40+ Tool Pages"]
332+
end
333+
334+
subgraph SharedUI["🧩 Shared Components"]
335+
ToolHeader["Tool Header"]
336+
CodeWindow["Code Window"]
337+
CodeBlock["Code Block"]
338+
AnalysisPanel["Analysis Panel"]
339+
IssueCard["Issue Card"]
340+
RiskBadge["Risk Badge"]
341+
SecurityScore["Security Score"]
342+
ExportMenu["Export Menu"]
343+
KeyboardShortcuts["Keyboard Shortcuts"]
344+
end
345+
346+
subgraph UIKit["🎯 UI Primitives"]
347+
Button["Button"]
348+
Input["Input"]
349+
Select["Select"]
350+
Dialog["Dialog"]
351+
Tabs["Tabs"]
352+
Card["Card"]
353+
Badge["Badge"]
354+
Tooltip["Tooltip"]
355+
end
356+
357+
RootTSX --> Layout
358+
Layout --> Pages
359+
Pages --> SharedUI
360+
SharedUI --> UIKit
361+
362+
style Root fill:#e91e63,stroke:#fff,stroke-width:2px,color:#fff
363+
style Layout fill:#9c27b0,stroke:#fff,stroke-width:2px,color:#fff
364+
style Pages fill:#673ab7,stroke:#fff,stroke-width:2px,color:#fff
365+
style SharedUI fill:#3f51b5,stroke:#fff,stroke-width:2px,color:#fff
366+
style UIKit fill:#2196f3,stroke:#fff,stroke-width:2px,color:#fff
367+
```
368+
369+
### Data Flow Architecture
370+
371+
```mermaid
372+
flowchart LR
373+
subgraph Input["📥 User Input"]
374+
Text["Text Input"]
375+
File["File Upload"]
376+
Paste["Clipboard Paste"]
377+
end
378+
379+
subgraph Processing["⚙️ Processing Layer"]
380+
Validate["✅ Validation"]
381+
Transform["🔄 Transform"]
382+
Analyze["🔍 Analysis"]
383+
end
384+
385+
subgraph Output["📤 Output"]
386+
Display["🖥️ Display Results"]
387+
Copy["📋 Copy to Clipboard"]
388+
Export["💾 Export File"]
389+
Share["🔗 Share Link"]
390+
end
391+
392+
subgraph Storage["💾 Persistence"]
393+
LocalStorage["Local Storage"]
394+
Favorites["Favorites"]
395+
History["Recent History"]
396+
Settings["User Settings"]
397+
end
398+
399+
Input --> Processing
400+
Processing --> Output
401+
Processing -.-> Storage
402+
Storage -.-> Input
403+
404+
style Input fill:#4caf50,stroke:#fff,stroke-width:2px,color:#fff
405+
style Processing fill:#ff9800,stroke:#fff,stroke-width:2px,color:#fff
406+
style Output fill:#2196f3,stroke:#fff,stroke-width:2px,color:#fff
407+
style Storage fill:#9c27b0,stroke:#fff,stroke-width:2px,color:#fff
408+
```
409+
410+
### Technology Stack
411+
412+
```mermaid
413+
flowchart TB
414+
subgraph Frontend["🎨 Frontend Layer"]
415+
React["⚛️ React 19"]
416+
TS["📘 TypeScript 5"]
417+
CSS["🎨 CSS Modules"]
418+
end
419+
420+
subgraph Build["🔨 Build Tools"]
421+
Vite["⚡ Vite 7"]
422+
ESBuild["📦 ESBuild"]
423+
PostCSS["🎨 PostCSS"]
424+
end
425+
426+
subgraph Routing["🔀 Routing"]
427+
RR7["React Router 7"]
428+
FileRoutes["File-based Routes"]
429+
end
430+
431+
subgraph UI["🧩 UI Libraries"]
432+
Radix["Radix UI"]
433+
Lucide["Lucide Icons"]
434+
Recharts["Recharts"]
435+
Sonner["Sonner Toasts"]
436+
end
437+
438+
subgraph Forms["📝 Form Handling"]
439+
RHF["React Hook Form"]
440+
Zod["Zod Validation"]
441+
end
442+
443+
subgraph Deploy["🚀 Deployment"]
444+
GHPages["GitHub Pages"]
445+
Docker["Docker"]
446+
PWA["PWA Support"]
447+
end
448+
449+
Frontend --> Build
450+
Build --> Routing
451+
Frontend --> UI
452+
Frontend --> Forms
453+
Build --> Deploy
454+
455+
style Frontend fill:#61dafb,stroke:#000,stroke-width:2px,color:#000
456+
style Build fill:#646cff,stroke:#fff,stroke-width:2px,color:#fff
457+
style Routing fill:#ca4245,stroke:#fff,stroke-width:2px,color:#fff
458+
style UI fill:#ff6b6b,stroke:#fff,stroke-width:2px,color:#fff
459+
style Forms fill:#00d4aa,stroke:#000,stroke-width:2px,color:#000
460+
style Deploy fill:#2ea44f,stroke:#fff,stroke-width:2px,color:#fff
461+
```
462+
463+
### Request Flow Sequence
464+
465+
```mermaid
466+
sequenceDiagram
467+
participant U as 👤 User
468+
participant B as 🌐 Browser
469+
participant SW as ⚡ Service Worker
470+
participant R as 🔀 Router
471+
participant C as 🧩 Component
472+
participant T as 🛠️ Tool Logic
473+
participant S as 💾 Storage
474+
475+
U->>B: Navigate to Tool
476+
B->>SW: Check Cache
477+
SW-->>B: Return Cached/Fetch
478+
B->>R: Route Match
479+
R->>C: Render Component
480+
C->>T: Initialize Tool
481+
T->>S: Load Preferences
482+
S-->>T: Return Settings
483+
T-->>C: Ready State
484+
C-->>U: Display UI
485+
486+
U->>C: Input Data
487+
C->>T: Process
488+
T->>T: Validate & Transform
489+
T-->>C: Return Results
490+
C-->>U: Show Output
491+
492+
U->>C: Save to Favorites
493+
C->>S: Store Data
494+
S-->>C: Confirm
495+
C-->>U: Show Success
496+
```
497+
498+
---
499+
206500
## 🛠️ Tech Stack
207501

208502
<table>
@@ -243,6 +537,43 @@ npm run start
243537

244538
## 📁 Project Structure
245539

540+
```mermaid
541+
flowchart TB
542+
subgraph Root["📦 netveris/"]
543+
subgraph AppDir["📁 app/"]
544+
Components["📁 components/"]
545+
Hooks["📁 hooks/"]
546+
Routes["📁 routes/"]
547+
Styles["📁 styles/"]
548+
Types["📁 types/"]
549+
Utils["📁 utils/"]
550+
RootFile["📄 root.tsx"]
551+
RoutesFile["📄 routes.ts"]
552+
end
553+
554+
subgraph PublicDir["📁 public/"]
555+
Manifest["📄 manifest.json"]
556+
ServiceWorker["📄 sw.js"]
557+
Robots["📄 robots.txt"]
558+
Sitemap["📄 sitemap.xml"]
559+
end
560+
561+
subgraph ConfigFiles["⚙️ Config Files"]
562+
Package["📄 package.json"]
563+
TSConfig["📄 tsconfig.json"]
564+
ViteConfig["📄 vite.config.ts"]
565+
Docker["🐳 Dockerfile"]
566+
DockerDev["🐳 Dockerfile.dev"]
567+
Compose["🐳 docker-compose.yml"]
568+
end
569+
end
570+
571+
style Root fill:#1a1a2e,stroke:#00a3c7,stroke-width:2px,color:#fff
572+
style AppDir fill:#16213e,stroke:#e94560,stroke-width:2px,color:#fff
573+
style PublicDir fill:#0f3460,stroke:#00ff88,stroke-width:2px,color:#fff
574+
style ConfigFiles fill:#533483,stroke:#ffd700,stroke-width:2px,color:#fff
575+
```
576+
246577
```
247578
netveris/
248579
├── 📁 app/

0 commit comments

Comments
 (0)