# Jak použít Mermaid.js pro vzory v NoteRich – Kompletní návod Vizualizace složitých procesů, systémových architektur nebo rozhodovacích stromů může být obtížná pouze pomocí textu. **Mermaid.js** je výkonný nástroj pro vytváření diagramů a grafů v JavaScriptu, který vám umožňuje vytvářet diagramy pomocí jednoduchých textových definic. V **NoteRich** jsme integrovali Mermaid.js přímo do editoru, což vám umožňuje vytvářet profesionální vzory, sekvenční diagramy a další prvky bez opuštění vašich poznámkových souborů. Tento návod vás provede vším, co potřebujete vědět, abyste ovládli diagramy v NoteRich, včetně toho, jak použít AI a OCR k okamžité generování diagramů. --- ## 🚀 Proč používat Mermaid v NoteRich? * **Textová definice:** Definujte své diagramy pomocí kódu, což usnadňuje kontrolu verzí a úpravu diagramů. * **Přehled v reálném čase:** Vidíte své změny okamžitě, když píšete. * **Všestrannost:** Podporuje vzory, sekvenční diagramy, třídové diagramy, stavové diagramy, Ganttovy diagramy a mnoho dalších. * **AI a OCR:** Generujte diagramy z popisů v přirozeném jazyce nebo skenováním existujících obrázků. * **Lokální uložení:** Definice diagramů jsou uloženy lokálně ve vašich poznámkových souborech, což zajišťuje soukromí a možnost používání offline. --- ## 📝 Začátek: Vložení diagramu Mermaid Existují tři hlavní způsoby vložení diagramu Mermaid do NoteRich: ### Metoda 1: Příkaz `/` 1. Umístěte kurzor na místo, kde chcete vložit diagram. 2. Zadejte `/`, abyste otevřeli výběr komponent. 3. Vyhledejte **„Mermaid“** nebo **„Diagram“**. 4. Vyberte **„Mermaid Diagram“** z seznamu. ### Metoda 2: Nástrojová lišta 1. Klikněte na tlačítko **„Vložit“** v nástrojové lišti. 2. Přepněte do sekce **„Vizualizace“** nebo **„Diagramy“**. 3. Klikněte na **„Mermaid“**. ### Metoda 3: AI Asistent 1. Otevřete **„AI Asistent“** (příkaz `/ai` nebo nástrojová lišta). 2. Popište diagram, který chcete (např. „Vytvořte vzor pro proces přihlášky uživatele“). 3. AI vám generuje kód Mermaid, který můžete přímo vložit do vaší poznámky. Po vložení se zobrazí modul konfigurace s editorom kódu a okno s přehledem diagramu. --- ## 🛠️ Interfacer Mermaid Editoru Mermaid editor v NoteRich je navržen pro efektivitu: * **Oblast kódu:** Monospaced textová oblast, kde zapisujete syntaxi Mermaid. * **Přehled v reálném čase:** Real-time renderování diagramu. Pokud je chyba syntaxe, zobrazí se obrazovka s chybou, která vám pomůže vyřešit problém. * **Ikona s nápovědou:** Klikněte na ikonu `?` vedle „Kód diagramu“, abyste otevřeli oficiální [ dokumentace Mermaid.js](https://mermaid.js.org/intro/), kde najdete podrobné reference syntaxi. * **Tlačítko pro potvrzení:** Uložíte diagram a vložíte ho do poznámky. > **Tip:** Můžete dvojklikem na jakýkoliv existující diagram Mermaid v vaší poznámce znovu otevřít editor a provést změny. --- ## 📊 Základní syntaxe vzorů Vzory jsou nejčastější použití Mermaid. Zde je jak vytvořit vzory. ### 1. Definice směru Začněte definováním směru průběhu: * `graph TD`: Vrchno-dolní směr * `graph LR`: Vlevo-pravé směr * `graph BT`: Dolní-vrchní směr * `graph RL`: Pravoto-pravé směr ### 2. Přidání uzlů Uzly jsou definovány ID a štítkem. ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: Rámečkový uzel. * `(Text)`: Kulatý rámečkový uzel. * `((Text))`: Kroužkový uzel. * `{Text}`: Rhombus (rozhodovací uzel). * `[[Text]]`: Subrutina. ### 3. Spojování uzlů * `-->`: Pevná šipka. * `-.->`: Šipka s čárou. * `==>`: tlustá šipka. * `-- Text -->`: Šipka s štítkem. --- ## 🤖 Generování diagramů s AI Nechcete psát kód? Nechte to AI v NoteRich udělat za vás. 1. Otevřete **„AI Asistent“**. 2. Zadejte pokyn jako: *„Vytvořte Mermaid sekvenční diagram pro zákazníka, který objednává online.“* 3. AI vám vrátí blok kódu jako tento: ```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. Vytáhněte kód nebo použijte tlačítko **„Vložit“**, pokud je k dispozici v AI rozhraní, abyste ho mohli vložit do vaší poznámky. --- ## 📸 OCR: Skenování ručně vytvořených nebo vytištěných diagramů Máte fotografii tabulek nebo vytištěný vzor? **NoteRich’s Note Scanner (OCR)** dokáže tento obrázek převést na editovatelný kód Mermaid. 1. Otevřete **„AI Asistent“** a vyberte **„Note Scanner (OCR)“**. 2. Přetečte obrázek ručně vytvořeného nebo vytištěného diagramu. 3. V pokynu určete: *„Převeďte tento obrázek na kód Mermaid.js.“* 4. AI analyzuje strukturu obrázku a generuje odpovídající syntaxi Mermaid. 5. Prohlížejte generovaný kód v editoru a upravujte jakékoliv drobné chyby v rozpoznávání textu. > **Poznámka:** Pro nejlepší výsledky ujistěte se, že obrázek je čistý a text je čitelný. Složité ručně vytvořené nákresy mohou potřebovat nějakou manuální úpravu po konverzi. --- ## 💡 Pokročilé funkce pro uživatele NoteRich ### Stylizace uzlů Můžete upravovat vzhled konkrétních uzlů pomocí CSS tříd nebo vnitřních stylů. ```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 ``` ### Subgrapy Související uzly můžete sdružovat pro lepší organizaci. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### Sekvenční diagramy Mermaid není pouze pro vzory. Můžete také vytvářet sekvenční diagramy pro vizualizaci interakcí mezi systémy. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Edit Note NoteRich->>Server: Save Data Server-->>NoteRich: Confirm Save NoteRich-->>User: Update UI ``` --- ## 💡 Protipy pro uživatele NoteRich 1. **Vyhněte se speciálním znakům:** Pokud text uzlu obsahuje speciální znaky jako `[]` nebo `()`, obalte text do uvozovky. ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)"] ``` 2. **Kopírování jako obrázek:** Jakmile je diagram renderován, klikněte na něj, aby se otevřela nástrojová lišta. Použijte tlačítko **„Kopírovat obrázek“**, abyste mohli vložit diagram do dalších aplikací, jako je Slack, Notion nebo e-mail. 3. **Stáhnutí SVG:** Profi uživatelé mohou stáhnout diagram jako kvalitní SVG soubor pro použití v prezentacích nebo publikacích. --- ## ❓ Řešení problémů * **Diagram se nevýbírá?** Zkontrolujte chybový obraz v okno s přehledem. Běžné problémy zahrnují chybějící koncové závorky `]` nebo nesprávnou syntaxi šipek. * **Chyby syntaxe?** Ujistěte se, že používáte správnou verzi syntaxi Mermaid. NoteRich používá nejnovější stabilní verzi Mermaid.js. Pokud si nejste jisti, podívejte se na [oficiální dokumentaci](https://mermaid.js.org/intro/). * **Přesnost OCR?** Pokud výsledek OCR není dokonalý, použijte AI Asistenta k upravování kódu. Můžete vložit hrubý výstup OCR a požádat AI, aby „opravil syntaxi Mermaid“. --- ## 🏁 Závěr Mermaid.js v NoteRich změní způsob, jakým dokumentujete procesy a systémy. Tím, že udržujete diagramy jako kód, zajistíte, že budou vždy aktuální, snadno upravitelné a budou bezproblémově integrovány s vaší znalostní bází. S AI generováním a OCR skenováním není vytváření složitých vizuálních prvků nikdy tak jednoduché. Začněte vizualizovat své nápady již dnes! ---