Ana içeriğe geç
LibraTool logoLibraTool

Ücretsiz Mermaid Diyagram Editörü

Canlı önizlemeyle Mermaid sözdiziminde akış şemaları, dizi diyagramları, Gantt grafikleri ve daha fazlasını yazın. SVG veya PNG olarak dışa aktarın. Tamamen tarayıcınızda çalışır.

💡 Diyagramlarınızı Mermaid söz dizimiyle yazın — akış şemaları, sıra diyagramları, Gantt şemaları, sınıf diyagramları ve daha fazlası — sonra SVG veya PNG olarak dışa aktarın. Her şey tarayıcınızda çalışır: diyagram metniniz asla yüklenmez ve Mermaid görselleştirme motoru üçüncü taraf bir CDN'den değil, bu siteden sunulur.

Yaygın kullanımlar

  • Akış Şeması OluşturunMetinden akış şeması oluşturun ve görüntü olarak dışa aktarın.
  • Sıra Diyagramı ÇizinSistemlerin veya kişilerin zaman içinde nasıl etkileşime girdiğini şeması çizin.
  • README'ye Diyagram EkleyinGitHub'ın README'nizde yerel olarak oluşturduğu diyagramlar oluşturun.
  • Gantt Şeması OluşturunMetinden bir Gantt şeması olarak bir proje zaman çizelgesini ayarlayın.
  • Sınıf Diyagramı OluşturunYazılım tasarımı için sınıfları ve ilişkilerini şeması çizin.

Nasıl çalışır

Mermaid, diyagramları metin olarak yazmanıza ve otomatik olarak çizdirmenize olanak tanır — diyagramları sürüm denetiminde tutmak için harika. Bu, yazdıkça çizen canlı bir düzenleyicidir.

  1. 1
    Mermaid motoru yüklenir
    Mermaid kitaplığı aracı ilk kullandığınızda LibraTool'dan yüklenir, ardından tarayıcınız onu önbelleğe alır.
  2. 2
    Diyagram kodu yazarsınız
    Akış şemaları, sıra diyagramları, Gantt çizelgeleri, sınıf diyagramları, pasta grafikleri ve daha fazlası — Mermaid'nin metin sözdizimini kullanarak.
  3. 3
    Canlı işler
    Kodunuz ayrıştırılır ve tarayıcınızda yazarken SVG'ye işlenir, açık ve koyu temalarla.
  4. 4
    SVG veya PNG dışa aktarma
    Diyagramı belgelere, slaytlara veya README'ye eklemek için ölçeklenebilir SVG ya da 2× PNG olarak indirin.

İç sistemleri tarif edebilecek diyagram kodunuz tamamen tarayıcınızda işlenir ve hiçbir zaman yüklenmez.

İlgili araçlar

📝

Markdown Editörü

Markdown'ı gerçek zamanlı olarak yazın ve önizleyin. Başlıkları, kalın, italik, kod bloklarını, tabloları ve listeleri destekler.

Deneyin
🟦

CSS Grid Oluşturucu

Görsel olarak bir CSS grid tasarlayın — izler, birimler ve boşluklar — ve oluşturulan CSS ve HTML'yi kopyalayın.

Deneyin
🌳

ASCII Ağaç Oluşturucu

Girintili bir listeyi README'ler ve belgeler için temiz bir klasör ağacına (├── └──) dönüştürün. Unicode veya düz ASCII çıktısı. Tamamen tarayıcınızda çalışır.

Deneyin

Sık sorulan sorular