argeict
/
admin-panel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
admin-panel/diagrams
History
oguz ozturk 0ce4db0bb7 feat: Update Draw.io diagrams - simplified and more readable 
- Simplified authentication flow with clear sequence diagram
- Cleaned up database schema with better layout
- Reorganized API endpoints with emoji icons
- Improved system architecture with cleaner connections
- All diagrams now match Mermaid style: simple, clean, easy to understand
 		2026-01-12 14:53:08 +03:00
..
01-system-architecture.drawio feat: Update Draw.io diagrams - simplified and more readable 2026-01-12 14:53:08 +03:00
02-authentication-flow.drawio feat: Update Draw.io diagrams - simplified and more readable 2026-01-12 14:53:08 +03:00
03-database-schema.drawio feat: Update Draw.io diagrams - simplified and more readable 2026-01-12 14:53:08 +03:00
04-api-endpoints.drawio feat: Update Draw.io diagrams - simplified and more readable 2026-01-12 14:53:08 +03:00
README.md feat: Update Draw.io diagrams - simplified and more readable 2026-01-12 14:53:08 +03:00

README.md

📊 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