# 📊 Admin Panel - Draw.io Diyagramları

Bu klasör Admin Panel'in düzenlenebilir Draw.io diyagramlarını içerir.

## 📁 Dosyalar

### 1. **01-system-architecture.drawio**
**Sistem Mimarisi**
- Frontend Layer (Admin UI)
- Backend Layer (Admin API, Auth, Audit)
- Database Layer (Admin DB, Customer DB)
- External Services (Customer API, Cloudflare)

### 2. **02-authentication-flow.drawio**
**Kimlik Doğrulama Akışı**
- Login süreci (14 adım)
- JWT token oluşturma
- Audit logging
- Success ve Error path'leri

### 3. **03-database-schema.drawio**
**Veritabanı Şeması**
- admin_users tablosu
- subscription_plans tablosu
- cloudflare_accounts tablosu
- audit_logs tablosu
- İlişkiler (1:N)

### 4. **04-api-endpoints.drawio**
**API Endpoint Yapısı**
- Authentication endpoints
- Plans Management endpoints
- CF Accounts endpoints
- Customers endpoints
- Audit Logs endpoints
- Renk kodlu legend

---

## 🎨 VS Code'da Kullanım

### Dosya Açma
1. VS Code'da `.drawio` dosyasına tıklayın
2. Draw.io eklentisi otomatik açılır
3. Düzenleme modunda açılır

### Düzenleme
- **Şekil Ekleme**: Sol panelden sürükle-bırak
- **Bağlantı**: Şekillerden ok çiz
- **Renk**: Sağ panelden renk seç
- **Metin**: Çift tıkla ve yaz

### Kaydetme
- `Cmd+S` veya `Ctrl+S`
- Otomatik kaydedilir

---

## 🎯 Renk Paleti

| Kategori | Renk | Hex Code |
|----------|------|----------|
| Admin Panel | Açık Kırmızı | #ffebee |
| Auth | Açık Mavi | #e1f5ff |
| Database | Açık Yeşil | #e8f5e9 |
| Plans | Açık Yeşil | #e8f5e9 |
| CF Accounts | Açık Turuncu | #fff3e0 |
| Customers | Açık Mor | #f3e5f5 |
| Audit | Açık Sarı | #fff9c4 |

---

## ✏️ Düzenleme İpuçları

### Yeni Şekil Ekleme
1. Sol panelden şekil seç
2. Canvas'a sürükle
3. Boyutlandır

### Bağlantı Ekleme
1. Şekilden ok çiz
2. Diğer şekle bağla
3. Ok tipini değiştir (sağ panel)

### Metin Düzenleme
1. Şekle çift tıkla
2. Metni yaz
3. Font/boyut ayarla (üst menü)

### Renk Değiştirme
1. Şekli seç
2. Sağ panelden renk seç
3. Fill ve Stroke ayarla

---

## 📤 Export

### PNG Olarak
1. File → Export as → PNG
2. Ayarları seç
3. Export

### SVG Olarak
1. File → Export as → SVG
2. Ayarları seç
3. Export

### PDF Olarak
1. File → Export as → PDF
2. Ayarları seç
3. Export

---

## 🔄 Mermaid ile Karşılaştırma

| Özellik | Mermaid | Draw.io |
|---------|---------|---------|
| Format | Kod (text) | Görsel (XML) |
| Düzenleme | VS Code text editor | VS Code Draw.io eklentisi |
| Versiyon Kontrolü | ✅ Kolay | ⚠️ XML diff |
| Görsel Özgürlük | ❌ Sınırlı | ✅ Tam kontrol |
| Hız | ✅ Hızlı | ⚠️ Orta |
| Öğrenme Eğrisi | ⚠️ Syntax öğren | ✅ Kolay |

---

## 💡 Kullanım Senaryoları

### Mermaid Kullan:
- Hızlı diyagram
- Kod-tabanlı dokümantasyon
- Basit akış şemaları
- Git diff önemli

### Draw.io Kullan:
- Detaylı diyagram
- Karmaşık yapılar
- Sunum için
- Görsel tasarım önemli

---

## 🚀 Sonraki Adımlar

1. ✅ Dosyaları VS Code'da açın
2. ✅ Draw.io eklentisinin çalıştığını kontrol edin
3. ✅ Diyagramları inceleyin
4. ✅ İhtiyacınıza göre düzenleyin
5. ✅ Kaydedin ve commit edin

---

**Son Güncelleme**: 2026-01-12
**Versiyon**: 1.0.0
**Yazar**: ARGE ICT