# Paano Gamitin ang Mermaid.js para sa Diagrama ng Proseso sa NoteRich – Buong Tutorial Ang paglalarawan ng mga komplikadong proseso, arkitektura ng sistema, o mga punsyon ay maaaring maging mahirap gamit lamang ang teksto. **Mermaid.js** ay isang makapangyarihang tool na batay sa JavaScript para sa paglikha ng mga diagrama at chart. Sa **NoteRich**, ang Mermaid.js ay direktang isinama sa editor, na nagpapahintulot sa iyong lumikha ng propesyonal na diagrama ng proseso, sequence diagram, at marami pang iba nang hindi kinakailangang lumabas sa iyong mga tala. Ang gabay na ito ay magbibigay sa iyo ng detalyadong mga tagubilin kung paano gumamit ng Mermaid diagram sa NoteRich, kabilang ang paraan upang gamitin ang AI at OCR upang makabuo ng mga diagrama sa sandaling ito. --- ## 🚀 Bakit Gamitin ang Mermaid sa NoteRich? * **Batay sa Teksto:** Tukuyin ang iyong mga diagrama gamit ang code, na ginagawang madaling kontrolin at baguhin ang mga ito. * **Live Preview:** Makita ang iyong mga pagbabago sa sandaling ikaw ay pumipili ng teksto. * **Malawak na Mga Paggamit:** Sinusuportahan ang diagrama ng proseso, sequence diagram, class diagram, state diagram, Gantt chart, at marami pang iba. * **Sundan ang AI at OCR:** Makabuo ng mga diagrama mula sa natural na wika o sa pamamagitan ng pag-scan sa mga umiiral na larawan. * **Lokal na Pagsasama-sama:** Ang iyong mga diagrama ay nakaimbak sa lokal na bahagi ng iyong mga tala, na ginagawang ligtas at maaaring magamit nang offline. --- ## 📝 Simula: Pagpapasok ng Diagrama ng Mermaid Mayroong tatlong pangunahing paraan upang makapasok ng diagrama ng Mermaid sa NoteRich: ### Paraan 1: Ang Komandong Slash (`/`) 1. Ilagay ang iyong cursor sa lugar kung saan mo gusto ang diagrama. 2. Type `/` upang buksan ang component picker. 3. Search para sa **"Mermaid"** o **"Diagram"**. 4. Piliin ang **Mermaid Diagram** mula sa listahan. ### Paraan 2: Ang Toolbar 1. Pag-click sa **Insert** button sa toolbar. 2. Pumunta sa **Visualization** o **Diagrams** section. 3. Pag-click sa **Mermaid**. ### Paraan 3: AI Assistant 1. Buksan ang **AI Assistant** (sa pamamagitan ng `/ai` o sa toolbar). 2. Tukuyin ang diagrama na gusto mo (halimbawa, "Lumikha ng diagrama ng proseso para sa pag-log in ng user"). 3. Ang AI ay makabuo ng code ng Mermaid para sa iyo, na maaari mong idagdag sa iyong tala. Kapag idinagdag, isang configuration modal ang lilitaw na may code editor at isang live preview window. --- ## 🛠️ Ang Interaksyon ng Editor ng Mermaid Ang editor ng Mermaid sa NoteRich ay dinisenyo para sa kahusayan: * **Code Area:** Isang monospaced text area kung saan ikaw ay sumusulat ng iyong Mermaid syntax. * **Live Preview:** Real-time na pagliliko ng iyong diagrama. Kung mayroong syntax error, isang error overlay ang lilitaw upang makatulong sa iyong pag-diagnose. * **Help Icon:** Pag-click sa `?` icon sa tabi ng "Diagram Code" upang buksan ang opisyal na [Mermaid.js Documentation](https://mermaid.js.org/intro/) para sa detalyadong syntax references. * **Confirm Button:** Inililipat ang iyong diagrama at idinagdag ito sa iyong tala. > **Tip:** Maaari kang mag-double-click sa anumang umiiral na diagrama ng Mermaid sa iyong tala upang buksan muli ang editor at gawin ang mga pagbabago. --- ## 📊 Basic Syntax ng Diagrama ng Proseso Ang diagrama ng proseso ay ang pinakakaraniwang kaso para sa Mermaid. Narito kung paano ito lumilikha. ### 1. Pagtukoy sa Direksyon Simulan sa pagtukoy sa direksyon ng proseso: * `graph TD`: Top-Down * `graph LR`: Left-Right * `graph BT`: Bottom-Top * `graph RL`: Right-Left ### 2. Pagdaragdag ng Nodes Ang mga node ay tinukoy gamit ang ID at label. ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: Rectangle node. * `(Text)`: Rounded rectangle. * `((Text))`: Circle. * `{Text}`: Rhombus (Decision). * `[[Text]]`: Subroutine. ### 3. Pagkokonekta ng Nodes * `-->`: Solid arrow. * `-.->`: Dotted arrow. * `==>`: Thick arrow. * `-- Text -->`: Arrow na may label. --- ## 🤖 AI-Powered Diagrama Paglikha Ayaw mong sumulat ng code? Hayaan ang AI ng NoteRich na gawin ito para sa iyo. 1. Buksan ang **AI Assistant**. 2. Type ng isang prompt tulad ng: *"Lumikha ng sequence diagram ng Mermaid para sa isang customer na nagpapareserba online."* 3. Ang AI ay magbibigay ng isang code block tulad ng ito: ```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. Kopyahin ang code o gamitin ang "Insert" button kung available sa iyong AI interface upang idagdag ito sa iyong tala. --- ## 📸 OCR: Scan Handwritten o Printed Diagrama Mayroon kang larawan ng whiteboard o printed diagrama? Ang **Note Scanner (OCR)** ng NoteRich ay maaaring gawing editable na Mermaid code. 1. Buksan ang **AI Assistant** at piliin ang **Note Scanner (OCR)**. 2. I-upload ang larawan ng iyong hand-drawn o printed diagrama. 3. Sa prompt, tukuyin: *"I-convert ang larawan na ito sa Mermaid.js flowchart code."* 4. Ang AI ay mag-analisa sa istruktura ng larawan at makabuo ng kaukulang Mermaid syntax. 5. Tingnan ang nilikha na code sa editor at ayusin ang anumang maliit na pagkakamali sa pagkilala. > **Tandaan:** Para sa pinakamahusay na resulta, siguruhin na ang larawan ay malinaw at ang teksto ay malinaw. Ang mga komplikadong hand-drawn na eskets ay maaaring mangailangan ng kaunting pag-aayos matapos ang pag-convert. --- ## 🎨 Advanced na Mga Katangian ### Styling Nodes Maaari mong i-customize ang itsura ng mga partikular na node gamit ang CSS classes o inline styles. ```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 ``` ### Subgraphs Pagsamahin ang mga kaugnay na node para sa mas magandang organisasyon. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### Sequence Diagrams Ang Mermaid ay hindi lamang para sa diagrama ng proseso. Maaari ka ring lumikha ng sequence diagram upang makita ang mga interaksyon sa pagitan ng mga sistema. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Edit Note NoteRich->>Server: Save Data Server-->>NoteRich: Confirm Save NoteRich-->>User: Update UI ``` --- ## 💡 Pro Tips para sa mga User ng NoteRich 1. **Escape Special Characters:** Kung ang teksto ng node mo ay naglalaman ng mga espesyal na karakter tulad ng `[]` o `()`, balutin ang teksto sa mga panipi. ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)"] ``` 2. **Copy as Image:** Kapag ang diagrama ay nabuo na, pag-click sa diagrama upang makita ang floating toolbar. Gamitin ang **Copy Image** button upang mag-paste ng diagrama sa ibang aplikasyon tulad ng Slack, Notion, o email. 3. **Download SVG:** Mga prop user ay maaaring download ang diagrama bilang isang high-quality SVG file para sa paggamit sa presentasyon o publikasyon. --- ## ❓ Pagtugon sa mga Problema * **Diagrama Hindi Nalilikha?** Tingnan ang error overlay sa preview window. Kabilang sa mga karaniwang problema ang pagkawala ng closing brackets `]` o maling syntax ng arrow. * **Syntax Errors?** Siguruhing ginagamit mo ang tamang Mermaid syntax. Ang NoteRich ay gumagamit ng pinakabagong stable na bersyon ng Mermaid.js. Kung hindi sigurado, tingnan ang [opisyal na dokumentasyon](https://mermaid.js.org/intro/). * **OCR Accuracy?** Kung ang resulta ng OCR ay hindi perpekto, gamitin ang AI Assistant upang ayusin ang code. Maaari kang mag-paste ng rough OCR output at hilingin sa AI na "I-ayos ang Mermaid syntax." --- ## 🏁 Konklusyon Ang Mermaid.js sa NoteRich ay nagpapabago sa paraan ng iyong pagdokumentasyon ng mga proseso at sistema. Sa pamamagitan ng pag-iimbak ng iyong mga diagrama bilang code, tinitiyak mo na ang mga ito ay palaging updated, madaling baguhin, at maayos na nakikipag-ugnayan sa iyong knowledge base. Sa pamamagitan ng AI generation at OCR scanning, ang paglikha ng komplikadong visual na mga larawan ay hindi na gaanong mahirap. Simulan ang paglalarawan ng iyong mga ideya ngayon! ---