Denizkızı Diyagram Görüntüleyici ve Düzenleyici

Yazarlar
  • Denizkızı Diyagram Görüntüleyici ve Düzenleyici
Seri: UML and Software Architecture
Bölümler: (1/7)

MassiveDiag Playground: Mermaid Diyagramları için Teknik Rehber

MassiveDiag Playground’a Giriş

MassiveDiag Playground, metin tabanlı tanımları gerçek zamanlı olarak profesyonel diyagramlara dönüştüren güçlü bir mermaid canlı editörü barındırır. Bu araç, hem bir mermaid diyagram görüntüleyici hem de düzenleyici olarak çalışır; böylece mermaid kodunuzu yazarken anında diyagramınızı görebilir ve düzenleyebilirsiniz.

İster:

  • Web projeleri için Mermaid’ten SVG’ye dönüştürme,
  • Sunumlar için Mermaid’ten PNG’ye dönüşüm,
  • Dokümantasyon için Mermaid’ten PDF’ye çıktı alma,
  • İş raporları için Mermaid’ten Word’e dışa aktarma

ihtiyacınız olsun, MassiveDiag Playground diyagram oluşturma sürecinizi kolaylaştırır.

Görsel

MassiveDiag Playground’u Şimdi Deneyin →

Mermaid Nedir?

Mermaid, Markdown benzeri metin tanımlarıyla diyagramlar ve grafikler oluşturan JavaScript tabanlı bir araçtır. Kısacası, mermaid kodunu diyagrama dönüştüren bir sistemdir ve teknik bilgi gerektirmeden karmaşık görseller oluşturmanıza olanak tanır.

MassiveDiag Playground Kullanmanın Avantajları:

  • Kod tabanlı yapı sayesinde sürüm kontrolü yapılabilir.
  • Metinden diyagrama dönüşüm Mermaid sözdizimi sayesinde kolaydır, LLM’ler ile otomatik de üretilebilir.
  • Diyagramlarda hızlı ve kolay değişiklik yapabilirsiniz.
  • Canlı görüntüleme özelliğiyle düzenlemeleri anında görebilirsiniz.
  • Canlı SVG düzenleyici, görsel olarak gerçek zamanlı düzenleme imkanı sunar.

Mermaid Kodu ile Başlarken

Temel Akış Diyagramı

graph TD;
    A[Başla] --> B{Karar};
    B -->|Evet| C[Devam Et];
    B -->|Hayır| D[Dur];
Çıktı:

Belgelerinize kolayca entegre edebileceğiniz, indirilebilir ve paylaşılabilir net bir akış diyagramı!

Görsel

Sıralama Diyagramı

sequenceDiagram;
    participant A as Kullanıcı;
    participant B as Sistem;
    A->>B: Veri İsteği;
    B-->>A: Veri Döndür;
    A->>B: İşlem Yap;
    B-->>A: Onay;
Çıktı:

Belgelerde ve sunumlarda süreç akışlarını göstermek için yapılandırılmış bir sıralama diyagramı.

Görsel

Basit Mermaid Zihin Haritası

mindmap
  root((Geliştirme Süreci))
    Tasarım
      Wireframe
      Mockup
    Uygulama
      Ön Yüz
      Arka Yüz
    Test
      Birim Testleri
      Entegrasyon Testleri
    Dağıtım
      Test Ortamı
      Canlı Ortam

Görsel

MassiveDiag Playground Nasıl Kullanılır?

1. Mermaid Kodunuzu Yazın

Kendi kodunuzu yazın ya da ChatGPT, Grok, Claude, Copilot gibi LLM araçlarıyla oluşturun.

graph TD;
    A[Başla] --> B{Karar};
    B -->|Evet| C[Devam Et];
    B -->|Hayır| D[Dur];

2. Kodunuzu MassiveDiag Playground'a Yapıştırın

MassiveDiag Playground sayfasına gidin ve mermaid kodunuzu yapıştırın ya da dosya olarak yükleyin.

Görsel

3. Doğru Diyagram Tipinin Algılandığını Kontrol Edin

MassiveDiag Playground çoğu durumda diyagram türünü otomatik algılar. Aksi halde, manuel olarak Mermaid seçimini yapın.

Görsel

4. Diyagramınızı Oluşturun

"Create Diagram" butonuna tıklayarak kodunuzu diyagrama dönüştürün.

Görsel

5. Mermaid Diyagramınızı Gerçek Zamanlı Düzenleyin

  • Kodu düzenleyin ve "Create Diagram"a tıklayarak anında değişiklikleri görün.
  • Canlı SVG Editörü ile görsel olarak da düzenleme yapabilirsiniz.

6. İstediğiniz Formatla Dışa Aktarın

  • Mermaid’ten SVG’ye – Web için idealdir.
  • Mermaid’ten PNG’ye – Sunumlar ve belgeler için uygundur.
  • Mermaid’ten PDF’ye – Resmî dökümanlar için tercih edilir.
  • Mermaid’ten Word Belgesi’ne – İş dökümanlarında kullanılabilir.
  • Mermaid’ten JSX React Bileşenlerine – Web geliştiricileri için harika!

Görsel

Şimdi Diyagram Oluşturmaya Başla →

Desteklenen Diyagram Türleri

MassiveDiag Playground, aşağıdaki Mermaid diyagramlarını destekler:

  • Akış Diyagramları
  • Sıralama Diyagramları
  • Sınıf Diyagramları
  • Durum Diyagramları
  • Varlık-İlişki Diyagramları
  • Kullanıcı Yolculuğu Haritaları
  • Gantt Çizelgeleri
  • Pasta Grafikler
  • Çeyrek Grafikler
  • Git Grafikler
  • C4 Diyagramları
  • Mermaid Zihin Haritaları
  • Zaman Çizelgeleri
  • Sankey Diyagramları
  • XY Grafikler
  • Blok Diyagramlar

Gelişmiş Mermaid Örnekleri

Stil İçeren Karmaşık Akış Diyagramı

graph TD
    A[Başla] --> B{Servis çalışıyor mu?}
    B -->|Evet| C[İsteği İşle]
    B -->|Hayır| D[Yedek Sistem Aktif]
    C --> E[Cevabı Döndür]
    D --> E
    E --> F[Sonucu Kaydet]
    F --> G[Bitiş]

    classDef green fill:#9f6,stroke:#333,stroke-width:2px;
    classDef red fill:#f88,stroke:#333,stroke-width:2px;
    classDef default fill:#f9f,stroke:#333,stroke-width:1px;

    class A,G green
    class D red

Görsel

Ayrıntılı Sınıf Diyagramı

classDiagram
    class Hayvan {
        +String isim
        +int yaş
        +sesCikar() void
    }
    class Kopek {
        +String cins
        +kuyrukSalla() void
    }
    class Kedi {
        +String renk
        +mirildan() void
    }
    Hayvan <|-- Kopek
    Hayvan <|-- Kedi

Görsel

Pratik Kullanım Senaryoları

Yazılım Mimarisi Dokümantasyonu

graph TB
    subgraph "İstemci Katmanı"
        A[Web Uygulaması] --- B[Mobil Uygulama]
    end

    subgraph "API Geçidi"
        C[Yük Dengeleyici] --- D[Kimlik Doğrulama]
        D --- E[Hız Sınırlama]
    end

    subgraph "Servis Katmanı"
        F[Kullanıcı Servisi] --- G[İçerik Servisi]
        G --- H[Analitik Servisi]
    end

    subgraph "Veri Katmanı"
        I[Ana Veritabanı] --- J[Okuma Kopyaları]
        K[Önbellek] --- L[Nesne Deposu]
    end

    A & B --> C
    E --> F & G & H
    F & G & H --> I & K & L

Görsel

Etkili Mermaid Diyagramları için İpuçları

  • Basit Tutun – Anlaşılır olun.
  • Tutarlı Stil Kullanın – Tasarım birliğini koruyun.
  • Etiketleri Belirgin Yapın – Okunabilirliği artırın.
  • Anlamlı İsimler Kullanın – Diyagramı daha sezgisel hale getirir.
  • Diyagramlarınızı Versiyonlayın – Kod olarak saklayın.

SSS

Mermaid kodu öğrenmesi zor mu?

Hayır. Markdown’a aşinaysanız, Mermaid sözdizimi oldukça sezgiseldir.

MassiveDiag Playground’u kullanmak için hesap gerekiyor mu?

Hayır, canlı Mermaid editörü kayıt olmadan kullanılabilir.

Diyagramlarda iş birliği yapılabilir mi?

Evet. Mermaid kodunu paylaşabilir veya dışa aktarıp başkalarıyla iş birliği yapabilirsiniz.

Mermaid diyagramlarını sunumlara nasıl eklerim?

PowerPoint için:

  1. PNG olarak dışa aktarın.
  2. PowerPoint’te Ekle > Resimler yolunu izleyin.

Google Slaytlar için:

  1. PNG olarak dışa aktarın.
  2. Ekle > Resim > Bilgisayardan Yükle.

Google Dokümanlar için:

  1. PNG olarak dışa aktarın.
  2. Ekle > Resim > Bilgisayardan Yükle.

Profesyonel Diyagramlar Oluşturun →

Sonuç

MassiveDiag Playground, kusursuz bir Mermaid koddan diyagrama geçiş deneyimi sunar. SVG, PNG, PDF veya Word dışa aktarma seçenekleriyle bu canlı editör, tüm diyagram ihtiyaçlarınızı karşılar.

MassiveDiag Playground’u Şimdi Deneyin →

Paylaş