Add Mermaid usage guide and test file
This commit is contained in:
oguz ozturk
parent
b6f7d8cc9b
commit
9d66917626
|
|
@ -0,0 +1,263 @@
|
||||||
|
# 🎨 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!
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
# 🧪 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!
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue