Softonic

Mermaid Diyagram Önizleyici

Mermaid, metin tabanlı bir diyagram dilidir: diyagramın nasıl görünmesi gerektiğini düz metinle yazarsınız, o da sonucu SVG olarak çizer. Akış şemaları, sıralama diyagramları, sınıf diyagramları, durum makineleri, ER diyagramları, Gantt şemaları, pasta grafikleri, zihin haritaları ve Git dal grafiklerinin tamamı desteklenir. Bu önizleyici, resmi Mermaid ayrıştırıcısını doğrudan tarayıcınızda çalıştırır ve siz yazdıkça SVG çıktısını günceller; böylece yarım kalmış bir diyagramı README dosyanıza commit etmeden istediğiniz sonuca ulaşana kadar üzerinde çalışabilirsiniz.

Bir Mermaid diyagramı nasıl önizlenir?

  1. 1

    Diyagram türünü seçin

    Akış şeması, sıralama, sınıf, durum, ER, Gantt, pasta, Git grafiği veya zihin haritası.

  2. 2

    Mermaid sözdizimini yazın

    Sol paneli kullanın. Ayrıştırıcı, her tuşa bastığınızda önizlemeyi günceller.

  3. 3

    SVG çıktısını izleyin

    Sağ panelde görünür. Hatalar, soruna yol açan satırla birlikte anında gösterilir.

  4. 4

    Dışa aktarın

    SVG'yi kopyalayın, PNG olarak indirin ya da Mermaid kaynak kodunu kopyalayıp GitHub veya MkDocs'a yapıştırın.

Dokuz diyagram türüne bir bakış

Tür Başlangıç sözcüğü Ne için kullanılır
Akış şeması flowchart TD Karar ağaçları, süreç akışları
Sıralama sequenceDiagram API çağrıları, zaman içindeki sistem etkileşimleri
Sınıf classDiagram Nesne yönelimli mimari, alan modelleri
Durum stateDiagram-v2 Sonlu durum makineleri
ER erDiagram Veritabanı şemaları
Gantt gantt Proje zaman çizelgeleri
Pasta pie Bütünün yüzdelik dilimleri
Git grafiği gitGraph Dal topolojisinin görselleştirilmesi
Zihin haritası mindmap Hiyerarşik beyin fırtınası

Akış şemasına hızlı başlangıç

flowchart LR
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great]
    B -- No --> D[Debug]
    D --> B

Yön anahtar sözcükleri: TD yukarıdan aşağıya, LR soldan sağa, RL sağdan sola, BT aşağıdan yukarıya.

Düğüm şekilleri: [rect] dikdörtgen, (rounded) yuvarlatılmış köşeli, {diamond} baklava dilimi, ((circle)) daire, >flag] bayrak, [[subroutine]] alt yordam.

Sıralama diyagramına hızlı başlangıç

sequenceDiagram
    participant U as User
    participant API
    participant DB
    U->>API: POST /login
    API->>DB: SELECT user
    DB-->>API: record
    API-->>U: 200 + token

->> düz bir oktur (istek), -->> ise kesik çizgili oktur (yanıt). participant X as Label ise kısa bir ada, diyagramda görünecek etiketi atar.

Sık yapılan hatalar

  • Başlangıç sözcüğünden sonra satır sonu bırakmamak. İlk satırda yalnızca flowchart TD gibi bir başlangıç sözcüğü tek başına yer almalıdır.
  • Düğüm etiketlerinde ayrılmış karakterler kullanmak. Etiket içindeki parantezler, köşeli parantezler ve tırnak işaretleri ya kaçış karakteriyle yazılmalı ya da çift tırnak içine alınmalıdır: A["Node (v2)"].
  • Sınıf diyagramı gösterimi. +public, -private, #protected, ~package önekleri; <<interface>> stereotipi; <|-- kalıtım, *-- bileşim, o-- toplama.
  • Gantt tarih biçimi. Varsayılan biçim YYYY-MM-DD şeklindedir; farklı bir biçim kullanıyorsanız en üste dateFormat YYYY-MM-DD satırını ekleyin.

Mermaid gerçekte nerelerde çizilir?

  • GitHub, issue ve PR sayfalarında ve README.md dosyasında mermaid etiketli kod bloklarını çizer.
  • GitLab da aynı şekilde: 2022 yılından bu yana yerel destek sunuyor.
  • MkDocs, pymdown-extensions eklentisiyle birlikte.
  • Docusaurus ve Hugo, eklentiler aracılığıyla.
  • Obsidian, dahili çizicisiyle doğrudan.
  • VS Code, Mermaid önizleme eklentisiyle.

Sık Sorulan Sorular

GitHub çoğu türü destekler: akış şeması, sıralama, sınıf, durum, ER, Gantt ve pasta. Daha yeni eklenen bazı türlerin (journey, mindmap) desteği gecikebilir. README dosyanıza commit etmeden önce taslak bir issue içinde test edin.

Düğümlere CSS sınıfı atamak için classDef ve class ifadelerini kullanın. Mermaid ayrıca en üste yazılan yönerge bloğuyla tema özelleştirmeyi de destekler: %%{init: {"theme": "dark"}}%%.

Evet. Önizleme SVG olarak çizilir; SVG dosyasını doğrudan indirebilir (sınırsız büyütmede bile netliğini korur) ya da 1x, 2x veya 3x çözünürlükte PNG olarak dışa aktarabilirsiniz.

En sık karşılaşılan neden, düğüm etiketindeki ayrılmış bir karakterdir. Parantez, köşeli parantez veya tırnak içeren etiketleri çift tırnak içine alın: A["Node name (v2)"]. Hata mesajı, soruna yol açan satırı gösterir.

Hayır. Mermaid kütüphanesi tamamen tarayıcınızda çalışır ve diyagramı yerel olarak çizer. Hiçbir veri sunucuya gönderilmez.

İlgili Araçlar

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Renk Paleti Jeneratörü

Temel bir HEX renginden monokromatik, analog, tamamlayıcı, triadik veya tetradik paletler oluşturun ve kopyalamaya hazır CSS değişkenleri alın.

JSON Biçimlendirici

JSON metnini 2 veya 4 boşlukla okunabilir hale getirmek, kompakt çıktıya küçültmek ya da sonucu kopyalamadan önce söz dizimini hızlıca kontrol etmek için yapıştırın.

İkiliden Sekizliye Dönüştürücü

Bitleri üçer üçer gruplayarak ikiliyi sekizliye dönüştürün. Unix izinleri, eski sistemler ve kompakt sayısal gösterim için yararlıdır.

HEX Renk Seçici

HEX rengi seçin veya girin; RGB, HSL, yaklaşık CMYK, bağıl parlaklık ve beyaz-siyah kontrast oranlarını görün.