Mermaid akış şemasından düzenlenebilir diyagrama

Nasıl çalışır

1. 01

   Mermaid kodunuzu yapıştırın

   Bir Markdown dosyasından, bir README’den ya da bir AI sohbetinden kod. Etrafındaki mermaid kod çiti ve en üstteki yapılandırma bloğu sorun değil.

2. 02

   Düzenlenebilir bir diyagram görün

   Akış şeması düğümleri süreç, karar ve belge gibi akış şeması şekillerine, alt grafikler çerçevelere, ER varlıkları da tablo kartlarına dönüşür.

3. 03

   Archboard’da açın

   Şekilleri taşımak ve yeniden biçimlendirmek, not eklemek, bağlantı paylaşmak ya da SVG ve PNG olarak dışa aktarmak için yeni bir diyagram olarak kaydedin. Kayıt için Google ya da GitHub hesabı yeterli.

Mermaid kodundan neler çizilir

Kodunuzun şu parçaları düzenlenebilir diyagram öğelerine dönüşür:

• flowchartgraph

  flowchart ve graph diyagramları (flowchart-elk dahil), her düğüm ve etiketiyle. fa:fa-car gibi Font Awesome önekleri etiketlerden temizlenir.

• @{ shape }

  Parantezlerle ya da yeni şekil sözdizimiyle yazılan düğüm şekilleri akış şeması öğelerine eşlenir: süreç, karar, başlangıç ve bitiş, veri, belge, hazırlık, elle giriş ve bağlayıcı. Akış şemasında karşılığı olmayan şekiller en yakın temel şekle (örneğin silindir) ya da süreç kutusuna dönüşür.

• subgraph

  Alt grafikler (subgraph), düğümlerinin çevresinde çerçeve olarak; iç içe alt grafikler dahil. Boş bir alt grafik çizilmez.

• -->-.->==>

  Etiketleriyle oklar; düz, noktalı ya da kalın, A --> B --> C gibi zincirler ve A --> B & C gibi dallanmalar dahil.

• erDiagram

  erDiagram varlıkları, her özniteliği türü ve PK, FK ya da UK anahtarıyla listeleyen tablo kartları olarak; ilişkiler de kardinaliteleriyle. Tanımlayıcı olmayan ilişkiler kesikli çizilir.

• TDLR

  Akış şemasının yönü (TD, TB, LR, RL ya da BT), diyagramın hangi yöne aktığını belirler.

Desteklenen Mermaid diyagram türleri

Bugün akış şemaları (flowchart ve graph) ile varlık-ilişki diyagramları (erDiagram) dönüştürülüyor. sequenceDiagram, classDiagram, stateDiagram, gantt, pie, mindmap, timeline, gitGraph ve daha yeni türler henüz dönüştürülmüyor: araç yanlış bir akış şeması çizmek yerine bulduğu türün adını söyler.

Mermaid içe aktarmasında neler yer almaz

• Sequence, class, state ve Gantt diyagramları, pasta grafikleri, zihin haritaları ve diğer türler. Şimdilik yalnızca akış şemaları ve ER diyagramları dönüştürülür.
• classDef, style, linkStyle ve class satırlarından gelen renkler ve yazı tipleri: diyagram Archboard stilleriyle başlar, bunları canvas’ta değiştirebilirsiniz.
• Düğümlerdeki ikonlar ve görseller: icon ve img ayarları atılır, etiket korunur.
• Kodunuzla canlı bağ: canvas’ı düzenlemek Mermaid kodunu değiştirmez, kodda sonradan yapılan değişiklikler de diyagramı güncellemez.