Mermaid Editor

Ücretsiz online mermaid editör, görsel ve kod aynı ekranda

Çoğu mermaid editörü size sadece bir metin kutusu ve bir önizleme sunar. Bu editör ayrıca bir tuval de sunar: blok eklemek için tıklayın, bir ok sürükleyin, öğeleri alanlara gruplandırın — mermaid kodu kendiliğinden yazılır. Kod sekmesine geçip elle düzenleyin; tuval bunu takip eder.

  • Yazarken render edilir

    Gerçek mermaid motoru, son tuş vuruşunuzdan birkaç yüz milisaniye sonra yeniden çizilir.

  • Kod ve tuval senkronize

    Her iki tarafı da düzenleyin. Diğeri kendini günceller — iki araç arasında kopyala-yapıştır yok.

  • 14 düğüm şekli

    Dikdörtgen, yuvarlak köşeli, hap, daire, eşkenar dörtgen, veritabanı, altıgen ve daha fazlası, tek tıkla.

  • Ücretsiz, kayıt yok

    Deneme sürümü veya filigran yok — editör anında açılır. Yalnızca birden fazla diyagram istiyorsanız giriş yapın.

Sadece bir metin kutusu değil, gerçek bir tuval

Görsel sekme, render edilen diyagramın üzerinde çalışan gerçek bir editördür: bir düğümü seçmek için tıklayın, yerinde yeniden adlandırmak için çift tıklayın, gezinmek için herhangi bir yeri sürükleyin.

  • Tıklayarak oluşturunBir blok ekleyin, bir oku başka bir bloğa yöneltin, oku etiketleyin. Başlamadan önce ezberlenecek bir sözdizimi yok.

  • Bir şekil seçinOndört mermaid akış şeması şekli — karar eşkenar dörtgenleri, veritabanı silindirleri, alt yordamlar — tek bir seçiciden.

  • Her şeyi renklendirinSekiz hazır ayar artı bir renk seçici, tek bir düğüme veya tüm bir alana uygulanır.

Sizde kalan mermaid kodu

Metin sekmesi düz mermaid kodudur — GitHub, GitLab, Notion ve Obsidian'ın zaten render ettiği aynı sözdizimi. Burada özel bir format yok.

  • Elle yazınMermaid'i doğrudan yazın ve render edildiğini izleyin. Başlamak için altı hazır örnek.

  • Çift yönlü çalışırYapıştırdığınız akış şemaları tuval üzerine geri ayrıştırılır — düğümler, şekiller, renkler, alt grafikler ve tüm diğerleri.

  • Her diyagram türüAkış şeması, sıralama, sınıf, durum, ER, gantt, git grafiği, pasta — önizleme mermaid'in desteklediği her şeyi render eder.

Büyük diyagramlar okunabilir kalır

Mimari diyagramlar hızla bir ekranın sınırlarını aşar. Kaydırma, yakınlaştırma ve gruplama bununla mücadele etmek yerine bunun için tasarlandı.

  • Alanlar ve iç içe geçmeBlokları alt grafiklerde gruplandırın, bir alanı diğerinin içine yerleştirin, tüm bir alt ağacı tek hareketle taşıyın.

  • %2'den %1600'e yakınlaştırmaGezinmek için kaydırın, yakınlaştırmak için ctrl+kaydırma yapın veya tek bir düğmeyle yeniden ortalayın.

  • İlerledikçe kaydedilirDiyagram siz düzenlerken tarayıcınıza otomatik kaydedilir. Giriş yaparsanız hesabınıza kaydedilir ve sizi her cihazda takip eder.

Dışa aktarın ve işinize devam edin

Hiçbir şey kilitli değil. Görseli alın, kaynağı alın veya bir belgeye yapıştırmaya hazır bir Markdown bloğu alın.

  • Ücret duvarı yokDışa aktarma dahil her özellik ücretsizdir. Yükseltilecek ücretli bir katman yoktur.

  • Tarayıcınızda işlenirGörselleştirme tarayıcınızda yapılır; hesabınız yoksa diyagram tarayıcıdan hiç çıkmaz, hesabınız varsa kaydedilen belge sizi her cihazda takip eder.

  • SVG, PNG, .mmd, .mdSVG işaretlemesini kopyalayın, 2 kat çözünürlükte bir PNG indirin, mermaid kaynağını kaydedin veya çevrelenmiş bir Markdown bloğu alın.

Alışılmış araçlarla karşılaştırma

Diyagram-kod araçları her şeyi elle yazmanızı ister. Sürükle-bırak araçları ise fark (diff) alamayacağınız bir görsel verir. Bu editör taraf seçmeyi reddediyor.

Başlarken

IQ Mermaid: Tuvale çift tıklayın, bir düğüm belirir. Sözdizimini daha sonra öğrenebilir, hatta hiç öğrenmeyebilirsiniz.

Tipik araç: Önce sözdizimi referansını okuyun, ya da hiç metin gösterimi olmayan bir çizim aracını kabul edin.

Çıktı formatı

IQ Mermaid: Düz mermaid kodu — GitHub, GitLab ve Notion'ın doğrudan render ettiği aynı metin.

Tipik araç: Yalnızca onu oluşturan araçta açılan özel bir dosya.

Sonradan düzenleme

IQ Mermaid: Kodu değiştirin veya blokları taşıyın. Her iki yön de aynı diyagram üzerinde çalışır.

Tipik araç: Tek yönlü: kod öncelikli araçların tuvali, tuval öncelikli araçların ise kaynağı yoktur.

Fiyat

IQ Mermaid: Ücretsiz — e-posta bile gerekmez.

Tipik araç: Birkaç diyagramla sınırlı ücretsiz katman, dışa aktarma veya işbirliği ise abonelik arkasında.

Veriler nerede tutulur

IQ Mermaid: Tarayıcınızda ya da sizi her cihazda takip etmesini istiyorsanız hesabınızda.

Tipik araç: Birinin sunucusundaki bir hesap, diyagramlarınız ona bağlı.

Mermaid editörü soruları

Başlamak için tek gereken sayfayı açmak.

Mermaid nedir?

Mermaid, diyagramlar için bir metin sözdizimidir: birkaç satırda düğümleri ve okları tanımlarsınız, bir render motoru resmi çizer. GitHub, GitLab, Notion ve Obsidian bunu Markdown içinde render eder, böylece bir mermaid bloğu bir pull request'te veya bir wiki sayfasında okunabilir kalır.

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

Evet. SVG ve PNG dışa aktarma dahil her özellik ücretsizdir ve editörü hiçbir şey oluşturmadan kullanabilirsiniz. İsteğe bağlı ücretsiz bir hesap daha fazla kayıtlı diyagram ve cihazlar arası eşitleme ekler — ücretli plan yok ve hiçbir şey esirgenmez.

Mermaid sözdizimini bilmem gerekiyor mu?

Hayır. Görsel sekmeden başlayın: bir blok eklemek için tuvale çift tıklayın, seçin ve başka birine ok çizin. Mermaid kodu sizin için oluşturulur ve sözdizimini öğrenmek istediğinizde istediğiniz zaman okuyabilirsiniz.

Hangi diyagram türleri destekleniyor?

Kod sekmesi mermaid'in desteklediği her şeyi render eder — akış şeması, sıralama, sınıf, durum, varlık ilişki, gantt, git grafiği, pasta ve daha fazlası. Görsel tuval özellikle akış şemalarını düzenler, ki çoğu diyagram da budur.

PNG veya SVG olarak dışa aktarabilir miyim?

Evet. SVG işaretlemesini panoya kopyalayın, SVG dosyasını indirin veya sunumlar ve belgeler için 2 kat çözünürlükte render edilen bir PNG indirin. Ayrıca mermaid kaynağını .mmd olarak veya çevrelenmiş bir Markdown bloğu olarak da kaydedebilirsiniz.

Diyagramım nerede saklanıyor?

Hesap yoksa tek diyagramınız tarayıcıya kaydedilir, böylece aynı cihazda geri döndüğünüzde oradadır. Giriş yaparsanız hesabınıza kaydedilir ve başka bir cihaza taşınabilir. Kendi kopyanızı istiyorsanız kaynağı dışa aktarın.

Var olan bir mermaid diyagramını yapıştırabilir miyim?

Evet. Kod sekmesine yapıştırın; bir akış şeması düğümleri, şekilleri, renkleri ve alt grafikleriyle birlikte görsel tuval üzerine geri ayrıştırılır. Diğer diyagram türleri önizlemede render edilir ancak yalnızca kod olarak kalır.

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

İşleme tamamen tarayıcınızda gerçekleşir; sayfa yüklendikten sonra editör bağlantı olmadan da çalışır.

Editörü açın. Ücretsiz — kayıt yok.

Boş bir tuval, bir kod sekmesi ve her dışa aktarma seçeneği — ücretsiz, tarayıcınızda, şimdi.