# Hoe je Mermaid.js gebruikt voor flowcharts in NoteRich – Compleet instructierichtlijnen Het visualiseren van complexe processen, systeemarchitecturen of besluitbomen kan moeilijk zijn met alleen tekst. **Mermaid.js** is een krachtig JavaScript-basisexperiment dat je in staat stelt om diagrammen te maken met behulp van eenvoudige tekstdefinities. In **NoteRich** hebben we Mermaid.js rechtstreeks geïntegreerd in de editor, zodat je professionele flowcharts, sequentiediagrammen en meer kunt maken zonder je notities te verlaten. Deze gids zal je alle informatie geven die je nodig hebt om Mermaid-diagrammen in NoteRich te beheersen, inclusief hoe je AI en OCR kunt gebruiken om diagrammen onmiddellijk te genereren. --- ## 🚀 Waarom gebruiken we Mermaid in NoteRich? * **Tekstbasierend:** Definieer je diagrammen met behulp van code, waardoor het gemakkelijk te beheren en te wijzigen is. * **Live preview:** Zie je wijzigingen onmiddellijk terwijl je typt. * **Multifunctioneel:** Handelt met flowcharts, sequentiediagrammen, klassediagrammen, staatdiagrammen, Gantt-diagrammen en meer. * **Gebaseerd op AI en OCR:** Genereert diagrammen op basis van natuurlijke taalbeschrijvingen of door bestaande afbeeldingen te scannen. * **Lokale opslag:** Je diagramdefinities worden lokaal opgeslagen in je notities, waardoor privacy gewaarborgd is en je offline kunt werken. --- ## 📝 Beginnen: Invoegen van een Mermaid-diagram Er zijn drie manieren om een Mermaid-diagram in NoteRich in te voegen: ### Methode 1: De slash-commando (`/`) 1. Plaats je cursor op de plek waar je het diagram wilt plaatsen. 2. Typ `/` om de componentenselector te openen. 3. Zoek naar **"Mermaid"** of **"Diagram"**. 4. Kies **Mermaid Diagram** uit de lijst. ### Methode 2: De toolbar 1. Klik op de **Insert**-knop in de toolbar. 2. Ga naar de **Visualisatie** of **Diagrammen**-sectie. 3. Klik op **Mermaid**. ### Methode 3: AI-assistent 1. Open de **AI-assistent** (via `/ai` of de toolbar). 2. Beschrijf het diagram dat je wilt (bijv. "Maak een flowchart voor een gebruikersinlogproces"). 3. De AI zal de Mermaid-code voor je genereren, die je vervolgens direct in je notities kunt invoegen. Zodra het diagram is ingevoerd, zal er een configuratiescherm verschijnen met een code-editor en een livepreviewvenster. --- ## 🛠️ De interface van de Mermaid-editor De Mermaid-editor in NoteRich is ontworpen voor efficiëntie: * **Codegebied:** Een monospaced tekstgebied waar je je Mermaid-syntaxis schrijft. * **Livepreview:** Een realtimeweergave van je diagram. Als er een syntaxisfout is, zal er een foutoverlay verschijnen om je te helpen bij het debuggen. * **Hulpicon:** Klik op het `?`-icon naast "Diagramcode" om de officiële [Mermaid.js documentatie](https://mermaid.js.org/intro/) te openen voor gedetailleerde syntaxisreferenties. * **Bevestigingsknop:** Slaat je diagram op en voegt deze toe aan je notities. > **Tip:** Je kunt opnieuw de editor openen door op een bestaand Mermaid-diagram in je notities te klikken. --- ## 📊 Basis-syntaxis voor flowcharts Flowcharts zijn de meest voorkomende toepassing voor Mermaid. Hieronder vind je hoe je ze moet maken. ### 1. Definieer de richting Begin met het definiëren van de richting van de stroom: * `graph TD`: Top-Down * `graph LR`: Left-Right * `graph BT`: Bottom-Top * `graph RL`: Right-Left ### 2. Voeg knopen toe Knopen worden gedefinieerd door een ID en een label. ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Ja| D[End] C -->|Nee| B ``` * `[Text]`: Rechthoekige knop. * `(Text)`: Rondere rechthoek. * `((Text))`: Cirkel. * `{Text}`: Rhombus (Beslissing). * `[[Text]]`: Subroutines. ### 3. Verbind knopen * `-->`: Stevige pijl. * `-.->`: Streepvormige pijl. * `==>`: Dikke pijl. * `-- Text -->`: Pijl met label. --- ## 🤖 AI-gebaseerde diagramgenerering Wil je geen code schrijven? Laat NoteRich's AI dat voor je doen. 1. Open de **AI-assistent**. 2. Typ een opdracht zoals: *"Genereer een Mermaid-sequentiediagram voor een klant die een bestelling plaatst."* 3. De AI zal een codeblok als deze teruggeven: ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: Bestelling plaatsen Website->>Database: Inventaris controleren Database-->>Website: Inventaris beschikbaar Website-->>Customer: Bestelling bevestigd ``` 4. Kopiëer de code of gebruik de "Insert"-knop om hem toe te voegen aan je notities. --- ## 📸 OCR: Scannen van handgeschreven of gedrukte diagrammen Heb je een foto van een whiteboard of een gedrukte flowchart? NoteRich's **Note Scanner (OCR)** kan deze omzetten in bewerkbare Mermaid-code. 1. Open de **AI-assistent** en selecteer **Note Scanner (OCR)**. 2. Upload een afbeelding van je handgeschreven of gedrukte diagram. 3. Geef in de opdracht: *"Omzet deze afbeelding om in Mermaid.js flowchartcode."* 4. De AI zal de structuur van de afbeelding analyseren en de corresponderende Mermaid-syntaxis genereren. 5. Raadpleeg de gegenereerde code in de editor en corrigeer eventuele kleine fouten. > **Opmerking:** Voor de beste resultaten moet je ervoor zorgen dat de afbeelding duidelijk is en de tekst leesbaar is. Complexe handgeschreven tekeningen mogen na converteren nog wat worden aangepast. --- ## 🎨 Avanceerde functies ### Styling van knopen Je kunt het uiterlijk van specifieke knopen aanpassen met CSS-classen of inline-stijlen. ```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 Voeg gerelateerde knopen samen voor een betere organisatie. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### Sequentiediagrammen Mermaid is niet alleen bedoeld voor flowcharts. Je kunt ook sequentiediagrammen maken om interacties tussen systemen te visualiseren. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Notities bewerken NoteRich->>Server: Gegevens opslaan Server-->>NoteRich: Opslag bevestigd NoteRich-->>User: UI bijwerken ``` --- ## 💡 Pro-tipen voor NoteRich-gebruikers 1. **Vermijd speciaaltekens:** Als je nodetekst speciaaltekens bevat, zoals `[]` of `()`, moet je de tekst in quotes plaatsen. ```mermaid graph TD A["Node met [brackets]"] --> B["Node met (parentheses)] ``` 2. **Kopiëren als afbeelding:** Zodra je diagram is gerenderd, klik je op het diagram om de floating toolbar te tonen. Gebruik de **Kopiëren als afbeelding**-knop om het diagram te kopiëren naar andere applicaties zoals Slack, Notion of e-mail. 3. **Download als SVG:** Professionele gebruikers kunnen het diagram als een hoge-kwaliteit SVG-bestand downloaden voor gebruik in presentaties of publicaties. --- ## ❓ Oplossing van problemen * **Diagram niet weergegeven?** Kijk naar de foutoverlay in het previewvenster. Veelvoorkomende problemen zijn het ontbreken van sluitende tekenen `]` of onjuiste pijl-syntaxis. * **Syntaxisfouten?** Zorg ervoor dat je de juiste Mermaid-versies gebruikt. NoteRich gebruikt de nieuwste stabiele versie van Mermaid.js. Raadpleeg de [officiële documentatie](https://mermaid.js.org/intro/) als je niet zeker bent. * **OCR-nauwkeurigheid?** Als de OCR-resultaten niet perfect zijn, gebruik de AI-assistent om de code te verbeteren. Je kunt de onvolledige OCR-output kopiëren en vragen aan de AI om de Mermaid-syntaxis te corrigeren. --- ## 🏁 Conclusie Mermaid.js in NoteRich transformeert de manier waarop je processen en systemen documenteert. Door je diagrammen als code te houden, zorgen we ervoor dat ze altijd up-to-date blijven, gemakkelijk te wijzigen zijn en perfect geïntegreerd zijn met je kennisbank. Met AI-generatie en OCR-scannen is het nooit meer gemakkelijk om complexe visuele elementen te maken. Begin met het visualiseren van je ideeën vandaag nog! ---