Clean up: Remove test files and update README with workflow documentation links
This commit is contained in:
oguz ozturk
parent
f48b258897
commit
eb66152ab0
222
BASLA_BURADAN.md
222
BASLA_BURADAN.md
|
|
@ -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! 🎨**
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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!
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
# 🧪 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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
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
|
|
||||||
|
|
||||||
12
README.md
12
README.md
|
|
@ -92,3 +92,15 @@ Tables:
|
||||||
- **Backend Port:** 5001
|
- **Backend Port:** 5001
|
||||||
- **Database:** admin_hosting_db
|
- **Database:** admin_hosting_db
|
||||||
|
|
||||||
|
## 📚 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ı
|
||||||
|
- 🚀 **[DEPLOYMENT.md](./DEPLOYMENT.md)** - Deployment kılavuzu
|
||||||
|
|
||||||
|
## 📝 License
|
||||||
|
|
||||||
|
© 2026 ARGE ICT. All rights reserved.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,268 +0,0 @@
|
||||||
# 🔧 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! 🎉**
|
|
||||||
|
|
||||||
|
|
||||||
109
TEST_MERMAID.md
109
TEST_MERMAID.md
|
|
@ -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!
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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! 🚀**
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue