# How to Use Mermaid.js for Flowcharts in NoteRich – Complete Tutorial Visualizing complex processes, system architectures, or decision trees can be challenging with text alone. **Mermaid.js** is a powerful JavaScript-based diagramming and charting tool that lets you create diagrams using simple text definitions. In **NoteRich**, we’ve integrated Mermaid.js directly into the editor, allowing you to generate professional flowcharts, sequence diagrams, and more without leaving your notes. This guide will walk you through everything you need to know to master Mermaid diagrams in NoteRich, including how to use AI and OCR to generate them instantly. --- ## 🚀 Why Use Mermaid in NoteRich? * **Text-Based:** Define your diagrams using code, making them easy to version control and edit. * **Live Preview:** See your changes instantly as you type. * **Versatile:** Supports flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, and more. * **AI & OCR Powered:** Generate diagrams from natural language descriptions or by scanning existing images. * **Local-First:** Your diagram definitions are stored locally in your notes, ensuring privacy and offline access. --- ## 📝 Getting Started: Inserting a Mermaid Diagram There are three primary ways to insert a Mermaid diagram in NoteRich: ### Method 1: The Slash Command (`/`) 1. Place your cursor where you want the diagram. 2. Type `/` to open the component picker. 3. Search for **"Mermaid"** or **"Diagram"**. 4. Select **Mermaid Diagram** from the list. ### Method 2: The Toolbar 1. Click the **Insert** button in the toolbar. 2. Navigate to the **Visualization** or **Diagrams** section. 3. Click on **Mermaid**. ### Method 3: AI Assistant 1. Open the **AI Assistant** (via `/ai` or the toolbar). 2. Describe the diagram you want (e.g., "Create a flowchart for a user login process"). 3. The AI will generate the Mermaid code for you, which you can then insert directly into your note. Once inserted, a configuration modal will appear with a code editor and a live preview window. --- ## 🛠️ The Mermaid Editor Interface The Mermaid editor in NoteRich is designed for efficiency: * **Code Area:** A monospaced text area where you write your Mermaid syntax. * **Live Preview:** A real-time rendering of your diagram. If there’s a syntax error, an error overlay will appear to help you debug. * **Help Icon:** Click the `?` icon next to "Diagram Code" to open the official [Mermaid.js Documentation](https://mermaid.js.org/intro/) for detailed syntax references. * **Confirm Button:** Saves your diagram and inserts it into the note. > **Tip:** You can double-click any existing Mermaid diagram in your note to reopen the editor and make changes. --- ## 📊 Basic Flowchart Syntax Flowcharts are the most common use case for Mermaid. Here’s how to build them. ### 1. Defining the Direction Start by defining the direction of the flow: * `graph TD`: Top-Down * `graph LR`: Left-Right * `graph BT`: Bottom-Top * `graph RL`: Right-Left ### 2. Adding Nodes Nodes are defined by an ID and a 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. Connecting Nodes * `-->`: Solid arrow. * `-.->`: Dotted arrow. * `==>`: Thick arrow. * `-- Text -->`: Arrow with a label. --- ## 🤖 AI-Powered Diagram Generation Don't want to write code? Let NoteRich's AI do it for you. 1. Open the **AI Assistant**. 2. Type a prompt like: *"Generate a Mermaid sequence diagram for a customer placing an order online."* 3. The AI will return a code block like this: ```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. Copy the code or use the "Insert" button if available in your AI interface to add it to your note. --- ## 📸 OCR: Scan Handwritten or Printed Diagrams Have a whiteboard photo or a printed flowchart? NoteRich's **Note Scanner (OCR)** can convert it into editable Mermaid code. 1. Open the **AI Assistant** and select **Note Scanner (OCR)**. 2. Upload an image of your handwritten or printed diagram. 3. In the prompt, specify: *"Convert this image into Mermaid.js flowchart code."* 4. The AI will analyze the image structure and generate the corresponding Mermaid syntax. 5. Review the generated code in the editor and adjust any minor recognition errors. > **Note:** For best results, ensure the image is clear and the text is legible. Complex hand-drawn sketches may require some manual tweaking after conversion. --- ## 🎨 Advanced Features ### Styling Nodes You can customize the appearance of specific nodes using CSS classes or 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 Group related nodes together for better organization. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### Sequence Diagrams Mermaid isn’t just for flowcharts. You can also create sequence diagrams to visualize interactions between systems. ```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 for NoteRich Users 1. **Escape Special Characters:** If your node text contains special characters like `[]` or `()`, wrap the text in quotes. ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)"] ``` 2. **Copy as Image:** Once your diagram is rendered, click on it to reveal the floating toolbar. Use the **Copy Image** button to paste the diagram into other applications like Slack, Notion, or email. 3. **Download SVG:** Pro users can download the diagram as a high-quality SVG file for use in presentations or publications. --- ## ❓ Troubleshooting * **Diagram Not Rendering?** Check the error overlay in the preview window. Common issues include missing closing brackets `]` or incorrect arrow syntax. * **Syntax Errors?** Ensure you are using the correct Mermaid version syntax. NoteRich uses the latest stable version of Mermaid.js. Refer to the [official docs](https://mermaid.js.org/intro/) if you’re unsure. * **OCR Accuracy?** If the OCR result isn't perfect, use the AI Assistant to refine the code. You can paste the rough OCR output and ask the AI to "Fix the Mermaid syntax." --- ## 🏁 Conclusion Mermaid.js in NoteRich transforms how you document processes and systems. By keeping your diagrams as code, you ensure they are always up-to-date, easy to modify, and seamlessly integrated with your knowledge base. With AI generation and OCR scanning, creating complex visuals has never been easier. Start visualizing your ideas today! --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Mermaid</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Flowchart</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI Assistant</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">OCR</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Visualization</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">NoteRich</span> </div>