.mmd dosyası nasıl açılır

.mmd dosyası, içinde bir Mermaid diyagramı bulunan sıradan bir metin dosyasıdır. Ne resimdir ne de ikili bir biçim — herhangi bir metin düzenleyiciyle açıp okuyabilirsiniz. Diyagram olarak görmek için aşağıdaki çerçeveye bırakın. Kendi tarayıcınızda çizilir ve hiçbir sunucuya bir şey gitmez.

.mmd dosyanızı buraya bırakın

.mermaid, .md ve .txt de kabul edilir. Dosya tarayıcıda okunur, hiçbir zaman gönderilmez.

.mmd dosyası nedir

Mermaid, diyagramlar için metne dayalı bir sözdizimidir. Diyagramı sözcüklerle anlatırsınız, motor da onu çizer — tıpkı Markdown'ın biçimlendirmeyi anlatması ve motorun sayfayı üretmesi gibi. .mmd dosyası bu metni içerir, başka bir şey içermez: biçem yok, görüntü verisi yok, üstveri yok.

Biçimin var olma nedeni bütünüyle budur. Metin olduğu için diyagram, anlattığı kodun yanında bir Git deposunda durabilir ve bir değişiklik, yer değiştirmiş ikili bir dosya olarak değil okunabilir bir fark olarak görünür. İşte eksiksiz, geçerli bir .mmd dosyası:

dagitim.mmd — dosyanın tamamı, altı satır
flowchart LR
    Commit[main dalına push] --> Build[Testleri çalıştır]
    Build -->|başarılı| Deploy[Üretime dağıt]
    Build -->|hata| Uyari[Commit sahibine haber ver]
    Deploy --> Duman[Duman testi]
    Duman --> Bitti[Sürüm tamamlandı]

.mmd dosyası neyle açılır

Kısacası: çift tıklamak neredeyse hiçbir şeyde .mmd dosyasını açmaz, çünkü uzantı hiçbir uygulamaya bağlı değildir. Gerçekten ihtiyacınız olan şey Mermaid çizebilen bir araçtır. Aşağıda sınadıklarım ve işe yaramadığı yerler var.

Bu siteAçar

Dosyayı anında çizer

Dosyayı yukarıdaki çerçeveye bırakın, diyagramı alın. Yükleme adımı yoktur: dosya tarayıcıda File API ile okunur ve yerel olarak çizilir; bu, dışarı veremeyeceğiniz diyagramlar için de çalışır demektir.

Diyagramı yalnızca görmek değil değiştirmek istiyorsanız, önizlemenin altındaki bağlantıyla editörde açın.

Herhangi bir metin düzenleyiciAçar

Kaynağı gösterir, diyagramı değil

Not Defteri, Notepad++, vim — hangisi olursa. .mmd dosyası UTF-8 metindir, kaynağı hemen görürsünüz. Diyagramı göremezsiniz ve bozuk olan bir şey yoktur — dosyanın içinde gösterilecek bir görüntü yoktur, o kadar.

Gelen bir dosyanın gerçekten Mermaid olup olmadığını anlamanın en hızlı yolu budur: açın ve boş olmayan ilk satırın flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram ya da gantt gibi bir diyagram anahtar sözcüğü olup olmadığına bakın.

GitHubAçmaz

Markdown içindeki ```mermaid bloklarını çizer, .mmd dosyalarını çizmez

GitHub, Mermaid'i çitli kod bloklarının içinde çizer. Belgeler nerede olduğunu tam olarak sayar: issue'lar, Discussions, pull request'ler, wiki ve Markdown dosyaları. Tek başına bir .mmd dosyası bu listede yoktur; depo dosya tarayıcısında açtığınızda kaynak metni görürsünüz.

Yani diyagramın GitHub'da görünmesini istiyorsanız, kendi .mmd dosyasında değil bir .md dosyasındaki ```mermaid bloğunda olmalıdır. Kaynağı .mmd olarak tutup aynı içeriği README'de yinelemek yaygın ve makul bir ikilemedir.

GitLabAçmaz

```mermaid bloklarını çizer, .mmd dosyalarını çizmez, üstelik daha eski bir Mermaid ile

GitHub'daki düzenin aynısı: Mermaid, Markdown'daki çitli bloklarda, issue'larda, merge request'lerde ve wiki'de çizilir, ama hiçbir yerde tek başına bir .mmd dosyasının çizildiği yazmaz.

Bilmeye değer ikinci bir şey daha var, çünkü gerçek karışıklık yaratıyor. GitLab.com, Mermaid'in 10. sürümünü desteklediğini bildiriyor. Bu site 11.12.2 üzerinde çalışıyor. 10'dan sonra eklenen sözdizimi burada çizilir, orada devrilir — «tarayıcıda çalışıyor ama bizim GitLab'da çalışmıyor» durumunun açıklaması genellikle budur. Kendi sunucunuzda tuttuğunuz GitLab'da üçüncü bir tuzak daha var: Cross-Origin-Resource-Policy başlığı same-site ya da same-origin olarak ayarlandığında Mermaid diyagramları sessizce devrilir — hata da yok, diyagram da.

.mmd, .mermaid ve .md

.mmd ile .mermaid aynı şeydir. İkisi de yalnızca Mermaid kaynağı içerir ve birini kabul eden bildiğim bütün araçlar diğerini de kabul eder. .mmd daha kısa ve daha yaygındır; resmî komut satırı aracı onu öntanımlı kullanır. Birini seçip proje içinde ona bağlı kalın — seçimin hiçbir teknik sonucu yoktur.

.md ise türce farklıdır. Markdown dosyası, içinde bir Mermaid diyagramı barındırabilen bir belgedir; diyagram, üç ters tırnak ve mermaid sözcüğüyle başlayan bir bloğa sarılıdır. Diyagram, daha büyük bir metnin içindeki bir parçadır.

Bu ayrım, bir dosyanın çizilmemesinin açık ara en yaygın nedenidir ve iki yönde de işler. Bir .md dosyasının içeriğini Mermaid görüntüleyiciye yapıştırın, devrilir, çünkü çit satırı Mermaid sözdizimi değildir. Çıplak bir Mermaid diyagramını çitsiz olarak .md dosyasına kaydedin, GitHub onu düz bir metin paragrafı olarak gösterir. Kural basit: .mmd dosyası bir diyagram anahtar sözcüğüyle başlamalı, .md dosyasındaki diyagram ise çitli bir bloğun içinde olmalıdır.

Bu görüntüleyici .mmd, .mermaid, .md ve .txt kabul eder, ama okuduğu her şeyi ham Mermaid sayar. Diyagramın çevresinde metin bulunan bir Markdown bırakıyorsanız, önce diyagram dışındaki her şeyi silin.

Çizilmiyor — asıl sorun ne

Mermaid'in hata iletileri kesindir ama dostça değildir. İşe yarayan bir numara, iletinin yalnızca sonunu okumaktır: «got» sözcüğünden sonra Mermaid takıldığı belirteci adlandırır ve o belirteç sorunu satır numarasından çok daha iyi gösterir. Aşağıdaki her durumu mermaid 11.12.2 üzerinde yeniden ürettim: hatalı sürüm gerçekten devriliyor, düzeltilmiş olan gerçekten çiziliyor.

Ne görüyorsunuz

No diagram type detected matching given configuration for text: ```mermaid

Neden

Diyagramı bir Markdown dosyasından ya da bir sohbetten kopyaladınız ve çiti de beraberinde getirdiniz. Üç ters tırnak Markdown'dır, Mermaid değil; bu yüzden ayrıştırıcı diyagrama hiç ulaşamaz.

Çözüm

Açan ```mermaid satırını ve kapatan ``` satırını silin. Dosya bir diyagram anahtar sözcüğüyle başlamalıdır.

Hatalı
```mermaid
flowchart TD
    A[Başla] --> B[Bitti]
```
Doğru
flowchart TD
    A[Başla] --> B[Bitti]

Ne görüyorsunuz

No diagram type detected matching given configuration for text: classDıagram

Neden

Anahtar sözcükte noktasız ı var. Türkçe yazarken karşılaşılan kendine özgü tuzak budur: Türkçe klavyede I tuşu noktasız ı üretir ve `classDıagram` ekranda `classDiagram`dan neredeyse ayırt edilemez. Ölçüldü — `classDıagram`, `stateDıagram-v2`, `sequenceDıagram` ve `erDıagram` hepsi bu hatayı verir.

Çözüm

Anahtar sözcükleri noktalı i ile yazın. Diyagramın geri kalanında Türkçe harfler tamamen serbesttir; sorun yalnızca ilk satırdadır.

Hatalı
classDıagram
    class Sipariş
Doğru
classDiagram
    class Sipariş

Ne görüyorsunuz

Parse error, ileti şununla bitiyor: got 'PS'

Hatanın sonu: got 'PS'

Neden

Düğüm etiketinin içinde açan yuvarlak parantez var. Mermaid'de yuvarlak parantezler biçim sözdizimidir — A(metin) yuvarlatılmış düğüm demektir — bu yüzden köşeli parantez içindeki çıplak parantez bir biçimin başlangıcı sanılır.

Çözüm

Etiketi tırnağa alın. Tırnak içindeki her şey, parantezler dahil, metin sayılır.

Hatalı
flowchart TD
    A[Tahsilat yap(sipariş)] --> B[Bitti]
Doğru
flowchart TD
    A["Tahsilat yap(sipariş)"] --> B[Bitti]

Ne görüyorsunuz

Düğüme ad verdiğiniz satırda Parse error

Neden

Düğüm tanımlayıcısında boşluk var. Türkçede bu en kolay yapılan hatadır, çünkü doğal adlar çok sözcüklüdür: «kimlik doğrulama servisi», «kullanıcı veritabanı». Tanımlayıcı oktan önceki belirteçtir ve boşluk onu keser, yerleştirilecek yeri olmayan bir sözcük bırakır.

Çözüm

Düğüme tek sözcüklü bir tanımlayıcı verin, okunacak metni etikete koyun. Tanımlayıcıda Türkçe harfler çalışır; yalnızca boşluk bozar.

Hatalı
flowchart TD
    kimlik doğrulama servisi --> kullanıcı veritabanı
Doğru
flowchart TD
    auth[Kimlik doğrulama servisi] --> db[Kullanıcı veritabanı]

Ne görüyorsunuz

Parse error, ileti şununla bitiyor: got 'STR'

Hatanın sonu: got 'STR'

Neden

Düğüm etiketinin içinde düz çift tırnak var. Ayrıştırıcı onu bir metnin başlangıcı sanar, sonra kapanış tırnağı beklediği yerde etiketin köşeli parantezine rastlar.

Çözüm

Etiketin tamamını düz tırnağa alın, içeride Türkçe tırnakları kullanın ya da karakteri #quot; HTML varlığı olarak yazın.

Hatalı
flowchart TD
    A[O "tamam" dedi] --> B[Bitti]
Doğru
flowchart TD
    A["O «tamam» dedi"] --> B[Bitti]

Ne görüyorsunuz

Parse error, ileti şununla bitiyor: got 'end'

Hatanın sonu: got 'end'

Neden

end sözcüğünü düğüm tanımlayıcısı olarak kullandınız. Küçük harfli end bir alt grubu kapatır, bu yüzden ayrıştırıcı düğüm beklediği yerde blok sonu görür. Göründüğünden sık olur: İngilizce örnekleri izlerken, şemanın geri kalanı Türkçe olsa bile son düğümün adı end olup çıkar.

Çözüm

Büyük harfle yazın ya da düğüme başka bir tanımlayıcı verip sözcüğü etikete taşıyın. `Son` hiçbir sorun çıkarmaz.

Hatalı
flowchart TD
    A[Başla] --> end
Doğru
flowchart TD
    A[Başla] --> Son[Tamamlandı]

Ne görüyorsunuz

Çizilir, ama durum diyagramında bir durum ikiye ayrılmış

Neden

Durum tanımlayıcısında boşluk var. Akış şemasının aksine durum diyagramı itiraz etmez: her sözcük için ayrı bir kutu oluşturur ve gözünü kırpmadan çizer. Ölçüldü — `[*] --> Ödeme bekliyor` iki durum verir, `Ödeme` ve `bekliyor`, ve okun ucunda yalnızca ilki vardır. Türkçede durum adlarının neredeyse hiçbiri tek sözcüğe sığmadığı için bu sürekli olur ve hiçbir işaret vermez.

Çözüm

Durumu `state "Etiket" as id` ile bildirin ve ona yalnızca tanımlayıcısıyla atıfta bulunun.

Hatalı
stateDiagram-v2
    [*] --> Ödeme bekliyor
    Ödeme bekliyor --> Kapandı
Doğru
stateDiagram-v2
    state "Ödeme bekliyor" as bekliyor
    [*] --> bekliyor
    bekliyor --> Kapandı

Ne görüyorsunuz

Çizilir, ama ER diyagramında yazmadığınız varlıklar var

Neden

İlişki etiketinde boşluk var ve tırnak yok. Türkçede en çok engel çıkaran tuzak budur, çünkü ilişki ifadelerimiz çok sözcüklüdür: «sipariş verir», «şuna aittir». Mermaid hata vermez: etiketi ilk boşlukta keser ve kalan her sözcüğü boş bir varlığa çevirir.

Çözüm

Boşluk içeren her ilişki etiketini tırnağa alın. Türkçede bu pratikte her etiket demektir.

Hatalı
erDiagram
    MÜŞTERİ ||--o{ SİPARİŞ : sipariş verir
Doğru
erDiagram
    MÜŞTERİ ||--o{ SİPARİŞ : "sipariş verir"

Ne görüyorsunuz

No diagram type detected matching given configuration for text: sequencediagram

Neden

Diyagram anahtar sözcüğü yanlış yazılmış ya da yanlış büyük-küçük harfle. Mermaid'in anahtar sözcükleri büyük-küçük harfe duyarlıdır: sequenceDiagram çalışır, sequencediagram çalışmaz. Aynısı stateDiagram-v2 ve erDiagram için de geçerlidir.

Çözüm

Büyük-küçük harfi düzeltin. graph sözcüğünün hâlâ flowchart'ın eski takma adı olarak kabul edildiğine dikkat edin, yani o eski sözdizimi sizin sorununuz değil.

Hatalı
sequencediagram
    Istemci->>API: Merhaba
Doğru
sequenceDiagram
    Istemci->>API: Merhaba

Ne görüyorsunuz

Dikey çizgiler arasındaki kenar etiketinde Parse error

Neden

Kenar etiketinin içinde parantez var. |…| arasındaki etiket, düğüm etiketiyle aynı kısıtlamaya tabidir: orada da parantezler metin değil sözdizimidir.

Çözüm

Kenar etiketini de tırnağa alın.

Hatalı
flowchart TD
    A -->|evet (her zaman)| B
Doğru
flowchart TD
    A -->|"evet (her zaman)"| B

Ne görüyorsunuz

Diyagramın son satırını gösteren Parse error

Neden

Açılmış ve hiç kapanmamış bir blok: alt, opt, loop, par ve subgraph kendi end'ini ister. Mermaid hatayı girdinin bittiği yerde bildirir, bu yüzden satır numarası kapanmamış bloğu değil dosyanın sonunu gösterir.

Çözüm

Açık blokları ve yazdığınız end sayısını sayın. Hata son satırı gösteriyorsa neredeyse her zaman budur.

Hatalı
sequenceDiagram
    Istemci->>API: İstek
    alt Her şey yolunda
        API-->>Istemci: Tamam
Doğru
sequenceDiagram
    Istemci->>API: İstek
    alt Her şey yolunda
        API-->>Istemci: Tamam
    end

Ne görüyorsunuz

Lexical error on line 1. Unrecognized text.

Neden

Diyagram anahtar sözcüğünden sonraki yön geçersiz. Akış şemaları yalnızca TB, TD, BT, LR ve RL kabul eder; başka her şey tek bir düğüm okunmadan önce sözcüksel çözümlemede düşer.

Çözüm

Beş geçerli yönden birini kullanın. TD ve LR neredeyse bütün durumları karşılar.

Hatalı
flowchart XY
    A --> B
Doğru
flowchart TD
    A --> B

Ne görüyorsunuz

Burada çiziliyor, GitLab'da, Confluence'ta ya da eski bir araçta çizilmiyor

Neden

Sürüm farkı. Bu görüntüleyici Mermaid 11.12.2 üzerinde çalışıyor; GitLab.com 10. sürümü belgeliyor ve kendi sunucusunda tutulan wiki'ler yıllarca geride kalabiliyor. Diğer aracın sürümünden sonra gelen sözdizimi burada ayrıştırılır, orada devrilir.

Çözüm

Diğer motora sürümünü sorun. Diyagrama tek başına info yazmak Mermaid'in kendi sürüm numarasını çizmesini sağlar; bu, değişiklik listesini okumaktan hızlıdır.

Doğru
info

Karakter kodlamasından söz etmeye değer, çünkü Türkçe dosyalarda hâlâ şaşırtabiliyor. Bu site ve editör dosyayı UTF-8 olarak okur ve varsa BOM işaretini atar, yani Windows Not Defteri'nde «UTF-8 BOM'lu» kaydedilmiş bir dosya sorunsuz açılır. Ama Windows-1254 ya da ISO-8859-9 olarak kaydedilmiş bir dosya — bazı eski araçlar hâlâ bunu üretiyor — ğ, ş, ı, İ, ç, ö ve ü harfleri bozulmuş halde gelir. Türkçe harflerin yerinde tuhaf simgeler görüyorsanız, dosyayı düzenleyicinizden yeniden UTF-8 olarak kaydedin.

Bir de hiçbir hata vermeyen şu var: kendi sunucusunda tutulan GitLab'da Cross-Origin-Resource-Policy başlığı same-site ya da same-origin olarak ayarlandığında Mermaid diyagramları sessizce devrilir. Ne ileti, ne diyagram, sayfada hiçbir şey. Diyagram tek bir kurulum dışında her yerde çiziliyorsa bakılacak yer tam olarak orasıdır.

PNG, SVG ya da PDF'e dönüştürme

Dosyayı editörde açın ve dışa aktarma düğmelerini kullanın. SVG diyagramı vektörel metin olarak korur, böylece her boyutta keskin kalır ve etiketler seçilip aranabilir — belgeler için ve daha sonra yeniden dışa aktarılabilecek her şey için doğru seçim budur. PNG ise bir bit eşlemdir; burada yüksek yoğunluklu ekranlarda dayanması için görüntüleme boyutunun iki ila üç katında dışa aktarılır. Onu SVG'nin kabul edilmediği yerlerde kullanın, ki pratikte bu çoğu mesajlaşma uygulaması ve bazı wiki'ler demektir.

PDF düğmesi yok ve bunu numara yapmaktansa yazmayı yeğliyorum. Uygulanabilir yol, SVG'yi dışa aktarıp ya zaten yazmakta olduğunuz belgeye yerleştirmek ya da bu sayfayı tarayıcıdan PDF'e yazdırmaktır. PDF'in içine yerleştirilen vektörel SVG vektör olarak kalır.

Yinelenen her şey için — bir derleme adımı, toplu dosyalar, bir pre-commit kancası — resmî komut satırı motoru @mermaid-js/mermaid-cli var: aynı .mmd dosyasını alır ve görüntüyü tarayıcı olmadan doğrudan yazar.

Sık sorulan sorular

.mmd dosyası online nasıl açılır?
Bu sayfanın üstündeki çerçeveye bırakın. Tarayıcınızda çizilir, yükleme yok, hesap yok. Editörü açıp dosyayı önizleme paneline sürükleyerek de yapabilirsiniz.
.mmd dosyasını hangi program açar?
Dosya düz metin olduğu için kaynağı herhangi bir metin düzenleyici gösterir. Diyagramı görmek için Mermaid çizen bir şeye ihtiyacınız var: bu site, buradaki editör ya da komut satırı aracı mermaid-cli. .mmd uzantısının ait olduğu bir masaüstü uygulaması yoktur.
.mmd ile .mermaid aynı şey mi?
Evet. İki uzantı da aynı içeriği taşır ve birbirinin yerine kullanılabilir. .mmd daha yaygındır ve resmî komut satırı aracının öntanımlı kullandığı odur.
.mmd dosyam GitHub'da neden çizilmiyor?
GitHub, Mermaid'i yalnızca Markdown dosyalarındaki, issue'lardaki, Discussions'taki, pull request'lerdeki ve wiki'deki çitli ```mermaid bloklarının içinde çizer. Tek başına bir .mmd dosyası kaynak metin olarak gösterilir. GitHub'da görünmesi için aynı diyagramı bir .md dosyasındaki çitli bloğa koyun.
Hiçbir şey kurmadan .mmd açabilir miyim?
Evet — bu sitenin varlık nedeni bu. Çizim, tarayıcınızda JavaScript olarak çalışır, yani kurulacak bir şey yoktur ve dosya bilgisayarınızdan hiç çıkmaz.
Türkçe harfler tuhaf simgeler olarak görünüyor
Dosya UTF-8 değil. Bu site dosyaları UTF-8 olarak okur ve BOM işaretiyle sorunsuz başa çıkar, ama Windows-1254 ya da ISO-8859-9 olarak kaydedilmiş bir dosya ğ, ş, ı, İ, ç, ö ve ü harfleri bozulmuş halde gelir. Düzenleyicinizden UTF-8 olarak yeniden kaydedin.
Diyagramım hata veriyor ve nedenini göremiyorum
İlk satıra bakın. Türkçe yazarken en sık neden, anahtar sözcükteki noktasız ı'dır: `classDıagram` ve `sequenceDıagram` «No diagram type detected» verir ve ekranda doğrusundan neredeyse ayırt edilemez. Anahtar sözcükler İngilizcedir ve harfi harfine eşleşir.
Burada çalışıyor, bizim wiki'de çalışmıyor. Neden?
Neredeyse her zaman sürüm farkıdır. Bu görüntüleyici Mermaid 11.12.2 üzerinde çalışır, birçok wiki ise daha eski bir sürümde — GitLab.com 10. sürümü belgeler. Diğer sistemde diyagrama info yazın, çalıştığı sürümü yazsın.

Burada açabileceğiniz diyagram türleri

Yazan: Dominik Malsch · Son güncelleme:

Editörü aç →