# Jak używać Mermaid.js do tworzenia diagramów w NoteRich – kompletny przewodnik Visualizacja złożonych procesów, architektur systemów czy drzew decyzji może być trudna, jeśli korzysta się tylko z tekstu. **Mermaid.js** to potężny narzędzie do tworzenia diagramów i wykresów opartego na JavaScriptie. Dzięki temu można tworzyć diagramy korzystając z prostych tekstowych definicji. W **NoteRich** integrowaliśmy Mermaid.js bezpośrednio z edytorem, dzięki czemu można tworzyć profesjonalne diagramy, diagramy sekwencji i wiele innych elementów bez konieczności opuszczenia swoich notatek. Ten przewodnik pomoże ci zrozumieć wszystko, co jest niezbędne do korzystania z diagramów Mermaid w NoteRich, w tym jak używać AI i OCR do natychmiastowego generowania diagramów. --- ## 🚀 Dlaczego używać Mermaid w NoteRich? * **Oparta na tekście:** Definiujesz diagramy za pomocą kodu, co ułatwia kontrolę i edycję. * **Preview w czasie rzeczywistym:** Widzisz zmiany natychmiast po wpisywaniu tekstu. * **Wielofunkcyjność:** Obsługuje diagramy, diagramy sekwencji, diagramy klasy, diagramy stanu, diagramy Gantta i wiele innych. * **Zaawansowana generacja diagramów za pomocą AI i OCR:** Diagramy można generować na podstawie opisów w naturalnym języku lub poprzez skanowanie istniejących zdjęć. * **Przechowywanie diagramów lokalnie:** Definicje diagramów przechowywane są lokalnie w notatkach, co zapewnia bezpieczeństwo i możliwość korzystania z diagramów bez dostępu do Internetu. --- ## 📝 Jak zacząć: Dodawanie diagramu Mermaid Istnieją trzy główne sposoby dodawania diagramu Mermaid w NoteRich: ### Sposób 1: Komenda `/` 1. Umieść kursor w miejscu, gdzie chcesz umieścić diagram. 2. Wpisz `/`, aby otworzyć wybierak komponentów. 3. Znajdź **„Mermaid”** lub **„Diagram”**. 4. Wybierz **„Mermaid Diagram”** z listy. ### Sposób 2: Narzędzie w narzędniku 1. Kliknij przycisk **Insert** w narzędniku. 2. Przejdź do sekcji **Visualization** lub **Diagrams**. 3. Kliknij **Mermaid**. ### Sposób 3: Pomoc AI 1. Otwórz **AI Assistant** (pomoc poprzez `/ai` lub narzędnik). 2. Opisz diagram, który chcesz tworzyć (np. „Twórz diagram procesu logowania użytkownika”). 3. AI generuje kod Mermaid, który możesz wtedy wstawić do swojej notatki. Po dodaniu diagramu pojawi się okno konfiguracji z edytorem kodu i okno preview w czasie rzeczywistym. --- ## 🛠️ Interfejs edytora Mermaid Edytor Mermaid w NoteRich został zaprojektowany z myślą efektywności: * **Obszar kodu:** Obszar tekstu, w którym wpisujesz składnię Mermaid. * **Preview w czasie rzeczywistym:** Real-time rendering diagramu. Jeśli występuje błąd w składni, pojawi się okno z informacją o błędzie, co ułatwia diagnozę. * **Ikona pomocy:** Kliknij ikonę `?` obok „Diagram Code”, aby otworzyć oficjalną dokumentację [Mermaid.js](https://mermaid.js.org/intro/) z szczegółowymi instrukcjami. * **Kućka potwierdzenia:** Zapisuje diagram i wstawia go do notatki. > **Wskazówka:** Możesz dwa razy kliknąć na dowolny diagram Mermaid w swojej notatce, aby ponownie otworzyć edytor i wprowadzić zmiany. --- ## 📊 Podstawowa składnia diagramu Diagramy są najczęściej używane w Mermaid. Oto jak je tworzyć. ### 1. Definiowanie kierunku Zacznij od definiowania kierunku przepływu: * `graph TD`: Góra-dół * `graph LR`: Lew-do-lew * `graph BT`: Dół-góra * `graph RL`: Praw-do-lew ### 2. Dodawanie węzłów Węzły definiowane są za pomocą ID i etykiety. ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: Węzeł prostokątny. * `(Text)`: Węzeł okrągły. * `((Text))`: Węzeł okrągły. * `{Text}`: Węzeł rombowy (decyzja). * `[[Text]]`: Subrutyna. ### 3. Połączenie węzłów * `-->`: Skierowanie stałe. * `-.->`: Skierowanie kreskowane. * `==>`: Skierowanie grube. * `-- Text -->`: Skierowanie z etykietą. --- ## 🤖 Generacja diagramów za pomocą AI Nie chcesz pisać kodu? Pozwól AI NoteRich, aby to zrobiło za ciebie. 1. Otwórz **AI Assistant**. 2. Wpisz polecenie typu: *„Załóż diagram sekwencyjny Mermaid dla klienta, który złoży zamówienie online.”* 3. AI zwróci ci kod w formie takiej jak poniższy przykład: ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: Place Order Website->>Database: Check Inventory Database-->>Website: Inventory Available Website-->>Customer: Order Confirmed ``` 4. Kopiuj kod lub użyj przycisku **Insert**, aby wstawić go do swojej notatki. --- ## 📸 OCR: Skanowanie rysunków ręcznych lub drukowanych Masz fotografię z tablicy czy rysunek drukowany? Narzędzie **NoteScanner (OCR)** NoteRich może przekształcić go w edytowalny kod Mermaid. 1. Otwórz **AI Assistant** i wybierz **NoteScanner (OCR)**. 2. Zainstaluj zdjęcie rysunku ręcznego lub drukowanego. 3. W poleceniu podaj: *„Przekształć to zdjęcie w kod diagramu Mermaid.”* 4. AI analizuje strukturę zdjęcia i generuje odpowiedni kod Mermaid. 5. Przeglądaj generowany kod w edytorze i popraw jedyne błędy w rozpoznawaniu. > **Uwaga:** Aby uzyskać najlepsze rezultaty, upewnij się, że zdjęcie jest wyraźne, a tekst czytelny. Złożone rysunki ręczne mogą wymagać kilku korekt po przetworzeniu. --- ## 🎨 Funkcje zaawansowane ### Stylizacja węzłów Możesz dostosować wygląd poszczególnych węzłów za pomocą klas CSS lub styleów wewnętrznych. ```mermaid graph LR A[Start] --> B[Process] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### Subgrafy Grupuj węzły, które są ze sobą powiązane, aby ułatwić organizację. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### Diagramy sekwencji Mermaid nie jest tylko do tworzenia diagramów. Możesz również tworzyć diagramy sekwencji, aby zvisualizować interakcje między systemami. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Edit Note NoteRich->>Server: Save Data Server-->>NoteRich: Confirm Save NoteRich-->>User: Update UI ``` --- ## 💡 Wskazówki dla użytkowników NoteRich 1. **Uwolnij specjalne znaki:** Jeśli tekst węzła zawiera specjalne znaki, np. `[]` lub `()`, umieść tekst w wiersz kodów. ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)"] ``` 2. **Kopiowanie jako obrazek:** Po wygenerowaniu diagramu kliknij go, aby otworzyć narzędzie. Użyj przycisku **Kopiowanie obrazka**, aby wstawić diagram do innych aplikacji, takich jak Slack, Notion czy e-mail. 3. **Pobranie SVG:** Użytkownicy z wyższej klasy mogą pobrać diagram jako wysokiej jakości plik SVG, który można używać w prezentacjach czy publikacjach. --- ## ❓ Rozwiązywanie problemów * **Diagram nie jest renderowany?** Sprawdź okno preview z błędami. Częste problemy to brak kresk w końcach lub błędne składnia skierowań. * **Błędy składni?** Upewnij się, że używasz poprawnej wersji Mermaid.js. NoteRich używa najnowszej stabilnej wersji Mermaid.js. Jeśli nie jesteś pewien, odwiedź [oficjalne dokumentację](https://mermaid.js.org/intro/). * **Precyzja OCR?** Jeśli wynik OCR nie jest idealny, użyj AI Assistant, aby poprawić kod. Możesz wstawić wynik OCR i poprosić AI o poprawienie składni Mermaid. --- ## 🏁 Wniosek Mermaid.js w NoteRich zmienia sposób dokumentowania procesów i systemów. Dzięki utrzymywaniu diagramów jako kodu, możesz mieć pewność, że są one zawsze aktualne, łatwe do modyfikowania i doskonale integrowane z twoją bazą wiedzy. Dzięki generowaniu za pomocą AI i skanowaniu za pomocą OCR, tworzenie złożonych wizualizacji stało się bardzo proste. Zaczynaj wyświetlanie swoich pomysłów już dziś! ---