Noterich இல் ஃப்ளோசார்ட்களுக்கு Mermaid.js ஐ எவ்வாறு பயன்படுத்துவது – முழுமையான பயிற்சி

# NoteRich-ல் ஃப்ளோவர்ட்களை உருவாக்குவதற்கு Mermaid.js ஐ எப்படி பயன்படுத்துவது – முழுமையான வழிகாட்டி சிக்கலான செயல்முறைகள், அமைப்பு கட்டுமானங்கள் அல்லது முடிவு மரங்களை வெறும் உரைகளால் விவரிப்பது கடினம். **Mermaid.js** என்பது ஜாவர்ஸ்கிராம் மற்றும் சார்ட்களை உருவாக்கும் ஒரு சக்திவாய்ந்த டூல். இது எளிய உரை வரையறைகளைப் பயன்படுத்தி டியூல்களை உருவாக்க உதவுகிறது. **NoteRich** இல், Mermaid.js ஐ நேரடியாக எட்ஜரில் இணைத்துள்ளோம். இதனால், உங்கள் நோட்ஸிலிருந்து வேறு எங்கும் செல்லாமலேயே நிபுணத்துவ ஃப்ளோவர்ட்கள், சியன்சிஸ் டியூல்கள் மற்றும் பலவற்றை உருவாக்க முடியும். இந்த வழிகாட்டி, NoteRich இல் Mermaid டியூல்களை முறையாகப் பயன்படுத்துவதற்கான அனைத்து விவரங்களையும் உங்களுக்கு வழங்கும். AI மற்றும் OCR ஐப் பயன்படுத்தி டியூல்களை உடனே உருவாக்குவது எப்படி என்பதையும் இந்த வழிகாட்டி விளக்கும். --- ## 🚀 NoteRich இல் Mermaid ஐ ஏன் பயன்படுத்த வேண்டும்? * **உரை அடிப்படையில்:** உங்கள் டியூல்களை கோடுகளால் வரையுங்கள். இதனால், அவற்றை கட்டுப்படுத்தவும் மாற்றவும் எளிமையாக இருக்கும். * **லைவ் ப்ரீவியூ:** நீங்கள் டைப் செய்யும்போது, உங்கள் மாற்றங்களை உடனே காணலாம். * **பல்வேறு வகைகளை ஏற்றுக்கொள்ளும் திறன்:** ஃப்ளோவர்ட்கள், சியன்சிஸ் டியூல்கள், க்ளாஸ் டியூல்கள், ஸ்டேட் டியூல்கள், காண்ட் டியூல்கள் மற்றும் பலவற்றை ஏற்றுக்கொள்ளும். * **AI மற்றும் OCR அடிப்படையில் உருவாக்கப்பட்ட டியூல்கள்:** இயற்கையான மொழியின் விவரணைகள் அல்லது இருக்கும் படங்களை ஸ்கேன் செய்து டியூல்களை உருவாக்கும். * **உள்ளூர் முறை:** உங்கள் டியூல்களின் வரையறைகள் உங்கள் நோட்ஸில் உள்ளூராக சேமிக்கப்படும். இதனால், தனியுரிமை மற்றும் ஆஃப்ளான் அணுகல் உறுதி. --- ## 📝 தொடங்குவது: Mermaid டியூலை சேர்ப்பது NoteRich இல் Mermaid டியூலை சேர்ப்பதற்கு மூன்று முக்கிய முறைகள் உள்ளன: ### முறை 1: `/` கமாண்ட் 1. டியூலை சேர்க்க விரும்பும் இடத்தில் கர்சர் இடம் கொடுங்கள். 2. `/` டைப் செய்து, கம்போனென்ட் பியர்டர் திறக்கவும். 3. **"Mermaid"** அல்லது **"Diagram"** ஐ தேடுங்கள். 4. பட்டியலிலிருந்து **Mermaid Diagram** ஐ தேர்வு செய்யுங்கள். ### முறை 2: டூல்பார் 1. டூல்பாரில் **Insert** பொத்தானை கிளிக் செய்யுங்கள். 2. **Visualization** அல்லது **Diagrams** பிரிவுக்குச் செல்லுங்கள். 3. **Mermaid** ஐ கிளிக் செய்யுங்கள். ### முறை 3: AI உதவி 1. `/ai` அல்லது டூல்பார் வழியாக **AI Assistant** ஐ திறக்கவும். 2. நீங்கள் உருவாக்க விரும்பும் டியூலை விவரியுங்கள் (உதாரணம்: “பயனர் லாகின் செயல்முறைக்கான ஃப்ளோவர்டை உருவாக்குங்கள்”). 3. AI உங்களுக்காக Mermaid கோடை உருவாக்கும். இதை நீங்கள் உங்கள் நோடில் நேரடியாக சேர்க்கலாம். இடம் சேர்க்கப்பட்ட பிறகு, ஒரு கோடு எட்ஜர் மற்றும் லைவ் ப்ரீவியூ விண்டோ உள்ள ஒரு கான்ஃபிகேரியம் தோன்றும். --- ## 🛠️ Mermaid எட்ஜர் இடைமுகம் NoteRich இல் Mermaid எட்ஜர், திறனை முன்னேற்றுவதற்காக வடிவமைக்கப்பட்டுள்ளது: * **கோடு பகுதி:** உங்கள் Mermaid சின்டாக்ஸை எழுதுவதற்கான ஒரு டெக்ஸ்ட் அவெரியா. * **லைவ் ப்ரீவியூ:** உங்கள் டியூலின் ரெய்டின் இன் ரெய்ட். சின்டாக்ஸ் எதிர்ப்பார்ப்பு இருந்தால், எதிர்ப்பார்ப்பு ஓவர்லேப் தோன்றும். * **ஹெல்ப் இகான்:** “Diagram Code” அருகில் உள்ள `?` இகானை கிளிக் செய்யுங்கள். இது [Mermaid.js Documentation](https://mermaid.js.org/intro/) இல் விரிவான சின்டாக்ஸ் முன்னுரைகளை திறக்கும். * **உறுதிப்படுத்தும் பொத்தான்:** உங்கள் டியூலை சேமித்து, நோடில் சேர்க்கவும். > **ஸ்டேட்:** நீங்கள் உங்கள் நோடில் உள்ள எந்த Mermaid டியூலையும் டூப் கிளிக் செய்தால், எட்ஜரை மீண்டும் திறக்கவும் மாற்றங்களை செய்யவும் முடியும். --- ## 📊 அடிப்படை ஃப்ளோவர்ட் சின்டாக்ஸ் ஃப்ளோவர்ட்கள், Mermaid இன் மிகவும் பொதுவான பயன்பாடுகள். இவற்றை எப்படி உருவாக்குவது என்பதை இங்கே காணலாம். ### 1. திசையை வரையறு செய்தல் ஃப்ளோவர்டின் திசையை வரையறுக்கவும்: * `graph TD`: டாப்-டவுன் * `graph LR`: லெஃப்ட்-ரைட் * `graph BT`: பாண்ட்-டாப் * `graph RL`: ரைட்-லெஃப்ட் ### 2. நோடுகளை சேர்த்தல் நோடுகளை ஒரு ID மற்றும் லேபிள் மூலம் வரையறுக்கவும். ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: ரீக்கர் நோட். * `(Text)`: ரீக்கர் நோட். * `((Text))`: சைகன். * `{Text}`: ரோம்பஸ் (டிஸிஷன்). * `[[Text]]`: சப்ரூட்யூரன். ### 3. நோடுகளை இணைத்தல் * `-->`: சாதாரண அணை. * `-.->`: டாட் அணை. * `==>`: டார்க் அணை. * `-- Text -->`: லேபிள் கொண்ட அணை. --- ## 🤖 AI அடிப்படையில் டியூல்களை உருவாக்குதல் கோடு எழுத விரும்பவில்லையா? NoteRich இன் AI உங்களுக்காக அதைச் செய்யும். 1. **AI Assistant** ஐ திறக்கவும். 2. “Customer placing an order online” என்ற ப்ரம்ப்ட் டைப் செய்யவும். 3. AI ஒரு கோட் பிரிவை உருவாக்கும். ```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. கோடை நகலெடுத்து, நீங்கள் உங்கள் நோடில் சேர்க்கவும். --- ## 📸 OCR: கையெழுத்து அல்லது அச்சிடப்பட்ட டியூல்களை ஸ்கேன் செய்தல் நீங்கள் ஒரு வெயிட்போர்ட் படம் அல்லது அச்சிடப்பட்ட ஃப்ளோவர்ட் வைத்திருக்கிறீர்களா? NoteRich இன் **Note Scanner (OCR)** அதை Mermaid கோடாக மாற்றும். 1. **AI Assistant** ஐ திறக்கவும் மற்றும் **Note Scanner (OCR)** ஐ தேர்வு செய்யவும். 2. உங்கள் கையெழுத்து அல்லது அச்சிடப்பட்ட டியூலின் படத்தை உருவுங்கள். 3. ப்ரம்ப்ட்டில் “இந்த படத்தை Mermaid.js ஃப்ளோவர்டாக மாற்றுங்கள்” என்று குறிப்பிடவும். 4. AI டியூலின் கட்டமைப்பை ஆய்வு செய்யும் மற்றும் சரியான Mermaid சின்டாக்ஸை உருவாக்கும். 5. எட்ஜரில் உருவாக்கப்பட்ட கோடை ஆய்வு செய்யவும் மற்றும் சிறிய ரெகனிகேஷன் தவறுகளை சரிசெய்யவும். > **குறிப்பு:** சிறந்த முடிவுகளுக்கு, படம் தெளிவாகவும் உரை தெளிவாகவும் இருக்க வேண்டும். சிக்கலான கையெழுத்து வரைபடங்களுக்கு, மாற்றத்திற்குப் பிறகு சில மனித மாற்றங்கள் தேவைப்படலாம். --- ## 🎨 மேம்படுத்தப்பட்ட விஷயங்கள் ### நோடுகளின் வடிவமைப்பு CSS க்ளாஸ்கள் அல்லது இன்லைன் ஸ்டைல்களைப் பயன்படுத்தி, குறிப்பிட்ட நோடுகளின் தோற்றத்தை மாற்றலாம். ```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 ``` ### சப்ரோகிராஃப்கள் தொடர்புடைய நோடுகளை ஒருங்கிணைத்து, சிறந்த ஒழுங்கை உருவாக்கலாம். ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### சியன்சிஸ் டியூல்கள் Mermaid ஃப்ளோவர்ட்களுக்கு மட்டுமல்ல, சில்வென்ஸ் டியூல்களையும் உருவாக்க முடியும். ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Edit Note NoteRich->>Server: Save Data Server-->>NoteRich: Confirm Save NoteRich-->>User: Update UI ``` --- ## 💡 NoteRich பயனர்களுக்கான பயனர் டிப்ஸ் 1. **சிறப்பு குறியீடுகளை விடுவிக்கவும்:** நீங்கள் உரையில் `[]` அல்லது `()` போன்ற சிறப்பு குறியீடுகளை வைத்திருந்தால், அவற்றை உரையில் இணைக்கவும். ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)"] ``` 2. **இமேஜாக நகலெடுத்தல்:** டியூல் ரெய்ட் ஆன பிறகு, அதை கிளிக் செய்து, ஃப்ளோட்டிங் டூல்பாரை காட்டவும். **Copy Image** பொத்தானைப் பயன்படுத்தி, டியூலை ஸ்லாக்ஸ், Notion அல்லது மெயில் போன்ற மூன்றாம் நிறுவனங்களில் நகலெடுக்கவும். 3. **SVG டவுன்:** மேம்பட்ட பயனர்கள், டியூலை உயர்தர SVG ஃபைலாக டவுன் செய்யலாம். இது உருவாக்கல் அல்லது பப்ளிகேஷன்களுக்கு பயன்படும். --- ## ❓ தீர்வு செய்தல் * **டியூல் ரெய்ட் ஆகவில்லையா?** ப்ரீவியூ விண்டோவில் எதிர்ப்பார்ப்பு ஓவர்லேப் டிவைனை சோதனை செய்யுங்கள். பொதுவான பிரச்சனைகள் `]` என்ற முடிவு இல்லாமை அல்லது தவறான அணை சின்டாக்ஸ். * **சின்டாக்ஸ் தவறுகளா?** சரியான Mermaid சின்டாக்ஸ் வரையறையைப் பயன்படுத்துவதை உறுதி செய்யுங்கள். NoteRich, Mermaid.js இன் புதுப்புத்தாய்வு செய்யப்பட்ட வெர்ஷனை பயன்படுத்துகிறது. நீங்கள் உறுதியாக இல்லையென்றால், [அநுமதிக்கப்பட்ட ஆவணங்களை](https://mermaid.js.org/intro/) பார்க்கவும். * **OCR துல்லியம்?** OCR முடிவு சரியாக இல்லையென்றால், AI உதவியைப் பயன்படுத்தி கோடை மேம்படுத்தவும். உங்கள் கோர்ஸ் டவுன் டவுன் உருவாக்கப்பட்ட OCR முடிவை நகலெடுத்து, AI யிடம் “Mermaid சின்டாக்ஸை சரிசெய்யுங்கள்” என்று கேளுங்கள். --- ## 🏁 முடிவு NoteRich இல் Mermaid.js, நீங்கள் செயல்முறைகளையும் அமைப்புகளையும் டைப் செய்யும் விதத்தை மாற்றுகிறது. டியூல்களை கோடாக மாற்றுவதன் மூலம், அவை எப்போதும் நவீனமானவையாகவும், மாற்றுவதற்கு எளிமையானவையாகவும் இருக்கும். AI ஜெனரேஷன் மற்றும் OCR ஸ்கேனிங் மூலம், சிக்கலான விவரங்களை உருவாக்குவது இனி எளிமையானது. இன்றே உங்கள் யோசனைகளை விவரிப்பதற்கு தொடருங்கள்! ---