5.6 KiB

Raw Blame History

🎨 Mermaid Diyagramları Görüntüleme Kılavuzu

📋 İçindekiler

VS Code ile Görüntüleme
Online Editor ile Görüntüleme
Diyagramları Düzenleme
Ö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:

Aşağıdaki kodu kopyalayın:

graph LR
    A[Başlangıç] --> B{Karar}
    B -->|Evet| C[İşlem 1]
    B -->|Hayır| D[İşlem 2]
    C --> E[Son]
    D --> E

https://mermaid.live/ sitesine gidin
Sol panele yapıştırın
Sağda diyagramı görün!

✏️ Diyagramları Düzenleme

Mermaid Syntax Temelleri

1. Flowchart (Akış Şeması)

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)

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)

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:

# 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:

WORKFLOW_DOCUMENTATION.md dosyasını açın
Mermaid kod bloğunu kopyalayın (```mermaid ile başlayan kısım)
https://mermaid.live/ sitesine yapıştırın

📝 Örnek: Domain Setup Diyagramı

Aşağıdaki kodu kopyalayıp test edebilirsiniz:

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

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:

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!

5.6 KiB Raw Blame History Unescape Escape