# NoteRich’te Akış Şemaları Oluşturmak İçin Mermaid.js’ı Nasıl Kullanacağınız – Tam Kılavuz karmaşık süreçleri, sistem mimarilerini veya karar ağaçlarını tek başına görselleştirmek zor olabilir. **Mermaid.js**, basit metin tanımları kullanarak diyagram oluşturan güçlü bir JavaScript tabanlı araçtır. **NoteRich**’te, Mermaid.js’ı doğrudan editörüne entegre ettik, böylece notlarınızdan ayrılmadan profesyonel akış şemaları, sıralama diyagramları ve daha fazlasını oluşturabilirsiniz. Bu kılavuz, NoteRich’te Mermaid diyagramları kullanmayı öğrenmek için bilmeniz gereken her şeyi anlatacaktır. AI ve OCR kullanarak diyagramları anında oluşturmayı da içerir. --- ## 🚀 NoteRich’te Mermaid’ı Neden Kullanmalıyız? * **Metin Tabanlı:** Diyagramlarınızı kod kullanarak tanımlayın, böylece versiyon kontrolü ve düzenlemesi kolaylaşır. * **Canlı Önizleme:** Yazarken değişikliklerinizi anında görebilirsiniz. * **Çok Yönlülük:** Akış şemaları, sıralama diyagramları, sınıf diyagramları, durum diyagramları, Gantt diyagramları ve daha fazlasını destekler. * **AI ve OCR ile Oluşturma:** Doğal dil açıklamalarından veya mevcut görüntüleri tarayarak diyagramlar oluşturur. * **Yerel Öncelik:** Diyagram tanımlarınız notlarınızda yerel olarak saklanır, bu da gizliliği ve çevrimdışı erişimi sağlar. --- ## 📝 Başlangıç: Mermaid Diyagramının Eklenmesi NoteRich’te Mermaid diyagramını eklamak için üç ana yöntem vardır: ### Yöntem 1: Slash Komutu (`/`) 1. Diyagramın yerleştirileceği yere imleci yerleştirin. 2. `/` tuşuna basarak bileşen seçicisini açın. 3. **"Mermaid"** veya **"Diagram"** arayın. 4. Listeden **Mermaid Diagram** seçeneğini seçin. ### Yöntem 2: Araç Çubuğu 1. Araç çubuğundaki **Ekle** butonuna tıklayın. 2. **Görselleştirme** veya **Diyagramlar** bölümüne gidin. 3. **Mermaid**’ı tıklayın. ### Yöntem 3: AI Asistanı 1. **AI Asistanı**’nı (`/ai` veya araç çubuğu aracılığıyla) açın. 2. İstediğiniz diyagramı açıklarınız. (Örn.: "Kullanıcı giriş süreci için bir akış şeması oluşturun.") 3. AI, sizin için Mermaid kodunu oluşturacak ve bunu doğrudan notunuza ekleyebileceksiniz. Ekledikten sonra, bir kod editörü ve canlı önizleme penceresi olan bir yapılandırma modülü görünecektir. --- ## 🛠️ Mermaid Editör Arayüzü NoteRich’teki Mermaid editörü verimlilik için tasarlanmıştır: * **Kod Alanı:** Mermaid sözdizimini yazabileceğiniz tek parça metin alanı. * **Canlı Önizleme:** Diyagramınızın gerçek zamanlı olarak görüntülenmesi. Eğer bir sözdizim hatası varsa, hata göstergesi görünür ve sizin hata ayıklamanıza yardımcı olur. * **Yardım İkonu:** "Diagram Kodu"nun yanındaki `?` ikonuna tıklayarak, detaylı sözdizim referansları için resmi [Mermaid.js Dokümantasyonunu](https://mermaid.js.org/intro/) açabilirsiniz. * **Onay Butonu:** Diyagramınızı kaydeder ve notunuza ekler. > **İpucu:** Notunuzdaki mevcut Mermaid diyagramına çift tıklayarak editörü yeniden açabilir ve değişiklikler yapabilirsiniz. --- ## 📊 Temel Akış Şeması Sözdizimi Akış şemaları, Mermaid için en yaygın kullanım alanıdır. İşte nasıl oluşturulur. ### 1. Yön Belirleme Akışın yönünü belirleyerek başlayın: * `graph TD`: Üstten alta * `graph LR`: Soldan sağa * `graph BT`: Alttan yukarı * `graph RL`: Sağdan sola ### 2. Düğü Ekleme Düğüler, bir ID ve etiket ile tanımlanır. ```mermaid graph TD A[Başlangıç] --> B[Süreç] B --> C{Karar] C -->|Evet| D[Sonuç] C -->|Hayır| B ``` * `[Metin]`: Dikdörtgen düğüm. * `(Metin)`: Dairesel dikdörtgen. * `((Metin))`: Çember. * `{Metin}`: Eşkenar dörtgen (Karar). * `[[Metin]]`: Alt rutin. ### 3. Düğüleri Birleştirme * `-->`: Düz çizgi. * `-.->`: İpliçi çizgi. * `==>`: Kalın çizgi. * `-- Metin -->`: Etiketli çizgi. --- ## 🤖 AI Tabanlı Diyagram Oluşturma Kod yazmak istemiyor musunuz? O zaman NoteRich’in AI’si sizin için bunu yapar. 1. **AI Asistanı**’nı açın. 2. Şu tür bir komut yazın: *"Müşterinin çevrimiçi bir sipariş vermesi için bir Mermaid sıralama diyagramı oluşturun."* 3. AI, şu tür bir kod bloğu dökecektir: ```mermaid sequenceDiagram participant Müşteri participant Web Sitesi participant Veritabanı Müşteri->>Web Sitesi: Sipariş Ver Web Sitesi->>Veritabanı: Envanter Kontrol Veritabanı-->>Web Sitesi: Envanter Mevcut Web Sitesi-->>Müşteri: Sipariş Onaylandı ``` 4. Kodu kopyalayın veya AI arayüzünde mevcut olan **Ekle** butonunu kullanarak kodu notunuza ekleyin. --- ## 📸 OCR: El yazısı veya Yazdırılmış Diyagramları Tarayın Bir whiteboard fotoğrafınız veya yazdırılmış bir akış şeması mı var? NoteRich’in **Not Tarayıcısı (OCR)**, bunu düzenlenebilir Mermaid koduya dönüştürebilir. 1. **AI Asistanı**’nı açın ve **Not Tarayıcısı (OCR)**’ı seçin. 2. El yazısı veya yazdırılmış diyagramınızın bir resmini yükleyin. 3. Komutunda şunu belirtin: *"Bu resmi Mermaid.js akış şeması koduna dönüştürün."* 4. AI, resmin yapısını analiz edecek ve buna karşılık gelen Mermaid sözdizimini oluşturacaktır. 5. Editörde oluşturulan kodu gözden geçirin ve herhangi bir küçük tanıma hatasını düzeltin. > **Not:** En iyi sonuçlar için, resmin net ve metnin okunabilir olduğundan emin olun. karmaşık el yazısı çizimlerinin dönüşüm sonrasında bazı manuel düzeltmeler gerekebilir. --- ## 🎨 İleri Seviye Özellikler ### Düğülerin Stilize Edilmesi Belirli düğülerin görünümünü CSS sınıfları veya içerikli stillerle özelleştirebilirsiniz. ```mermaid graph LR A[Başlangıç] --> B[Süreç] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### Alt Graplerler İlgili düğüleri daha iyi organize etmek için gruplandırın. ```mermaid graph TD subgraph Frontend A[React Uygulaması] --> B[UI Bileşenleri] end subgraph Backend C[API Sunucusu] --> D[Veritabanı] end B --> C ``` ### Sıralama Diyagramları Mermaid sadece akış şemaları için değil. Sistemler arasındaki etkileşimleri görselleştirmek için sıralama diyagramları da oluşturabilirsiniz. ```mermaid sequenceDiagram participant Müşteri participant NotRich participant Sunucu Müşteri->>NotRich: Notu Düzenle NotRich->>Sunucu: Verileri Kaydet Sunucu-->>NotRich: Kaydet Onaylandı NotRich-->>Müşteri: UI Güncellendi ``` --- ## 💡 NoteRich Kullanıcıları İçin Pro Tavsiyeleri 1. **Özel Karakterlerin Kaçınılması:** Eğer düğüm metniniz `[]` veya `()` gibi özel karakterler içeriyorsa, metni tırnaklar içinde belirtin. ```mermaid graph TD A["[Düğüm]"] --> B["(Düğüm)]"] ``` 2. **Resmi Kopyalama:** Diyagramınız render olduktan sonra, yükseltilmiş araç çubuğunu göstermek için üzerine tıklayın. **Resmi Kopyalama** butonunu kullanarak diyagramı Slack, Notion veya e-posta gibi diğer uygulamalara kopyalayabilirsiniz. 3. **SVG Dosyası İndirme:** Profesyonel kullanıcılar, sunumlarda veya yayınlarda kullanılmak üzere yüksek kaliteli SVG dosyası olarak diyagramı indirebilirler. --- ## ❓ Sorun Giderme * **Diyagramın Görüntülenmemesi mi?** Önizleme penceresindeki hata göstergesini kontrol edin. Yaygın sorunlar arasında eksik kapanış parantezleri `]` veya yanlış çizgi sözdizimi bulunur. * **Sözdizim Hataları mı?** Doğru Mermaid sürümü sözdizimini kullanıyor olduğunuzdan emin olun. NoteRich, Mermaid.js’in en güncel stabil sürümünü kullanır. Emin olmadığınız durumlarda [resmi dokümantasyona](https://mermaid.js.org/intro/) başvurun. * **OCR Doğruluğu mu?** OCR sonucu mükemmel değilse, AI Asistanı kullanarak kodu düzeltin. Kaba OCR çıktısını kopyalayabilir ve AI’den "Mermaid sözdizimini düzeltmesini" isteyebilirsiniz. --- ## 🏁 Sonuç NoteRich’teki Mermaid.js, süreçleri ve sistemleri belgeleme şeklinizi değiştirir. Diyagramlarınızı kod olarak saklayarak, her zaman güncel, kolayca değiştirilebilir ve bilgi tabanınızla sorunsuz bir şekilde entegre olmasını sağlarsınız. AI üretimi ve OCR tarama sayesinde karmaşık görsel öğeler oluşturmak artık hiç olmadığı kadar kolay. Bugün fikirlerinizi görselleştirmeye başlayın! ---