Mermaid Diyagramları için Tam Rehber

Basit metin tabanlı sözdizimiyle profesyonel diyagramlar oluşturmayı öğrenin

Reklam

Mermaid nedir?

Mermaid, diyagramları dinamik olarak oluşturmak ve değiştirmek için Markdown esinli metin tanımlarını kullanan JavaScript tabanlı bir diyagram ve grafik aracıdır. Basit metin açıklamalarından diyagramlar üretmenizi sağlayan açık kaynaklı bir projedir.

Karmaşık çizim araçları yerine, diyagramınızı tanımlayan koda benzer bir sözdizimi yazarsınız ve Mermaid bunu görsel bir diyagram olarak render eder. Bu yaklaşım diyagramları sürüm kontrolüne uygun, güncellenmesi kolay ve dokümantasyon için ideal hale getirir.

Mermaid, dokümantasyon platformları, wikiler ve Markdown dosyalarıyla sorunsuz entegre olur ve geliştiriciler ile teknik yazarların favori araçlarından biridir.

Neden Mermaid kullanmalı?

Sürüm kontrolü: Diyagramlar metin dosyalarıdır, bu yüzden kodunuzla birlikte Git’te izlenebilir
Hızlı güncellemeler: Tüm diyagramları yeniden çizmek yerine birkaç satır metni değiştirin
Tutarlılık: Mermaid düzeni ve stili otomatik olarak yönetir, tutarlı diyagramlar sağlar
Tasarım araçları gerekmez: Visio, Lucidchart veya diğer pahalı araçlara ihtiyaç yok
Kod olarak dokümantasyon: Diyagramları dokümantasyonunuzla aynı depoda tutun
Çapraz platform: Tarayıcılarda ve Node.js’te çalışır, birçok platformla entegre olur
Ücretsiz ve açık kaynak: Lisans maliyeti yok, aktif topluluk
Birden çok diyagram türü: Akış şemaları, sekans diyagramları, sınıf diyagramları ve daha fazlasını destekler

Reklam

Desteklenen diyagram türleri

Mermaid, farklı dokümantasyon ihtiyaçlarını karşılamak için çok çeşitli diyagram türlerini destekler:

Akış şeması

Düğümler ve kenarlar ile iş akışlarını, süreçleri ve karar ağaçlarını görselleştirin.

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[Alternative]
    C --> E[End]
    D --> E

Görüntüleyicide aç →

Kullanım senaryosu: Süreç akışları, algoritmalar, karar mantığı

Sekans diyagramı

Zaman içinde farklı aktörler veya sistemler arasındaki etkileşimleri gösterir.

sequenceDiagram
    participant User
    participant API
    participant DB
    User->>API: Request data
    API->>DB: Query
    DB-->>API: Results
    API-->>User: Response

Görüntüleyicide aç →

Kullanım senaryosu: API etkileşimleri, sistem iletişimi, kullanıcı akışları

Sınıf diyagramı

Sınıflar, öznitelikler ve ilişkilerle nesne yönelimli sistemleri modelleyin.

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

Görüntüleyicide aç →

Kullanım senaryosu: Yazılım mimarisi, OOP tasarımı, veritabanı şemaları

Durum diyagramı

Bir sistem veya süreçteki durumları ve geçişleri gösterir.

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: Start
    Loading --> Success: Complete
    Loading --> Error: Fail
    Success --> [*]
    Error --> Idle: Retry

Görüntüleyicide aç →

Kullanım senaryosu: Durum makineleri, yaşam döngüsü yönetimi, UI durumları

ER diyagramı

Veritabanı yapılarını ve varlıklar arasındaki ilişkileri modelleyin.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        int id
        string name
        string email
    }

Görüntüleyicide aç →

Kullanım senaryosu: Veritabanı tasarımı, veri modelleme, sistem mimarisi

Gantt diyagramı

Proje zaman çizelgelerini ve planlarını planlayın ve görselleştirin.

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Design :a1, 2024-01-01, 30d
    Development :a2, after a1, 45d

Görüntüleyicide aç →

Kullanım senaryosu: Proje planlama, sprint zaman çizelgeleri, yol haritaları

Pasta grafiği

Oransal verileri ve yüzdeleri görsel olarak gösterir.

pie title Distribution
    "Category A" : 42
    "Category B" : 30
    "Category C" : 28

Görüntüleyicide aç →

Kullanım senaryosu: Anket sonuçları, pazar payı, kaynak tahsisi

Git grafiği

Git dallanma stratejilerini ve commit geçmişini görselleştirin.

gitGraph
    commit
    branch develop
    checkout develop
    commit
    checkout main
    merge develop

Görüntüleyicide aç →

Kullanım senaryosu: Git iş akışı dokümantasyonu, dallanma stratejileri

Reklam

Mermaid ile Başlarken

Diyagram türünüzü seçin

Önce neyi göstermek istediğinizi en iyi temsil eden diyagram türüne karar verin. Her diyagram türü 'flowchart', 'sequenceDiagram' veya 'classDiagram' gibi belirli bir anahtar kelimeyle başlar.

Metin sözdizimini yazın

Diyagramınızı tanımlamak için Mermaid'in basit sözdizimini kullanın. Sözdizimi sezgiseldir ve neredeyse doğal dil gibi okunur. Örneğin, 'A --> B' A'dan B'ye bir ok oluşturur.

Diyagramınızı önizleyin

Diyagramınızı gerçek zamanlı görmek için çevrimiçi görüntüleyicimizi veya Mermaid uyumlu bir aracı kullanın. İstediğiniz gibi ayarlayın.

Dışa aktarın ve paylaşın

Diyagramınızı sunumlar için SVG veya PNG olarak dışa aktarın ya da ekibinizle bir URL paylaşın. Mermaid'i Markdown dosyalarına da doğrudan gömebilirsiniz.

En iyi uygulamalar

Diyagramları tek bir kavram veya iş akışı üzerinde odaklayın
Gerçek iş mantığını açıklayan anlamlı etiketler kullanın
Karmaşık diyagramları daha küçük, birbirine bağlı diyagramlara bölün
Karmaşık bölümleri açıklamak için %% ile yorum ekleyin
Diyagramlarınızda tutarlı adlandırma kuralları kullanın
Diyagramlarınızı sonlandırmadan önce hedef ortamda test edin
Gerektiğinde düzeni kontrol etmek için yön ipuçları (TD, LR) ekleyin
Akış şemalarında ilgili düğümleri gruplamak için subgraph kullanın
Okunabilirliği korumak için stil seçeneklerini ölçülü kullanın
Diyagram kaynak dosyalarını kodunuzla birlikte sürümleyin

Yaygın kullanım senaryoları

Yazılım dokümantasyonu

Sistem mimarisini, API akışlarını ve bileşen etkileşimlerini kodunuzla birlikte belgeleyin.

Proje planlama

Sprint planlaması, proje zaman çizelgeleri ve kaynak tahsisi için Gantt diyagramları oluşturun.

Teknik öneriler

Önerilen çözümleri, sistem tasarımlarını ve mimari kararları görselleştirin.

Kullanıcı yolculukları

Kullanıcı akışlarını, müşteri deneyimlerini ve etkileşim kalıplarını haritalayın.

Veritabanı tasarımı

Varlık ilişkilerini, şema yapılarını ve veri bağımlılıklarını modelleyin.

Süreç dokümantasyonu

İş süreçlerini, iş akışlarını ve standart operasyon prosedürlerini belgeleyin.

Eğitim materyalleri

Eğitimler ve teknik kurslar için net, sürüm kontrollü diyagramlar oluşturun.

API dokümantasyonu

İstek/yanıt akışlarını, kimlik doğrulama dizilerini ve uç nokta etkileşimlerini gösterin.

Ek kaynaklar

Sık Sorulan Sorular

Mermaid Viewer kullanımı ve diyagram oluşturma hakkında sık sorulan sorular

Bu Mermaid editörü gerçekten ücretsiz mi?

Evet, tamamen ücretsiz. Sınırsız diyagram oluşturabilir, SVG/PNG olarak dışa aktarabilir, URL ile paylaşabilir ve tüm özellikleri kayıt veya ödeme olmadan kullanabilirsiniz. Araç, rahatsız etmeyen reklamlarla desteklenir.

Bir şey yüklemem gerekiyor mu?

Hayır, hiçbir şey yüklemeniz gerekmez. Bu araç tamamen tarayıcıda çalışır. Siteyi açın ve masaüstü, tablet veya mobilde hemen diyagram oluşturmaya başlayın.

Diyagramlarımı nasıl kaydederim?

Çalışmanızı birkaç şekilde kaydedebilirsiniz: 1) SVG veya PNG olarak dışa aktarın, 2) URL ile paylaşın (diyagram kodu URL’de kodlanır), 3) Mermaid metin kodunu kendi dosyalarınıza kopyalayın, 4) .mmd veya .mermaid dosyaları yükleyin/indirin.

Diyagramları dokümantasyonda kullanabilir miyim?

Kesinlikle. Diyagramlarınızı SVG (ölçeklenebilir) veya PNG olarak dışa aktarıp dokümantasyon, sunum veya web sitelerinde kullanabilirsiniz. Mermaid kodunu GitHub, GitLab veya Notion gibi platformlara da gömebilirsiniz.

SVG ile PNG arasındaki fark nedir?

SVG vektör tabanlıdır, her boyutta kaliteyi korur ve web/dokümantasyon için idealdir. PNG raster formattır, hızlı paylaşım için uygundur ancak yeniden boyutlandırmada kalite kaybeder.

Diyagramım neden render olmuyor?

Mermaid kodunuzda sözdizimi hatalarını kontrol edin. Sık sorunlar: kapanmamış tırnaklar, eksik iki nokta/ noktalı virgül, yanlış düğüm kimlikleri veya desteklenmeyen sözdizimi. Sorunu bulmak için diyagramı sadeleştirin.

Başkalarıyla birlikte çalışabilir miyim?

Gerçek zamanlı işbirliği yerleşik değildir, ancak URL ile kolayca paylaşabilirsiniz. Diğerleri açıp düzenleyebilir ve kendi sürümünü geri paylaşabilir. Mermaid metin tabanlı olduğu için Git ile de çok iyi çalışır.

Çevrimdışı da çalışır mı?

İlk yükleme internet bağlantısı gerektirir. Yüklendikten sonra temel düzenleme özellikleri çoğunlukla çevrimdışı çalışır. Dışa aktarma gibi bazı özellikler yine de bağlantı isteyebilir.

Mermaid söz dizimini nasıl öğrenebilirim?

Tüm diyagram türlerine örnekler içeren kapsamlı Mermaid kılavuzumuzla başlayın. Hızlı başlangıç için şablonları kullanın ve ardından mermaid.js.org’daki resmi dokümantasyona bakın.

Görünümü özelleştirebilir miyim?

Evet. Diyagramlar site temasını izler: üst çubuktaki Tema düğmesiyle açık ve koyu arasında geçiş yapın, diyagram eşleşen Mermaid temasıyla yeniden çizilir. Gelişmiş özelleştirme için %%{init:...}%% yönergesiyle renk, yazı tipi ve diğer görsel özellikleri tanımlayabilirsiniz.

Hangi diyagram türleri destekleniyor?

Bu editör başlıca Mermaid diyagram türlerini destekler: flowchart, sequence, class, state, ER, Gantt, pie chart, Git graph, user journey ve daha fazlası.

Diyagram verilerim gizli mi?

Diyagram kodunuz sunucularımıza gönderilmez. Tüm oluşturma işlemi tarayıcıda yapılır. URL ile paylaşırken kod URL’nin içinde kodlanır; içeriğinizi saklamaz veya takip etmeyiz.

Neden metin tabanlı diyagram kullanmalıyım?

Metin tabanlı diyagramlar önemli avantajlar sunar: sürüm kontrolü (Git için ideal), hızlı güncelleme, tutarlı stil, aranabilirlik, hafiflik ve programatik üretim. Pull request incelemelerinde de daha kolaydır.

Mermaid’i web siteme gömebilir miyim?

Evet. Web sitenize Mermaid JavaScript kütüphanesini ekleyip Mermaid kod blokları kullanabilirsiniz. GitHub, GitLab, Notion ve Obsidian gibi birçok platform Mermaid’i zaten yerel olarak destekler.

Önerilen maksimum diyagram boyutu nedir?

Kesin bir sınır yoktur; ancak çok büyük diyagramlar (yaklaşık 100+ düğüm) cihaza bağlı olarak yavaş render edebilir. Karmaşık sistemlerde birden fazla küçük ve odaklı diyagram kullanmak daha iyidir.

İlk diyagramınızı oluşturmaya hazır mısınız?

Ücretsiz çevrimiçi Mermaid görüntüleyicimizi deneyin ve dakikalar içinde profesyonel diyagramlar oluşturmaya başlayın.

Mermaid Viewer'ı aç