Add step-by-step Mermaid troubleshooting guide
This commit is contained in:
oguz ozturk
parent
fc0e81e435
commit
f48b258897
|
|
@ -0,0 +1,58 @@
|
||||||
|
# 🧪 Mermaid Test - Çok Basit
|
||||||
|
|
||||||
|
Bu dosyayı VS Code'da açın ve preview yapın.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Test 1: En Basit Diyagram
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
A --> B
|
||||||
|
```
|
||||||
|
|
||||||
|
Yukarıda A'dan B'ye giden bir ok görmelisiniz.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Test 2: Renkli Diyagram
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TB
|
||||||
|
Start[Başlangıç]
|
||||||
|
End[Son]
|
||||||
|
|
||||||
|
Start --> End
|
||||||
|
|
||||||
|
style Start fill:#e1f5ff
|
||||||
|
style End fill:#e8f5e9
|
||||||
|
```
|
||||||
|
|
||||||
|
Yukarıda mavi ve yeşil kutular görmelisiniz.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Test 3: Üç Adım
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
A[1] --> B[2]
|
||||||
|
B --> C[3]
|
||||||
|
```
|
||||||
|
|
||||||
|
Yukarıda 1, 2, 3 sıralı kutular görmelisiniz.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Kontrol Listesi
|
||||||
|
|
||||||
|
Preview açtığınızda:
|
||||||
|
|
||||||
|
- [ ] Diyagramlar görünüyor mu?
|
||||||
|
- [ ] Kutular ve oklar var mı?
|
||||||
|
- [ ] Renkler görünüyor mu?
|
||||||
|
|
||||||
|
**EVET ise:** ✅ Çalışıyor!
|
||||||
|
**HAYIR ise:** ❌ Sorun var, devam edelim.
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
graph TB
|
||||||
|
Start([Başlangıç])
|
||||||
|
Step1[Adım 1]
|
||||||
|
Step2[Adım 2]
|
||||||
|
End([Son])
|
||||||
|
|
||||||
|
Start --> Step1
|
||||||
|
Step1 --> Step2
|
||||||
|
Step2 --> End
|
||||||
|
|
||||||
|
style Start fill:#e1f5ff
|
||||||
|
style End fill:#e8f5e9
|
||||||
|
style Step1 fill:#fff3e0
|
||||||
|
style Step2 fill:#f3e5f5
|
||||||
|
|
||||||
|
|
@ -0,0 +1,268 @@
|
||||||
|
# 🔧 Mermaid Sorun Giderme - Adım Adım
|
||||||
|
|
||||||
|
## 📋 Kontrol Listesi
|
||||||
|
|
||||||
|
Her adımı tamamladıkça işaretleyin:
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ ADIM 1: Eklenti Kontrolü
|
||||||
|
|
||||||
|
### Yapılacaklar:
|
||||||
|
1. [ ] VS Code'u açtım
|
||||||
|
2. [ ] Cmd+Shift+X ile Extensions panelini açtım
|
||||||
|
3. [ ] "mermaid" aradım
|
||||||
|
4. [ ] Aşağıdaki eklentilerden en az birini kurdum:
|
||||||
|
|
||||||
|
**Önerilen Eklentiler:**
|
||||||
|
|
||||||
|
### Seçenek 1 (En İyi):
|
||||||
|
```
|
||||||
|
İsim: Markdown Preview Mermaid Support
|
||||||
|
Yayıncı: Matt Bierner
|
||||||
|
ID: bierner.markdown-mermaid
|
||||||
|
```
|
||||||
|
|
||||||
|
### Seçenek 2:
|
||||||
|
```
|
||||||
|
İsim: Mermaid Markdown Syntax Highlighting
|
||||||
|
Yayıncı: Brent Pruitt
|
||||||
|
ID: bpruitt-goddard.mermaid-markdown-syntax-highlighting
|
||||||
|
```
|
||||||
|
|
||||||
|
### Seçenek 3:
|
||||||
|
```
|
||||||
|
İsim: Mermaid Chart
|
||||||
|
Yayıncı: Mermaid Chart
|
||||||
|
```
|
||||||
|
|
||||||
|
### Kurulum Sonrası:
|
||||||
|
5. [ ] VS Code'u kapattım
|
||||||
|
6. [ ] VS Code'u yeniden açtım
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ ADIM 2: Test Dosyası Açma
|
||||||
|
|
||||||
|
### Yapılacaklar:
|
||||||
|
1. [ ] VS Code'da File → Open File (Cmd+O)
|
||||||
|
2. [ ] Şu dosyayı açtım:
|
||||||
|
```
|
||||||
|
/Users/oguzozturk/AgumentProje/HostingProjesi/AdminPanel/MERMAID_TEST_BASIT.md
|
||||||
|
```
|
||||||
|
|
||||||
|
### Alternatif:
|
||||||
|
1. [ ] Finder'dan dosyaya sağ tıkladım
|
||||||
|
2. [ ] "Open With" → "Visual Studio Code" seçtim
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ ADIM 3: Preview Açma
|
||||||
|
|
||||||
|
### Yöntem 1: Klavye Kısayolu
|
||||||
|
```
|
||||||
|
1. [ ] Cmd tuşuna bastım
|
||||||
|
2. [ ] K tuşuna bastım
|
||||||
|
3. [ ] İkisini de bıraktım
|
||||||
|
4. [ ] V tuşuna bastım
|
||||||
|
```
|
||||||
|
|
||||||
|
### Yöntem 2: Komut Paleti
|
||||||
|
```
|
||||||
|
1. [ ] Cmd+Shift+P bastım
|
||||||
|
2. [ ] "preview" yazdım
|
||||||
|
3. [ ] "Markdown: Open Preview to the Side" seçtim
|
||||||
|
```
|
||||||
|
|
||||||
|
### Yöntem 3: Sağ Tık
|
||||||
|
```
|
||||||
|
1. [ ] Dosya içinde sağ tıkladım
|
||||||
|
2. [ ] "Open Preview to the Side" seçtim
|
||||||
|
```
|
||||||
|
|
||||||
|
### Yöntem 4: Üst Menü İkonu
|
||||||
|
```
|
||||||
|
1. [ ] Sağ üst köşede preview ikonunu buldum
|
||||||
|
2. [ ] İkona tıkladım
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ ADIM 4: Sonuç Kontrolü
|
||||||
|
|
||||||
|
### Ekran Görünümü:
|
||||||
|
```
|
||||||
|
┌─────────────────┬─────────────────┐
|
||||||
|
│ Sol Panel │ Sağ Panel │
|
||||||
|
│ (Kod) │ (Preview) │
|
||||||
|
└─────────────────┴─────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Kontrol:
|
||||||
|
1. [ ] Ekran ikiye bölündü
|
||||||
|
2. [ ] Sol panelde kod var
|
||||||
|
3. [ ] Sağ panelde preview var
|
||||||
|
|
||||||
|
### Sağ Panelde Ne Görüyorum?
|
||||||
|
|
||||||
|
**Seçenek A: Diyagramlar Görünüyor ✅**
|
||||||
|
```
|
||||||
|
- [ ] Kutular var
|
||||||
|
- [ ] Oklar var
|
||||||
|
- [ ] Renkler var
|
||||||
|
- [ ] Her şey mükemmel!
|
||||||
|
|
||||||
|
→ BAŞARILI! Artık kullanabilirsiniz!
|
||||||
|
```
|
||||||
|
|
||||||
|
**Seçenek B: Sadece Kod Görünüyor ❌**
|
||||||
|
```
|
||||||
|
- [ ] ```mermaid yazısı görünüyor
|
||||||
|
- [ ] Kod blokları var
|
||||||
|
- [ ] Ama diyagram yok
|
||||||
|
|
||||||
|
→ Eklenti çalışmıyor, ADIM 5'e geçin
|
||||||
|
```
|
||||||
|
|
||||||
|
**Seçenek C: Hiçbir Şey Görünmüyor ❌**
|
||||||
|
```
|
||||||
|
- [ ] Sağ panel boş
|
||||||
|
- [ ] Veya hata mesajı var
|
||||||
|
|
||||||
|
→ Preview açılmadı, ADIM 3'ü tekrar deneyin
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ ADIM 5: Eklenti Sorun Giderme
|
||||||
|
|
||||||
|
### Eğer diyagram görünmüyorsa:
|
||||||
|
|
||||||
|
#### Çözüm 1: Farklı Eklenti Deneyin
|
||||||
|
```
|
||||||
|
1. [ ] Extensions panelini açtım (Cmd+Shift+X)
|
||||||
|
2. [ ] Mevcut Mermaid eklentisini kaldırdım (Uninstall)
|
||||||
|
3. [ ] "Markdown Preview Mermaid Support" kurdum
|
||||||
|
4. [ ] VS Code'u yeniden başlattım
|
||||||
|
5. [ ] Tekrar test ettim
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Çözüm 2: VS Code Ayarlarını Kontrol Edin
|
||||||
|
```
|
||||||
|
1. [ ] Cmd+, (Settings) açtım
|
||||||
|
2. [ ] "mermaid" aradım
|
||||||
|
3. [ ] "Markdown › Preview: Mermaid" ayarını buldum
|
||||||
|
4. [ ] Enabled olduğundan emin oldum
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Çözüm 3: Workspace Ayarları
|
||||||
|
```
|
||||||
|
1. [ ] .vscode klasörü var mı kontrol ettim
|
||||||
|
2. [ ] settings.json dosyası var mı baktım
|
||||||
|
3. [ ] Mermaid ile ilgili ayar var mı kontrol ettim
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ ADIM 6: Online Test (Her Zaman Çalışır)
|
||||||
|
|
||||||
|
### Tarayıcıda Test:
|
||||||
|
1. [ ] https://mermaid.live/ sitesini açtım
|
||||||
|
2. [ ] ONLINE_TEST_KODU.txt dosyasını açtım
|
||||||
|
3. [ ] İçeriği kopyaladım
|
||||||
|
4. [ ] Mermaid Live Editor'e yapıştırdım
|
||||||
|
5. [ ] Diyagramı gördüm
|
||||||
|
|
||||||
|
**Eğer online'da görüyorsanız:**
|
||||||
|
- ✅ Mermaid kodu doğru
|
||||||
|
- ❌ VS Code eklentisi sorunlu
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Hangi Durumdasınız?
|
||||||
|
|
||||||
|
### Durum 1: VS Code'da Çalışıyor ✅
|
||||||
|
```
|
||||||
|
→ Tebrikler! Artık kullanabilirsiniz
|
||||||
|
→ README_WORKFLOW.md dosyasını açın
|
||||||
|
→ Tüm proje diyagramlarını görün
|
||||||
|
```
|
||||||
|
|
||||||
|
### Durum 2: Sadece Online'da Çalışıyor ⚠️
|
||||||
|
```
|
||||||
|
→ VS Code eklentisi sorunlu
|
||||||
|
→ Farklı eklenti deneyin
|
||||||
|
→ Veya online editor kullanın
|
||||||
|
```
|
||||||
|
|
||||||
|
### Durum 3: Hiçbir Yerde Çalışmıyor ❌
|
||||||
|
```
|
||||||
|
→ Mermaid kodu hatalı olabilir
|
||||||
|
→ Syntax kontrolü yapın
|
||||||
|
→ Basit örneklerle başlayın
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📞 Bana Bildirin
|
||||||
|
|
||||||
|
Lütfen bana şunları söyleyin:
|
||||||
|
|
||||||
|
1. **Hangi adıma kadar gelebildiniz?**
|
||||||
|
- Adım 1, 2, 3, 4, 5, 6?
|
||||||
|
|
||||||
|
2. **Hangi eklentiyi kurdunuz?**
|
||||||
|
- İsmi nedir?
|
||||||
|
|
||||||
|
3. **Preview açıldı mı?**
|
||||||
|
- Evet / Hayır
|
||||||
|
|
||||||
|
4. **Sağ panelde ne görüyorsunuz?**
|
||||||
|
- Diyagramlar / Kod / Hiçbir şey
|
||||||
|
|
||||||
|
5. **Online editor'de çalışıyor mu?**
|
||||||
|
- Evet / Hayır
|
||||||
|
|
||||||
|
Bu bilgilerle size daha iyi yardımcı olabilirim! 🚀
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 Hızlı Çözümler
|
||||||
|
|
||||||
|
### Çözüm A: En Basit Yöntem
|
||||||
|
```
|
||||||
|
1. https://mermaid.live/ kullanın
|
||||||
|
2. Diyagramları orada oluşturun
|
||||||
|
3. PNG olarak indirin
|
||||||
|
4. Dokümantasyona ekleyin
|
||||||
|
```
|
||||||
|
|
||||||
|
### Çözüm B: Farklı Editor
|
||||||
|
```
|
||||||
|
1. Typora editörünü deneyin (ücretli)
|
||||||
|
2. Obsidian kullanın (ücretsiz)
|
||||||
|
3. Her ikisi de Mermaid destekler
|
||||||
|
```
|
||||||
|
|
||||||
|
### Çözüm C: Browser Extension
|
||||||
|
```
|
||||||
|
1. Chrome/Firefox için Mermaid extension
|
||||||
|
2. Markdown dosyalarını tarayıcıda açın
|
||||||
|
3. Otomatik render edilir
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Başarı Kriterleri
|
||||||
|
|
||||||
|
Aşağıdakileri yapabiliyorsanız başarılısınız:
|
||||||
|
|
||||||
|
- [ ] VS Code'da .md dosyası açabiliyorum
|
||||||
|
- [ ] Preview açabiliyorum
|
||||||
|
- [ ] Mermaid diyagramlarını görebiliyorum
|
||||||
|
- [ ] Renkli kutular ve oklar görünüyor
|
||||||
|
- [ ] Kodu değiştirince preview güncelleniyor
|
||||||
|
|
||||||
|
**Hepsini yapabiliyorsanız: BAŞARILI! 🎉**
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue