761 lines
18 KiB
Markdown
761 lines
18 KiB
Markdown
# 🎨 Admin Panel - Sistem Diyagramları
|
||
|
||
Bu dosya Admin Panel'in tüm sistem diyagramlarını içerir. Tüm diyagramlar Mermaid formatında olup VS Code'da düzenlenebilir.
|
||
|
||
## 📑 İçindekiler
|
||
|
||
1. [Genel Sistem Mimarisi](#1-genel-sistem-mimarisi)
|
||
2. [Admin Panel İş Akışı](#2-admin-panel-iş-akışı)
|
||
3. [Kimlik Doğrulama Akışı](#3-kimlik-doğrulama-akışı)
|
||
4. [Müşteri Yönetimi Akışı](#4-müşteri-yönetimi-akışı)
|
||
5. [Plan Yönetimi Akışı](#5-plan-yönetimi-akışı)
|
||
6. [Cloudflare Hesap Yönetimi](#6-cloudflare-hesap-yönetimi)
|
||
7. [Veritabanı Şeması](#7-veritabanı-şeması)
|
||
8. [API Endpoint Yapısı](#8-api-endpoint-yapısı)
|
||
9. [Audit Log Sistemi](#9-audit-log-sistemi)
|
||
10. [Deployment Mimarisi](#10-deployment-mimarisi)
|
||
|
||
---
|
||
|
||
## 1. Genel Sistem Mimarisi
|
||
|
||
Admin Panel'in genel sistem mimarisini gösterir.
|
||
|
||
```mermaid
|
||
graph TB
|
||
subgraph "Frontend Layer"
|
||
AdminUI[Admin UI<br/>React + Vite<br/>Port: 5173]
|
||
end
|
||
|
||
subgraph "Backend Layer"
|
||
AdminAPI[Admin API<br/>Flask<br/>Port: 5001]
|
||
Auth[Auth Service<br/>JWT]
|
||
AuditService[Audit Service<br/>Logging]
|
||
end
|
||
|
||
subgraph "Database Layer"
|
||
AdminDB[(Admin DB<br/>PostgreSQL<br/>admin_hosting_db)]
|
||
CustomerDB[(Customer DB<br/>PostgreSQL<br/>hosting)]
|
||
end
|
||
|
||
subgraph "External Services"
|
||
CustomerAPI[Customer API<br/>Port: 5000]
|
||
CF[Cloudflare API]
|
||
end
|
||
|
||
AdminUI -->|HTTPS| AdminAPI
|
||
AdminAPI --> Auth
|
||
AdminAPI --> AuditService
|
||
AdminAPI --> AdminDB
|
||
AdminAPI -.->|Read Only| CustomerDB
|
||
AdminAPI -->|Internal API| CustomerAPI
|
||
AdminAPI -->|Validate Tokens| CF
|
||
|
||
Auth --> AdminDB
|
||
AuditService --> AdminDB
|
||
|
||
style AdminUI fill:#ffebee
|
||
style AdminAPI fill:#fff3e0
|
||
style AdminDB fill:#e8f5e9
|
||
style CustomerDB fill:#e1f5ff
|
||
style CustomerAPI fill:#f3e5f5
|
||
```
|
||
|
||
---
|
||
|
||
## 2. Admin Panel İş Akışı
|
||
|
||
Admin kullanıcısının tüm işlevlerini gösteren ana akış diyagramı.
|
||
|
||
```mermaid
|
||
graph TB
|
||
Start([Admin Giriş])
|
||
Login[Login<br/>Username + Password]
|
||
Auth{Kimlik<br/>Doğrulama}
|
||
Dashboard[Dashboard<br/>İstatistikler]
|
||
|
||
subgraph "Ana Modüller"
|
||
Customers[Müşteri Yönetimi]
|
||
Plans[Plan Yönetimi]
|
||
CFAccounts[CF Hesap Yönetimi]
|
||
Audit[Audit Logs]
|
||
end
|
||
|
||
subgraph "Müşteri İşlemleri"
|
||
ListCustomers[Müşteri Listesi]
|
||
ViewCustomer[Müşteri Detay]
|
||
UpdatePlan[Plan Güncelle]
|
||
ManageStatus[Durum Yönet]
|
||
end
|
||
|
||
subgraph "Plan İşlemleri"
|
||
ListPlans[Plan Listesi]
|
||
CreatePlan[Plan Oluştur]
|
||
EditPlan[Plan Düzenle]
|
||
DeletePlan[Plan Sil]
|
||
end
|
||
|
||
subgraph "CF İşlemleri"
|
||
ListCF[CF Hesap Listesi]
|
||
AddCF[CF Hesap Ekle]
|
||
EditCF[CF Hesap Düzenle]
|
||
DeleteCF[CF Hesap Sil]
|
||
ValidateCF[Token Doğrula]
|
||
end
|
||
|
||
Start --> Login
|
||
Login --> Auth
|
||
Auth -->|Başarılı| Dashboard
|
||
Auth -->|Başarısız| Login
|
||
|
||
Dashboard --> Customers
|
||
Dashboard --> Plans
|
||
Dashboard --> CFAccounts
|
||
Dashboard --> Audit
|
||
|
||
Customers --> ListCustomers
|
||
ListCustomers --> ViewCustomer
|
||
ViewCustomer --> UpdatePlan
|
||
ViewCustomer --> ManageStatus
|
||
|
||
Plans --> ListPlans
|
||
ListPlans --> CreatePlan
|
||
ListPlans --> EditPlan
|
||
ListPlans --> DeletePlan
|
||
|
||
CFAccounts --> ListCF
|
||
ListCF --> AddCF
|
||
ListCF --> EditCF
|
||
ListCF --> DeleteCF
|
||
AddCF --> ValidateCF
|
||
EditCF --> ValidateCF
|
||
|
||
style Start fill:#ffebee
|
||
style Dashboard fill:#fff3e0
|
||
style Auth fill:#e1f5ff
|
||
style Customers fill:#e8f5e9
|
||
style Plans fill:#f3e5f5
|
||
style CFAccounts fill:#fff9c4
|
||
```
|
||
|
||
---
|
||
|
||
## 3. Kimlik Doğrulama Akışı
|
||
|
||
Admin login ve JWT token yönetimi.
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant A as Admin User
|
||
participant UI as Admin UI
|
||
participant API as Admin API
|
||
participant Auth as Auth Service
|
||
participant DB as Admin DB
|
||
participant Audit as Audit Log
|
||
|
||
A->>UI: Username + Password Gir
|
||
UI->>API: POST /api/auth/login
|
||
API->>Auth: Validate Credentials
|
||
Auth->>DB: SELECT * FROM admin_users
|
||
DB-->>Auth: Admin User Data
|
||
|
||
alt Credentials Valid
|
||
Auth->>Auth: Verify Password Hash
|
||
Auth->>Auth: Generate JWT Token
|
||
Auth->>DB: UPDATE last_login
|
||
Auth->>Audit: Log Login Action
|
||
Audit->>DB: INSERT audit_log
|
||
Auth-->>API: Token + Admin Data
|
||
API-->>UI: Success + Token
|
||
UI->>UI: Store Token (localStorage)
|
||
UI-->>A: Redirect to Dashboard
|
||
else Invalid Credentials
|
||
Auth-->>API: Error: Invalid Credentials
|
||
API-->>UI: 401 Unauthorized
|
||
UI-->>A: Show Error Message
|
||
end
|
||
|
||
Note over UI,API: Subsequent Requests
|
||
A->>UI: Access Protected Route
|
||
UI->>API: Request + Authorization Header
|
||
API->>Auth: Verify JWT Token
|
||
Auth-->>API: Token Valid + Admin Data
|
||
API-->>UI: Protected Resource
|
||
```
|
||
|
||
---
|
||
|
||
## 4. Müşteri Yönetimi Akışı
|
||
|
||
Admin'in müşterileri görüntüleme ve yönetme süreci.
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant A as Admin
|
||
participant UI as Admin UI
|
||
participant API as Admin API
|
||
participant CustAPI as Customer API
|
||
participant CustDB as Customer DB
|
||
participant Audit as Audit Log
|
||
|
||
Note over A,Audit: Müşteri Listesi Görüntüleme
|
||
A->>UI: Müşteriler Sayfası
|
||
UI->>API: GET /api/customers
|
||
API->>CustAPI: GET /api/admin/customers
|
||
CustAPI->>CustDB: SELECT customers + users
|
||
CustDB-->>CustAPI: Customer Data
|
||
CustAPI-->>API: Customer List
|
||
API-->>UI: Customer List
|
||
UI-->>A: Müşteri Tablosu
|
||
|
||
Note over A,Audit: Müşteri Detay Görüntüleme
|
||
A->>UI: Müşteri Seç
|
||
UI->>API: GET /api/customers/:id
|
||
API->>CustAPI: GET /api/admin/customers/:id
|
||
CustAPI->>CustDB: SELECT customer details
|
||
CustAPI->>CustDB: SELECT domains
|
||
CustDB-->>CustAPI: Full Customer Data
|
||
CustAPI-->>API: Customer Details
|
||
API-->>UI: Customer Details
|
||
UI-->>A: Detay Sayfası
|
||
|
||
Note over A,Audit: Plan Güncelleme
|
||
A->>UI: Plan Değiştir
|
||
UI->>API: PUT /api/customers/:id/plan
|
||
API->>CustAPI: PUT /api/admin/customers/:id/plan
|
||
CustAPI->>CustDB: UPDATE customer plan
|
||
CustDB-->>CustAPI: Success
|
||
CustAPI-->>API: Success
|
||
API->>Audit: Log Plan Update
|
||
API-->>UI: Success Message
|
||
UI-->>A: Plan Güncellendi
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Plan Yönetimi Akışı
|
||
|
||
Subscription plan oluşturma, düzenleme ve silme işlemleri.
|
||
|
||
```mermaid
|
||
graph TB
|
||
Start([Plan Yönetimi])
|
||
List[Plan Listesi]
|
||
|
||
subgraph "Plan Görüntüleme"
|
||
GetPlans[GET /api/plans]
|
||
ShowList[Plan Tablosu]
|
||
end
|
||
|
||
subgraph "Plan Oluşturma"
|
||
CreateForm[Yeni Plan Formu]
|
||
ValidateCreate{Validasyon}
|
||
CreateAPI[POST /api/plans]
|
||
SaveDB[(Veritabanına Kaydet)]
|
||
LogCreate[Audit Log]
|
||
end
|
||
|
||
subgraph "Plan Düzenleme"
|
||
EditForm[Plan Düzenle Formu]
|
||
ValidateEdit{Validasyon}
|
||
UpdateAPI[PUT /api/plans/:id]
|
||
UpdateDB[(Veritabanı Güncelle)]
|
||
LogUpdate[Audit Log]
|
||
end
|
||
|
||
subgraph "Plan Silme"
|
||
ConfirmDelete{Onay}
|
||
CheckUsage{Kullanımda mı?}
|
||
DeleteAPI[DELETE /api/plans/:id]
|
||
DeleteDB[(Veritabanından Sil)]
|
||
LogDelete[Audit Log]
|
||
end
|
||
|
||
Start --> List
|
||
List --> GetPlans
|
||
GetPlans --> ShowList
|
||
|
||
ShowList --> CreateForm
|
||
CreateForm --> ValidateCreate
|
||
ValidateCreate -->|Geçerli| CreateAPI
|
||
ValidateCreate -->|Hatalı| CreateForm
|
||
CreateAPI --> SaveDB
|
||
SaveDB --> LogCreate
|
||
LogCreate --> List
|
||
|
||
ShowList --> EditForm
|
||
EditForm --> ValidateEdit
|
||
ValidateEdit -->|Geçerli| UpdateAPI
|
||
ValidateEdit -->|Hatalı| EditForm
|
||
UpdateAPI --> UpdateDB
|
||
UpdateDB --> LogUpdate
|
||
LogUpdate --> List
|
||
|
||
ShowList --> ConfirmDelete
|
||
ConfirmDelete -->|Evet| CheckUsage
|
||
ConfirmDelete -->|Hayır| List
|
||
CheckUsage -->|Kullanımda Değil| DeleteAPI
|
||
CheckUsage -->|Kullanımda| List
|
||
DeleteAPI --> DeleteDB
|
||
DeleteDB --> LogDelete
|
||
LogDelete --> List
|
||
|
||
style Start fill:#ffebee
|
||
style List fill:#fff3e0
|
||
style SaveDB fill:#e8f5e9
|
||
style UpdateDB fill:#e8f5e9
|
||
style DeleteDB fill:#e8f5e9
|
||
```
|
||
|
||
---
|
||
|
||
## 6. Cloudflare Hesap Yönetimi
|
||
|
||
CF hesaplarının eklenmesi, doğrulanması ve yönetimi.
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant A as Admin
|
||
participant UI as Admin UI
|
||
participant API as Admin API
|
||
participant DB as Admin DB
|
||
participant CF as Cloudflare API
|
||
participant Audit as Audit Log
|
||
|
||
Note over A,Audit: CF Hesap Ekleme
|
||
A->>UI: Yeni CF Hesap Formu
|
||
A->>UI: Name, Email, API Token
|
||
UI->>API: POST /api/cf-accounts
|
||
|
||
API->>API: Validate Input
|
||
API->>CF: Verify Token
|
||
CF-->>API: Token Valid + Account Info
|
||
|
||
API->>API: Encrypt API Token
|
||
API->>DB: INSERT cloudflare_account
|
||
DB-->>API: Account Created
|
||
|
||
API->>Audit: Log CF Account Creation
|
||
Audit->>DB: INSERT audit_log
|
||
|
||
API-->>UI: Success + Account Data
|
||
UI-->>A: Hesap Eklendi
|
||
|
||
Note over A,Audit: CF Hesap Güncelleme
|
||
A->>UI: Hesap Düzenle
|
||
UI->>API: PUT /api/cf-accounts/:id
|
||
|
||
alt Token Değişti
|
||
API->>CF: Verify New Token
|
||
CF-->>API: Token Valid
|
||
API->>API: Encrypt New Token
|
||
end
|
||
|
||
API->>DB: UPDATE cloudflare_account
|
||
API->>Audit: Log Update
|
||
API-->>UI: Success
|
||
UI-->>A: Hesap Güncellendi
|
||
|
||
Note over A,Audit: CF Hesap Silme
|
||
A->>UI: Hesap Sil
|
||
UI->>API: DELETE /api/cf-accounts/:id
|
||
|
||
API->>DB: Check current_domains
|
||
|
||
alt Domains > 0
|
||
API-->>UI: Error: Active Domains
|
||
UI-->>A: Silinemez
|
||
else Domains = 0
|
||
API->>DB: DELETE cloudflare_account
|
||
API->>Audit: Log Deletion
|
||
API-->>UI: Success
|
||
UI-->>A: Hesap Silindi
|
||
end
|
||
```
|
||
|
||
---
|
||
|
||
## 7. Veritabanı Şeması
|
||
|
||
Admin Panel veritabanı yapısı (ER Diagram).
|
||
|
||
```mermaid
|
||
erDiagram
|
||
ADMIN_USERS ||--o{ AUDIT_LOGS : creates
|
||
ADMIN_USERS {
|
||
int id PK
|
||
string username UK
|
||
string email UK
|
||
string password_hash
|
||
string full_name
|
||
string role
|
||
boolean is_active
|
||
datetime created_at
|
||
datetime last_login
|
||
}
|
||
|
||
SUBSCRIPTION_PLANS {
|
||
int id PK
|
||
string name UK
|
||
string slug UK
|
||
text description
|
||
decimal price_monthly
|
||
decimal price_yearly
|
||
int max_domains
|
||
int max_containers
|
||
int max_storage_gb
|
||
int max_bandwidth_gb
|
||
json features
|
||
boolean is_active
|
||
boolean is_visible
|
||
int sort_order
|
||
datetime created_at
|
||
datetime updated_at
|
||
}
|
||
|
||
CLOUDFLARE_ACCOUNTS {
|
||
int id PK
|
||
string name UK
|
||
string email
|
||
string api_token_encrypted
|
||
int max_domains
|
||
int current_domains
|
||
text notes
|
||
boolean is_active
|
||
datetime created_at
|
||
datetime updated_at
|
||
}
|
||
|
||
AUDIT_LOGS {
|
||
int id PK
|
||
int admin_id FK
|
||
string action
|
||
string resource_type
|
||
int resource_id
|
||
json details
|
||
string ip_address
|
||
datetime created_at
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 8. API Endpoint Yapısı
|
||
|
||
Admin Panel'in tüm API endpoint'leri.
|
||
|
||
```mermaid
|
||
graph TB
|
||
subgraph "Authentication Endpoints"
|
||
AuthLogin[POST /api/auth/login<br/>Admin Login]
|
||
AuthMe[GET /api/auth/me<br/>Current Admin]
|
||
AuthLogout[POST /api/auth/logout<br/>Logout]
|
||
end
|
||
|
||
subgraph "Plans Endpoints"
|
||
PlansList[GET /api/plans<br/>List All Plans]
|
||
PlansCreate[POST /api/plans<br/>Create Plan]
|
||
PlansUpdate[PUT /api/plans/:id<br/>Update Plan]
|
||
PlansDelete[DELETE /api/plans/:id<br/>Delete Plan]
|
||
end
|
||
|
||
subgraph "CF Accounts Endpoints"
|
||
CFList[GET /api/cf-accounts<br/>List CF Accounts]
|
||
CFCreate[POST /api/cf-accounts<br/>Create CF Account]
|
||
CFUpdate[PUT /api/cf-accounts/:id<br/>Update CF Account]
|
||
CFDelete[DELETE /api/cf-accounts/:id<br/>Delete CF Account]
|
||
CFStats[GET /api/cf-accounts/stats<br/>CF Statistics]
|
||
end
|
||
|
||
subgraph "Customers Endpoints"
|
||
CustList[GET /api/customers<br/>List Customers]
|
||
CustDetail[GET /api/customers/:id<br/>Customer Details]
|
||
CustUpdatePlan[PUT /api/customers/:id/plan<br/>Update Customer Plan]
|
||
CustStats[GET /api/customers/stats<br/>Customer Statistics]
|
||
end
|
||
|
||
subgraph "Audit Endpoints"
|
||
AuditList[GET /api/audit<br/>List Audit Logs]
|
||
AuditFilter[GET /api/audit?filter<br/>Filtered Logs]
|
||
end
|
||
|
||
style AuthLogin fill:#e1f5ff
|
||
style AuthMe fill:#e1f5ff
|
||
style AuthLogout fill:#e1f5ff
|
||
|
||
style PlansList fill:#e8f5e9
|
||
style PlansCreate fill:#e8f5e9
|
||
style PlansUpdate fill:#e8f5e9
|
||
style PlansDelete fill:#e8f5e9
|
||
|
||
style CFList fill:#fff3e0
|
||
style CFCreate fill:#fff3e0
|
||
style CFUpdate fill:#fff3e0
|
||
style CFDelete fill:#fff3e0
|
||
|
||
style CustList fill:#f3e5f5
|
||
style CustDetail fill:#f3e5f5
|
||
style CustUpdatePlan fill:#f3e5f5
|
||
```
|
||
|
||
---
|
||
|
||
## 9. Audit Log Sistemi
|
||
|
||
Tüm admin işlemlerinin loglanması.
|
||
|
||
```mermaid
|
||
graph TB
|
||
subgraph "Admin Actions"
|
||
Login[Login]
|
||
CreatePlan[Create Plan]
|
||
UpdatePlan[Update Plan]
|
||
DeletePlan[Delete Plan]
|
||
CreateCF[Create CF Account]
|
||
UpdateCF[Update CF Account]
|
||
DeleteCF[Delete CF Account]
|
||
UpdateCustomer[Update Customer]
|
||
end
|
||
|
||
subgraph "Audit Service"
|
||
Capture[Action Capture]
|
||
Validate[Validate Data]
|
||
Enrich[Enrich with Metadata]
|
||
Store[Store to DB]
|
||
end
|
||
|
||
subgraph "Audit Log Data"
|
||
AdminID[Admin ID]
|
||
Action[Action Type]
|
||
Resource[Resource Type]
|
||
ResourceID[Resource ID]
|
||
Details[Details JSON]
|
||
IP[IP Address]
|
||
Timestamp[Timestamp]
|
||
end
|
||
|
||
subgraph "Audit Viewing"
|
||
ViewAll[View All Logs]
|
||
FilterByAdmin[Filter by Admin]
|
||
FilterByAction[Filter by Action]
|
||
FilterByDate[Filter by Date]
|
||
Export[Export Logs]
|
||
end
|
||
|
||
Login --> Capture
|
||
CreatePlan --> Capture
|
||
UpdatePlan --> Capture
|
||
DeletePlan --> Capture
|
||
CreateCF --> Capture
|
||
UpdateCF --> Capture
|
||
DeleteCF --> Capture
|
||
UpdateCustomer --> Capture
|
||
|
||
Capture --> Validate
|
||
Validate --> Enrich
|
||
Enrich --> Store
|
||
|
||
Store --> AdminID
|
||
Store --> Action
|
||
Store --> Resource
|
||
Store --> ResourceID
|
||
Store --> Details
|
||
Store --> IP
|
||
Store --> Timestamp
|
||
|
||
AdminID --> ViewAll
|
||
Action --> ViewAll
|
||
Resource --> ViewAll
|
||
|
||
ViewAll --> FilterByAdmin
|
||
ViewAll --> FilterByAction
|
||
ViewAll --> FilterByDate
|
||
ViewAll --> Export
|
||
|
||
style Capture fill:#ffebee
|
||
style Store fill:#e8f5e9
|
||
style ViewAll fill:#e1f5ff
|
||
```
|
||
|
||
---
|
||
|
||
## 10. Deployment Mimarisi
|
||
|
||
Admin Panel'in production deployment yapısı.
|
||
|
||
```mermaid
|
||
graph TB
|
||
subgraph "Internet"
|
||
Users[Admin Users]
|
||
end
|
||
|
||
subgraph "Nginx Reverse Proxy"
|
||
Nginx[Nginx<br/>SSL Termination]
|
||
end
|
||
|
||
subgraph "Frontend Container"
|
||
FrontendApp[React App<br/>Static Files<br/>Port: 80]
|
||
end
|
||
|
||
subgraph "Backend Container"
|
||
BackendApp[Flask API<br/>Port: 5001]
|
||
Gunicorn[Gunicorn<br/>WSGI Server]
|
||
end
|
||
|
||
subgraph "Database"
|
||
AdminDB[(PostgreSQL<br/>admin_hosting_db<br/>Port: 5432)]
|
||
CustomerDB[(PostgreSQL<br/>hosting<br/>Read-Only)]
|
||
end
|
||
|
||
subgraph "External Services"
|
||
CustomerAPI[Customer API<br/>api.argeict.net]
|
||
CloudflareAPI[Cloudflare API]
|
||
end
|
||
|
||
subgraph "Monitoring"
|
||
Logs[Application Logs]
|
||
Metrics[System Metrics]
|
||
end
|
||
|
||
Users -->|HTTPS| Nginx
|
||
Nginx -->|admin.argeict.net| FrontendApp
|
||
Nginx -->|admin-api.argeict.net| Gunicorn
|
||
|
||
FrontendApp -->|API Calls| Gunicorn
|
||
Gunicorn --> BackendApp
|
||
|
||
BackendApp --> AdminDB
|
||
BackendApp -.->|Read Only| CustomerDB
|
||
BackendApp -->|Internal API| CustomerAPI
|
||
BackendApp -->|Validate Tokens| CloudflareAPI
|
||
|
||
BackendApp --> Logs
|
||
BackendApp --> Metrics
|
||
|
||
style Users fill:#e1f5ff
|
||
style Nginx fill:#fff3e0
|
||
style FrontendApp fill:#ffebee
|
||
style BackendApp fill:#e8f5e9
|
||
style AdminDB fill:#f3e5f5
|
||
style CustomerDB fill:#fff9c4
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 Diyagram Düzenleme Kılavuzu
|
||
|
||
### VS Code'da Düzenleme
|
||
|
||
1. **Dosyayı Açın**: `ADMIN_PANEL_DIAGRAMS.md`
|
||
2. **Preview Açın**: `Cmd+K V` (Mac) veya `Ctrl+K V` (Windows)
|
||
3. **Düzenleyin**: Sol panelde Mermaid kodunu değiştirin
|
||
4. **Görün**: Sağ panelde canlı önizleme
|
||
|
||
### Mermaid Syntax Temelleri
|
||
|
||
#### Graph/Flowchart
|
||
```mermaid
|
||
graph TB
|
||
A[Kutu] --> B{Karar}
|
||
B -->|Evet| C[Sonuç 1]
|
||
B -->|Hayır| D[Sonuç 2]
|
||
```
|
||
|
||
#### Sequence Diagram
|
||
```mermaid
|
||
sequenceDiagram
|
||
A->>B: Mesaj
|
||
B-->>A: Yanıt
|
||
```
|
||
|
||
#### ER Diagram
|
||
```mermaid
|
||
erDiagram
|
||
TABLE1 ||--o{ TABLE2 : relation
|
||
TABLE1 {
|
||
int id PK
|
||
string name
|
||
}
|
||
```
|
||
|
||
### Renk Paleti
|
||
|
||
```
|
||
Admin Panel: #ffebee (Açık Kırmızı)
|
||
Auth: #e1f5ff (Açık Mavi)
|
||
Database: #e8f5e9 (Açık Yeşil)
|
||
Plans: #f3e5f5 (Açık Mor)
|
||
CF Accounts: #fff3e0 (Açık Turuncu)
|
||
Customers: #f3e5f5 (Açık Mor)
|
||
```
|
||
|
||
### Düzenleme İpuçları
|
||
|
||
1. **Node Ekleme**: Yeni bir satır ekleyin
|
||
```
|
||
NewNode[Yeni İşlem]
|
||
```
|
||
|
||
2. **Bağlantı Ekleme**: Ok ile bağlayın
|
||
```
|
||
A --> NewNode
|
||
NewNode --> B
|
||
```
|
||
|
||
3. **Renk Değiştirme**: Style ekleyin
|
||
```
|
||
style NewNode fill:#e1f5ff
|
||
```
|
||
|
||
4. **Subgraph Ekleme**: Gruplama yapın
|
||
```
|
||
subgraph "Grup Adı"
|
||
Node1
|
||
Node2
|
||
end
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 Kullanım Senaryoları
|
||
|
||
### Senaryo 1: Yeni Endpoint Ekleme
|
||
1. Diyagram 8'i açın (API Endpoint Yapısı)
|
||
2. İlgili subgraph'a yeni endpoint ekleyin
|
||
3. Renk ve stil ekleyin
|
||
4. Kaydedin
|
||
|
||
### Senaryo 2: Yeni İş Akışı Ekleme
|
||
1. Diyagram 2'yi açın (Admin Panel İş Akışı)
|
||
2. Yeni subgraph oluşturun
|
||
3. İşlem adımlarını ekleyin
|
||
4. Ana akışa bağlayın
|
||
|
||
### Senaryo 3: Veritabanı Tablosu Ekleme
|
||
1. Diyagram 7'yi açın (Veritabanı Şeması)
|
||
2. Yeni tablo tanımı ekleyin
|
||
3. İlişkileri belirleyin
|
||
4. Kaydedin
|
||
|
||
---
|
||
|
||
## 📚 Referanslar
|
||
|
||
- **Mermaid Dokümantasyonu**: https://mermaid.js.org/
|
||
- **Live Editor**: https://mermaid.live/
|
||
- **Syntax Guide**: https://mermaid.js.org/intro/syntax-reference.html
|
||
|
||
---
|
||
|
||
**Son Güncelleme**: 2026-01-12
|
||
**Versiyon**: 1.0.0
|
||
**Yazar**: ARGE ICT
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|