# 🎨 Mermaid Diyagramları Görüntüleme Kılavuzu

## 📋 İçindekiler
1. [VS Code ile Görüntüleme](#vs-code-ile-görüntüleme)
2. [Online Editor ile Görüntüleme](#online-editor-ile-görüntüleme)
3. [Diyagramları Düzenleme](#diyagramları-düzenleme)
4. [Örnek Diyagramlar](#örnek-diyagramlar)

---

## 🖥️ VS Code ile Görüntüleme

### Adım 1: Eklenti Kurulumu
```
1. VS Code'u açın
2. Extensions paneline gidin (Cmd+Shift+X veya Ctrl+Shift+X)
3. "Markdown Preview Mermaid Support" arayın
4. Install butonuna tıklayın
5. VS Code'u yeniden başlatın (gerekirse)
```

### Adım 2: Preview Açma
```
1. Herhangi bir .md dosyasını açın (örn: README_WORKFLOW.md)
2. Aşağıdaki yöntemlerden birini kullanın:

   Yöntem A - Kısayol Tuşu:
   - Mac: Cmd+K ardından V
   - Windows/Linux: Ctrl+K ardından V
   
   Yöntem B - Sağ Tık Menüsü:
   - Dosya üzerinde sağ tık
   - "Open Preview to the Side" seçin
   
   Yöntem C - Komut Paleti:
   - Cmd+Shift+P (Mac) veya Ctrl+Shift+P (Windows)
   - "Markdown: Open Preview to the Side" yazın
   - Enter'a basın
```

### Adım 3: Diyagramları Görüntüleme
```
Preview panelinde:
- Mermaid kod blokları otomatik olarak diyagrama dönüşür
- Scroll yaparak tüm diyagramları görebilirsiniz
- Zoom yapabilirsiniz (Cmd/Ctrl + Mouse Wheel)
```

---

## 🌐 Online Editor ile Görüntüleme

### Mermaid Live Editor (Önerilen)

**Adres**: https://mermaid.live/

**Kullanım:**
```
1. https://mermaid.live/ adresine gidin
2. Sol panelde örnek kod göreceksiniz
3. Kendi kodunuzu yapıştırın veya düzenleyin
4. Sağ panelde canlı önizleme görünür
5. Export butonuyla PNG, SVG veya PDF olarak indirebilirsiniz
```

**Örnek Kullanım:**
1. Aşağıdaki kodu kopyalayın:
```mermaid
graph LR
    A[Başlangıç] --> B{Karar}
    B -->|Evet| C[İşlem 1]
    B -->|Hayır| D[İşlem 2]
    C --> E[Son]
    D --> E
```

2. https://mermaid.live/ sitesine gidin
3. Sol panele yapıştırın
4. Sağda diyagramı görün!

---

## ✏️ Diyagramları Düzenleme

### Mermaid Syntax Temelleri

#### 1. Flowchart (Akış Şeması)
```mermaid
graph TB
    A[Dikdörtgen] --> B(Yuvarlak Köşe)
    B --> C{Karar}
    C -->|Evet| D[Sonuç 1]
    C -->|Hayır| E[Sonuç 2]
```

#### 2. Sequence Diagram (Sıralı Diyagram)
```mermaid
sequenceDiagram
    Kullanıcı->>Frontend: Giriş Yap
    Frontend->>Backend: POST /login
    Backend->>Database: Kullanıcı Kontrol
    Database-->>Backend: Kullanıcı Bilgisi
    Backend-->>Frontend: JWT Token
    Frontend-->>Kullanıcı: Dashboard
```

#### 3. Entity Relationship Diagram (ER Diyagram)
```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        int customer_id FK
        date order_date
    }
```

---

## 🎯 Projenizdeki Diyagramları Görüntüleme

### Müşteri Panel İş Akışı Diyagramı

**Dosya**: `README_WORKFLOW.md` veya `WORKFLOW_DIAGRAMS.md`

**VS Code'da Görüntüleme:**
```bash
# Terminal'de:
cd /Users/oguzozturk/AgumentProje/HostingProjesi/MusteriPanel
code README_WORKFLOW.md

# VS Code'da:
# Cmd+K V ile preview açın
```

**Online'da Görüntüleme:**
1. `WORKFLOW_DOCUMENTATION.md` dosyasını açın
2. Mermaid kod bloğunu kopyalayın (```mermaid ile başlayan kısım)
3. https://mermaid.live/ sitesine yapıştırın

---

## 📝 Örnek: Domain Setup Diyagramı

Aşağıdaki kodu kopyalayıp test edebilirsiniz:

```mermaid
graph TB
    Start([Domain Ekle])
    Validate[Domain Doğrula]
    SelectCF[CF Hesap Seç]
    CheckNS[NS Kontrolü]
    Preview[DNS Önizleme]
    Apply[DNS Uygula]
    SSL[SSL Yapılandır]
    Done([Tamamlandı])
    
    Start --> Validate
    Validate --> SelectCF
    SelectCF --> CheckNS
    CheckNS --> Preview
    Preview --> Apply
    Apply --> SSL
    SSL --> Done
    
    style Start fill:#e1f5ff
    style Done fill:#e8f5e9
    style SSL fill:#fff3e0
```

---

## 🎨 Renk ve Stil Özelleştirme

### Renk Ekleme
```mermaid
graph LR
    A[Normal]
    B[Mavi]
    C[Yeşil]
    D[Sarı]
    
    style B fill:#e1f5ff
    style C fill:#e8f5e9
    style D fill:#fff3e0
```

### Proje Renk Paleti
```
Müşteri Panel: #e8f5e9 (Açık Yeşil)
Admin Panel: #ffebee (Açık Kırmızı)
Auth: #e1f5ff (Açık Mavi)
Database: #f3e5f5 (Açık Mor)
External: #fff3e0 (Açık Turuncu)
```

---

## 🔧 Sorun Giderme

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

**Çözüm 1: Eklentiyi Kontrol Edin**
```
1. Extensions paneline gidin
2. "Markdown Preview Mermaid Support" arayın
3. Enabled olduğundan emin olun
4. VS Code'u yeniden başlatın
```

**Çözüm 2: Syntax Hatası**
```
- Mermaid kod bloğu ```mermaid ile başlamalı
- ``` ile bitmeli
- Syntax hatası var mı kontrol edin
```

**Çözüm 3: Online Editor Kullanın**
```
- https://mermaid.live/ her zaman çalışır
- Syntax hatalarını gösterir
- Export seçenekleri sunar
```

---

## 📚 Faydalı Kaynaklar

- **Mermaid Dokümantasyonu**: https://mermaid.js.org/
- **Live Editor**: https://mermaid.live/
- **Syntax Referansı**: https://mermaid.js.org/intro/syntax-reference.html
- **Örnekler**: https://mermaid.js.org/ecosystem/integrations.html

---

## ✅ Hızlı Test

Bu dosyayı VS Code'da açın ve Cmd+K V yapın. Aşağıdaki diyagramı görmelisiniz:

```mermaid
graph TB
    Test[Test Diyagramı]
    Success[Başarılı! 🎉]
    
    Test --> Success
    
    style Test fill:#e1f5ff
    style Success fill:#e8f5e9
```

Eğer yukarıdaki diyagramı görüyorsanız, her şey çalışıyor demektir! 🎉

---

**İpucu**: Tüm proje diyagramlarını görmek için `README_WORKFLOW.md` dosyasını açın ve preview yapın!