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