Add VS Code Mermaid quick start guide
This commit is contained in:
oguz ozturk
parent
9d66917626
commit
8fa93c05e1
|
|
@ -0,0 +1,222 @@
|
||||||
|
# 🎯 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! 🎨**
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,331 @@
|
||||||
|
# 🎨 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! 🚀**
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue