From 9d66917626e5b7e271b1e205a30e67c38db5552b Mon Sep 17 00:00:00 2001 From: oguz ozturk Date: Mon, 12 Jan 2026 11:55:24 +0300 Subject: [PATCH] Add Mermaid usage guide and test file --- MERMAID_KULLANIM_KILAVUZU.md | 263 +++++++++++++++++++++++++++++++++++ TEST_MERMAID.md | 109 +++++++++++++++ 2 files changed, 372 insertions(+) create mode 100644 MERMAID_KULLANIM_KILAVUZU.md create mode 100644 TEST_MERMAID.md diff --git a/MERMAID_KULLANIM_KILAVUZU.md b/MERMAID_KULLANIM_KILAVUZU.md new file mode 100644 index 0000000..f18a9df --- /dev/null +++ b/MERMAID_KULLANIM_KILAVUZU.md @@ -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! + + diff --git a/TEST_MERMAID.md b/TEST_MERMAID.md new file mode 100644 index 0000000..4cdde96 --- /dev/null +++ b/TEST_MERMAID.md @@ -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! + +