159 lines
3.2 KiB
Markdown
159 lines
3.2 KiB
Markdown
# 📊 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
|
||
|