223 lines
4.4 KiB
Markdown
223 lines
4.4 KiB
Markdown
# 🎯 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! 🎨**
|
||
|
||
|