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