# 🎯 BURADAN BAŞLAYIN!

## ⚡ 30 Saniyede Mermaid Diyagramlarını Görün

### Adım 1: Bu Dosyayı VS Code'da Açın ✅
**Tebrikler!** Bu dosyayı zaten açtınız demektir.

### Adım 2: Preview'ı Açın
**ŞİMDİ YAPIN:**
1. Klavyenizde **Cmd+K** tuşuna basın (Mac)
2. Bırakın
3. **V** tuşuna basın

**VEYA:**
- Sağ üst köşede 📄 ikonuna tıklayın

### Adım 3: Aşağıdaki Diyagramı Görün

Eğer preview açıksa, aşağıda bir diyagram görmelisiniz:

```mermaid
graph TB
    Start([🎉 Başarılı!])
    Message[Mermaid Diyagramlarını Görüyorsunuz!]
    Next[Sonraki Adım: README_WORKFLOW.md Açın]
    
    Start --> Message
    Message --> Next
    
    style Start fill:#e8f5e9
    style Message fill:#fff3e0
    style Next fill:#e1f5ff
```

---

## ✅ Diyagramı Gördünüz mü?

### 👍 EVET - Mükemmel!

Şimdi şunları yapın:

1. **TEST_MERMAID.md** dosyasını açın
   - 4 farklı diyagram tipi göreceksiniz
   
2. **README_WORKFLOW.md** dosyasını açın
   - Tüm proje diyagramlarını göreceksiniz (10 adet)
   
3. **WORKFLOW_DOCUMENTATION.md** dosyasını açın
   - Detaylı dokümantasyon ve açıklamalar

### 👎 HAYIR - Sorun Giderme

#### Çözüm 1: Preview Açık mı?
```
- Ekranınız ikiye bölünmüş mü?
- Sol: Kod, Sağ: Preview
- Değilse: Cmd+K ardından V yapın
```

#### Çözüm 2: Eklenti Kontrolü
```
1. Cmd+Shift+X (Extensions)
2. "Mermaid" arayın
3. Yüklü ve aktif mi kontrol edin
4. VS Code'u yeniden başlatın
```

#### Çözüm 3: Online Editor
```
1. https://mermaid.live/ açın (tarayıcınızda açıldı)
2. Yukarıdaki diyagram kodunu kopyalayın
3. Yapıştırın ve görün
```

---

## 🎨 Daha Fazla Örnek

### Örnek 1: Müşteri Panel Akışı

```mermaid
graph LR
    A[Kayıt Ol] --> B[Giriş Yap]
    B --> C[Dashboard]
    C --> D[Domain Ekle]
    D --> E[Başarılı]
    
    style A fill:#e1f5ff
    style E fill:#e8f5e9
```

### Örnek 2: Admin Panel Akışı

```mermaid
graph TB
    Admin[Admin Giriş]
    Manage[Yönetim Paneli]
    Customer[Müşteriler]
    Plans[Planlar]
    CF[CF Hesapları]
    
    Admin --> Manage
    Manage --> Customer
    Manage --> Plans
    Manage --> CF
    
    style Admin fill:#ffebee
    style Manage fill:#fff3e0
```

### Örnek 3: API İletişimi

```mermaid
sequenceDiagram
    participant U as Kullanıcı
    participant F as Frontend
    participant A as API
    participant D as Database
    
    U->>F: Domain Ekle
    F->>A: POST /api/domains
    A->>D: Kaydet
    D-->>A: OK
    A-->>F: Başarılı
    F-->>U: Domain Eklendi ✅
```

---

## 📚 Dosya Rehberi

| Dosya | İçerik | Ne Zaman Kullanılır |
|-------|--------|---------------------|
| **BASLA_BURADAN.md** | Bu dosya | İlk başlangıç |
| **TEST_MERMAID.md** | Test diyagramları | Kurulum testi |
| **README_WORKFLOW.md** | Genel bakış | Hızlı referans |
| **WORKFLOW_DOCUMENTATION.md** | Detaylı dokümantasyon | Derinlemesine bilgi |
| **VSCODE_MERMAID_KILAVUZ.md** | VS Code kılavuzu | Sorun giderme |

---

## 🎯 Sonraki Adımlar

### 1. Test Edin
```bash
✅ Bu dosyayı preview'da görüyorsunuz
✅ TEST_MERMAID.md dosyasını açın
✅ 4 farklı diyagram tipini görün
```

### 2. Proje Diyagramlarını İnceleyin
```bash
✅ README_WORKFLOW.md açın
✅ 10 proje diyagramını görün
✅ İş akışlarını anlayın
```

### 3. Dokümantasyonu Okuyun
```bash
✅ WORKFLOW_DOCUMENTATION.md açın
✅ API endpoint'leri öğrenin
✅ Veritabanı şemalarını inceleyin
```

---

## 💡 Hızlı İpuçları

### Klavye Kısayolları
```
Cmd+K V     → Preview aç
Cmd+S       → Kaydet
Cmd+Shift+P → Komut paleti
Cmd+Shift+X → Extensions
```

### Preview İpuçları
```
- Otomatik güncellenir
- Zoom yapabilirsiniz (Cmd + Mouse Wheel)
- Split view'da çalışır
```

### Diyagram Düzenleme
```
1. Sol panelde kodu değiştirin
2. Sağ panelde anında görün
3. Kaydetmeyi unutmayın
```

---

## 🎉 Başarı Mesajı

Eğer yukarıdaki diyagramları görüyorsanız:

```mermaid
graph TB
    You[Siz]
    Expert[Mermaid Uzmanı]
    Success[Başarılı! 🎉]
    
    You --> Expert
    Expert --> Success
    
    style Success fill:#e8f5e9
```

**Tebrikler! Artık Mermaid diyagramlarını görüntüleyebiliyorsunuz!** 🚀

---

## 📞 Yardım Gerekirse

1. **VSCODE_MERMAID_KILAVUZ.md** dosyasını açın
2. **MERMAID_KULLANIM_KILAVUZU.md** dosyasını okuyun
3. https://mermaid.live/ online editor'ü kullanın

**Kolay gelsin! 🎨**