admin-panel/VSCODE_MERMAID_KILAVUZ.md

# 🎨 VS Code'da Mermaid Diyagramları Görüntüleme

## ✅ Eklenti Kurulumu Tamamlandı!

"Mermaid Chart" eklentisini başarıyla kurdunuz. Şimdi kullanmaya başlayalım!

---

## 🚀 Hızlı Başlangıç (3 Adım)

### Adım 1: Dosyayı Açın
```
VS Code'da herhangi bir .md dosyasını açın:
- TEST_MERMAID.md (test için)
- README_WORKFLOW.md (tüm diyagramlar için)
- WORKFLOW_DOCUMENTATION.md (detaylı dokümantasyon)
```

### Adım 2: Preview Açın
```
Klavye: Cmd+K ardından V
(Cmd+K'ya basın, bırakın, sonra V'ye basın)
```

### Adım 3: Diyagramları Görün!
```
Sağ panelde tüm Mermaid diyagramları otomatik render edilecek
```

---

## 🎯 Detaylı Kullanım

### Preview Açma Yöntemleri

#### 1. Klavye Kısayolu (Önerilen)
```
Mac: Cmd+K ardından V
Windows: Ctrl+K ardından V

NOT: K tuşuna basıp bırakın, sonra V'ye basın
```

#### 2. Komut Paleti
```
1. Cmd+Shift+P (Mac) veya Ctrl+Shift+P (Windows)
2. "Markdown: Open Preview to the Side" yazın
3. Enter'a basın
```

#### 3. Sağ Tık Menüsü
```
1. Dosya içinde sağ tıklayın
2. "Open Preview to the Side" seçin
```

#### 4. Üst Menü İkonu
```
Sağ üst köşede preview ikonu (📄) → Tıklayın
```

---

## 📊 Test Diyagramı

Bu dosyayı VS Code'da açın ve Cmd+K V yapın:

```mermaid
graph TB
    Start([VS Code Açıldı])
    Open[Markdown Dosyası Aç]
    Preview[Cmd+K V]
    See[Diyagramları Gör]
    Success([Başarılı! 🎉])
    
    Start --> Open
    Open --> Preview
    Preview --> See
    See --> Success
    
    style Start fill:#e1f5ff
    style Success fill:#e8f5e9
    style Preview fill:#fff3e0
```

**Yukarıdaki diyagramı görüyor musunuz?**
- ✅ Evet → Mükemmel! Her şey çalışıyor
- ❌ Hayır → Aşağıdaki sorun giderme bölümüne bakın

---

## 🔧 Sorun Giderme

### Diyagram Görünmüyor?

#### Çözüm 1: Eklentiyi Kontrol Edin
```
1. VS Code'da Extensions paneline gidin (Cmd+Shift+X)
2. "Mermaid" arayın
3. "Mermaid Chart" veya "Markdown Preview Mermaid Support" yüklü mü?
4. Enabled olduğundan emin olun
5. VS Code'u yeniden başlatın
```

#### Çözüm 2: Syntax Kontrolü
```
Mermaid kod bloğu şu şekilde olmalı:

```mermaid
graph TB
    A --> B
```

- ``` ile başlamalı (3 backtick)
- mermaid kelimesi olmalı
- ``` ile bitmeli
```

#### Çözüm 3: Farklı Eklenti Deneyin
```
Extensions'da şunları arayın:
- "Markdown Preview Mermaid Support"
- "Mermaid Markdown Syntax Highlighting"
```

---

## 🎨 Örnek Diyagramlar

### 1. Basit Akış Şeması

```mermaid
graph LR
    A[Başlangıç] --> B[İşlem]
    B --> C[Son]
    
    style A fill:#e1f5ff
    style C fill:#e8f5e9
```

### 2. Karar Ağacı

```mermaid
graph TB
    Start([Başla])
    Question{Soru?}
    Yes[Evet]
    No[Hayır]
    End([Bitir])
    
    Start --> Question
    Question -->|Evet| Yes
    Question -->|Hayır| No
    Yes --> End
    No --> End
    
    style Start fill:#e1f5ff
    style End fill:#e8f5e9
```

### 3. Sequence Diagram

```mermaid
sequenceDiagram
    participant K as Kullanıcı
    participant F as Frontend
    participant A as API
    
    K->>F: Tıkla
    F->>A: İstek Gönder
    A-->>F: Yanıt
    F-->>K: Göster
```

### 4. Müşteri Panel Akışı

```mermaid
graph TB
    Login[Giriş]
    Dashboard[Dashboard]
    Domain[Domain Ekle]
    CF[CF Hesap Seç]
    DNS[DNS Yapılandır]
    SSL[SSL Aktif]
    Done([Tamamlandı])
    
    Login --> Dashboard
    Dashboard --> Domain
    Domain --> CF
    CF --> DNS
    DNS --> SSL
    SSL --> Done
    
    style Login fill:#e1f5ff
    style Done fill:#e8f5e9
    style SSL fill:#fff3e0
```

---

## 💡 Kullanım İpuçları

### 1. Split View Kullanın
```
- Sol panelde kodu düzenleyin
- Sağ panelde canlı önizleme görün
- Değişiklikler otomatik güncellenir
```

### 2. Zoom Yapın
```
Preview panelinde:
- Cmd + Mouse Wheel (Mac)
- Ctrl + Mouse Wheel (Windows)
```

### 3. Diyagram Düzenleyin
```
1. Sol panelde Mermaid kodunu değiştirin
2. Sağ panelde anında güncellenir
3. Kaydetmeyi unutmayın (Cmd+S)
```

---

## 📁 Proje Dosyaları

### Test İçin:
```
TEST_MERMAID.md
- 4 basit test diyagramı
- Kurulum kontrolü için ideal
```

### Tüm Diyagramlar:
```
README_WORKFLOW.md
- 10 proje diyagramı
- Genel bakış
```

### Detaylı Dokümantasyon:
```
WORKFLOW_DOCUMENTATION.md
- 957 satır dokümantasyon
- API referansları
- Veritabanı şemaları
```

---

## 🎯 Pratik Egzersiz

### Egzersiz 1: Basit Diyagram Oluşturun

1. Yeni bir .md dosyası oluşturun
2. Aşağıdaki kodu yapıştırın:

```markdown
# Benim Diyagramım

```mermaid
graph TB
    A[Adım 1] --> B[Adım 2]
    B --> C[Adım 3]
```
```

3. Cmd+K V ile preview açın
4. Diyagramı görün!

### Egzersiz 2: Renk Ekleyin

```mermaid
graph LR
    A[Kırmızı]
    B[Mavi]
    C[Yeşil]
    
    A --> B --> C
    
    style A fill:#ffebee
    style B fill:#e1f5ff
    style C fill:#e8f5e9
```

---

## ✅ Başarı Kontrolü

Aşağıdaki soruları cevaplayın:

- [ ] VS Code'da .md dosyası açabiliyorum
- [ ] Cmd+K V ile preview açabiliyorum
- [ ] Mermaid diyagramlarını görebiliyorum
- [ ] Diyagramları düzenleyebiliyorum
- [ ] Değişiklikler canlı güncelleniyor

**Hepsi ✅ ise tebrikler! Artık Mermaid uzmanısınız! 🎉**

---

## 🆘 Hala Sorun mu Var?

### Online Alternatif (Her Zaman Çalışır)
```
1. https://mermaid.live/ sitesine gidin
2. Mermaid kodunu kopyalayın
3. Sol panele yapıştırın
4. Sağ panelde görün
5. PNG/SVG olarak indirin
```

### GitHub/Gitea'da Görüntüleme
```
Repository'nizde .md dosyalarını açın
Mermaid diyagramları otomatik render edilir
```

---

## 📞 Yardım

Sorun yaşıyorsanız:
1. VS Code'u yeniden başlatın
2. Eklentileri kontrol edin
3. Online editor kullanın (https://mermaid.live/)

**Başarılar! 🚀**