Add VS Code Mermaid quick start guide
This commit is contained in:
oguz ozturk
parent
32d7c600a6
commit
fc0e81e435
|
|
@ -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