hostadmin
/
hosting-platform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up: Remove test files and update README with workflow documentation links

This commit is contained in:
oguz ozturk 2026-01-12 13:58:44 +03:00
parent 8fa93c05e1
commit 2a7dd9a348
5 changed files with 12 additions and 925 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
BASLA_BURADAN.md
View File

@ -1,222 +0,0 @@
# 🎯 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! 🎨**

263
MERMAID_KULLANIM_KILAVUZU.md
View File

@ -1,263 +0,0 @@
# 🎨 Mermaid Diyagramları Görüntüleme Kılavuzu
## 📋 İçindekiler
1. [VS Code ile Görüntüleme](#vs-code-ile-görüntüleme)
2. [Online Editor ile Görüntüleme](#online-editor-ile-görüntüleme)
3. [Diyagramları Düzenleme](#diyagramları-düzenleme)
4. [Örnek Diyagramlar](#örnek-diyagramlar)
---
## 🖥️ VS Code ile Görüntüleme
### Adım 1: Eklenti Kurulumu
```
1. VS Code'u açın
2. Extensions paneline gidin (Cmd+Shift+X veya Ctrl+Shift+X)
3. "Markdown Preview Mermaid Support" arayın
4. Install butonuna tıklayın
5. VS Code'u yeniden başlatın (gerekirse)
```
### Adım 2: Preview Açma
```
1. Herhangi bir .md dosyasını açın (örn: README_WORKFLOW.md)
2. Aşağıdaki yöntemlerden birini kullanın:
Yöntem A - Kısayol Tuşu:
- Mac: Cmd+K ardından V
- Windows/Linux: Ctrl+K ardından V
Yöntem B - Sağ Tık Menüsü:
- Dosya üzerinde sağ tık
- "Open Preview to the Side" seçin
Yöntem C - Komut Paleti:
- Cmd+Shift+P (Mac) veya Ctrl+Shift+P (Windows)
- "Markdown: Open Preview to the Side" yazın
- Enter'a basın
```
### Adım 3: Diyagramları Görüntüleme
```
Preview panelinde:
- Mermaid kod blokları otomatik olarak diyagrama dönüşür
- Scroll yaparak tüm diyagramları görebilirsiniz
- Zoom yapabilirsiniz (Cmd/Ctrl + Mouse Wheel)
```
---
## 🌐 Online Editor ile Görüntüleme
### Mermaid Live Editor (Önerilen)
**Adres**: https://mermaid.live/
**Kullanım:**
```
1. https://mermaid.live/ adresine gidin
2. Sol panelde örnek kod göreceksiniz
3. Kendi kodunuzu yapıştırın veya düzenleyin
4. Sağ panelde canlı önizleme görünür
5. Export butonuyla PNG, SVG veya PDF olarak indirebilirsiniz
```
**Örnek Kullanım:**
1. Aşağıdaki kodu kopyalayın:
```mermaid
graph LR
A[Başlangıç] --> B{Karar}
B -->|Evet| C[İşlem 1]
B -->|Hayır| D[İşlem 2]
C --> E[Son]
D --> E
```
2. https://mermaid.live/ sitesine gidin
3. Sol panele yapıştırın
4. Sağda diyagramı görün!
---
## ✏️ Diyagramları Düzenleme
### Mermaid Syntax Temelleri
#### 1. Flowchart (Akış Şeması)
```mermaid
graph TB
A[Dikdörtgen] --> B(Yuvarlak Köşe)
B --> C{Karar}
C -->|Evet| D[Sonuç 1]
C -->|Hayır| E[Sonuç 2]
```
#### 2. Sequence Diagram (Sıralı Diyagram)
```mermaid
sequenceDiagram
Kullanıcı->>Frontend: Giriş Yap
Frontend->>Backend: POST /login
Backend->>Database: Kullanıcı Kontrol
Database-->>Backend: Kullanıcı Bilgisi
Backend-->>Frontend: JWT Token
Frontend-->>Kullanıcı: Dashboard
```
#### 3. Entity Relationship Diagram (ER Diyagram)
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER {
int id PK
string name
string email
}
ORDER {
int id PK
int customer_id FK
date order_date
}
```
---
## 🎯 Projenizdeki Diyagramları Görüntüleme
### Müşteri Panel İş Akışı Diyagramı
**Dosya**: `README_WORKFLOW.md` veya `WORKFLOW_DIAGRAMS.md`
**VS Code'da Görüntüleme:**
```bash
# Terminal'de:
cd /Users/oguzozturk/AgumentProje/HostingProjesi/MusteriPanel
code README_WORKFLOW.md
# VS Code'da:
# Cmd+K V ile preview açın
```
**Online'da Görüntüleme:**
1. `WORKFLOW_DOCUMENTATION.md` dosyasını açın
2. Mermaid kod bloğunu kopyalayın (```mermaid ile başlayan kısım)
3. https://mermaid.live/ sitesine yapıştırın
---
## 📝 Örnek: Domain Setup Diyagramı
Aşağıdaki kodu kopyalayıp test edebilirsiniz:
```mermaid
graph TB
Start([Domain Ekle])
Validate[Domain Doğrula]
SelectCF[CF Hesap Seç]
CheckNS[NS Kontrolü]
Preview[DNS Önizleme]
Apply[DNS Uygula]
SSL[SSL Yapılandır]
Done([Tamamlandı])
Start --> Validate
Validate --> SelectCF
SelectCF --> CheckNS
CheckNS --> Preview
Preview --> Apply
Apply --> SSL
SSL --> Done
style Start fill:#e1f5ff
style Done fill:#e8f5e9
style SSL fill:#fff3e0
```
---
## 🎨 Renk ve Stil Özelleştirme
### Renk Ekleme
```mermaid
graph LR
A[Normal]
B[Mavi]
C[Yeşil]
D[Sarı]
style B fill:#e1f5ff
style C fill:#e8f5e9
style D fill:#fff3e0
```
### Proje Renk Paleti
```
Müşteri Panel: #e8f5e9 (Açık Yeşil)
Admin Panel: #ffebee (Açık Kırmızı)
Auth: #e1f5ff (Açık Mavi)
Database: #f3e5f5 (Açık Mor)
External: #fff3e0 (Açık Turuncu)
```
---
## 🔧 Sorun Giderme
### Diyagram Görünmüyor?
**Çözüm 1: Eklentiyi Kontrol Edin**
```
1. Extensions paneline gidin
2. "Markdown Preview Mermaid Support" arayın
3. Enabled olduğundan emin olun
4. VS Code'u yeniden başlatın
```
**Çözüm 2: Syntax Hatası**
```
- Mermaid kod bloğu ```mermaid ile başlamalı
- ``` ile bitmeli
- Syntax hatası var mı kontrol edin
```
**Çözüm 3: Online Editor Kullanın**
```
- https://mermaid.live/ her zaman çalışır
- Syntax hatalarını gösterir
- Export seçenekleri sunar
```
---
## 📚 Faydalı Kaynaklar
- **Mermaid Dokümantasyonu**: https://mermaid.js.org/
- **Live Editor**: https://mermaid.live/
- **Syntax Referansı**: https://mermaid.js.org/intro/syntax-reference.html
- **Örnekler**: https://mermaid.js.org/ecosystem/integrations.html
---
## ✅ Hızlı Test
Bu dosyayı VS Code'da açın ve Cmd+K V yapın. Aşağıdaki diyagramı görmelisiniz:
```mermaid
graph TB
Test[Test Diyagramı]
Success[Başarılı! 🎉]
Test --> Success
style Test fill:#e1f5ff
style Success fill:#e8f5e9
```
Eğer yukarıdaki diyagramı görüyorsanız, her şey çalışıyor demektir! 🎉
---
**İpucu**: Tüm proje diyagramlarını görmek için `README_WORKFLOW.md` dosyasını açın ve preview yapın!

12
README.md
View File

@ -42,6 +42,18 @@ Modern, modular hosting platform with container infrastructure and automated DNS
**Frontend**: React 18, Vite, TailwindCSS, React Router
**DevOps**: Nginx, Supervisor, Let's Encrypt, Gitea
## 📚 Dokümantasyon
### İş Akışı ve Sistem Şemaları
- 📊 **[README_WORKFLOW.md](./README_WORKFLOW.md)** - Hızlı başlangıç ve genel bakış
- 📖 **[WORKFLOW_DOCUMENTATION.md](./WORKFLOW_DOCUMENTATION.md)** - Detaylı teknik dokümantasyon ve API referansı
- 🎨 **[WORKFLOW_DIAGRAMS.md](./WORKFLOW_DIAGRAMS.md)** - Görsel diyagramlar ve sistem şemaları
### Diğer Dokümantasyon
- 🏗️ **[ARCHITECTURE.md](./ARCHITECTURE.md)** - Sistem mimarisi
- 🚀 **[DEPLOYMENT.md](./DEPLOYMENT.md)** - Deployment kılavuzu
- 🔗 **[WEBHOOK_SETUP.md](./WEBHOOK_SETUP.md)** - Webhook yapılandırması
## 📋 Next Steps (Phase 2)
- Customer Dashboard - DNS Module integration

109
TEST_MERMAID.md
View File

@ -1,109 +0,0 @@
# 🧪 Mermaid Test Dosyası
Bu dosyayı VS Code'da açın ve **Cmd+K V** (Mac) veya **Ctrl+K V** (Windows) yaparak preview'ı açın.
---
## Test 1: Basit Akış Şeması
```mermaid
graph TB
Start([Başlangıç])
Step1[Adım 1]
Step2[Adım 2]
Decision{Karar?}
Yes[Evet]
No[Hayır]
End([Son])
Start --> Step1
Step1 --> Step2
Step2 --> Decision
Decision -->|Evet| Yes
Decision -->|Hayır| No
Yes --> End
No --> End
style Start fill:#e1f5ff
style End fill:#e8f5e9
style Decision fill:#fff3e0
```
---
## Test 2: Müşteri Panel Basit Akış
```mermaid
graph LR
Login[Giriş Yap]
Dashboard[Dashboard]
Domain[Domain Ekle]
Success[Başarılı]
Login --> Dashboard
Dashboard --> Domain
Domain --> Success
style Login fill:#e1f5ff
style Dashboard fill:#fff3e0
style Domain fill:#f3e5f5
style Success fill:#e8f5e9
```
---
## Test 3: Sequence Diagram
```mermaid
sequenceDiagram
participant U as Kullanıcı
participant F as Frontend
participant A as API
participant D as Database
U->>F: Giriş Yap
F->>A: POST /login
A->>D: Kullanıcı Kontrol
D-->>A: Kullanıcı Bilgisi
A-->>F: JWT Token
F-->>U: Dashboard Göster
```
---
## Test 4: ER Diagram
```mermaid
erDiagram
USERS ||--o{ DOMAINS : owns
USERS {
int id PK
string email
string password_hash
}
DOMAINS {
int id PK
int user_id FK
string domain_name
string status
}
```
---
## ✅ Başarı Kontrolü
Eğer yukarıdaki 4 diyagramı da görüyorsanız, Mermaid kurulumunuz başarılı! 🎉
### Sonraki Adımlar:
1. ✅ `README_WORKFLOW.md` dosyasını açın
2. ✅ Cmd+K V ile preview açın
3. ✅ Tüm proje diyagramlarını görün
4. ✅ `WORKFLOW_DOCUMENTATION.md` dosyasını inceleyin
### Online Görüntüleme:
Tarayıcınızda https://mermaid.live/ açıldı. Yukarıdaki herhangi bir diyagram kodunu kopyalayıp yapıştırabilirsiniz!

331
VSCODE_MERMAID_KILAVUZ.md
View File

@ -1,331 +0,0 @@
# 🎨 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! 🚀**