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
|
|||
|
|
|