如何在 NoteRich 中使用 Mermaid.js 绘制流程图 – 完整教程

需要启用 JavaScript

# 如何在NoteRich中使用Mermaid.js创建流程图——完整教程仅用文字来可视化复杂的流程、系统架构或决策树可能会很困难。**Mermaid.js**是一个强大的基于JavaScript的图表工具，它允许你使用简单的文本定义来创建图表。在**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. 点击工具栏中的**插入**按钮。 2. 导航到**可视化**或**图表**部分。 3. 点击**Mermaid**。 ### 方法3：AI助手 1. 打开**AI助手**（通过`/ai`或工具栏）。 2. 描述你想要的图表（例如，“创建一个用户登录流程的流程图”）。 3. AI会为你生成Mermaid代码，你可以直接将其插入到你的笔记中。插入后，会弹出一个配置模态窗口，其中包含代码编辑器和实时预览窗口。 --- ## 🛠️ Mermaid编辑器界面 NoteRich中的Mermaid编辑器设计得非常高效： * **代码区域：**一个单空格文本区域，你可以在这里编写Mermaid语法。 * **实时预览：**实时渲染你的图表。如果有语法错误，会出现错误提示以帮助你调试。 * **帮助图标：**点击“图表代码”旁边的`?`图标，可以打开官方的[Mermaid.js文档](https://mermaid.js.org/intro/)，获取详细的语法参考。 * **确认按钮：**保存你的图表并将其插入到笔记中。 > **提示：**你可以双击笔记中现有的Mermaid图表来重新打开编辑器并进行修改。 --- ## 📊 基本流程图语法流程图是Mermaid最常见的应用场景。以下是如何构建它们的方法。 ### 1. 定义流程方向首先定义流程的方向： * `graph TD`：从上到下 * `graph LR`：从左到右 * `graph BT`：从下到上 * `graph RL`：从右到左 ### 2. 添加节点节点通过ID和标签来定义。 ```mermaid graph TD A[开始] --> B[处理] B --> C{决策} C -->|是| D[结束] C -->|否| B ``` * `[文本]`：矩形节点。 * `(文本)`：圆角矩形。 * `((文本))`：圆形节点。 * `{文本}`：菱形节点（用于表示决策）。 * `[[文本]]`：子流程节点。 ### 3. 连接节点 * `-->`: 实心箭头。 * `-.->`: 虚线箭头。 * `==>`: 粗箭头。 * `-- 文本 -->`: 带标签的箭头。 --- ## 🤖 由AI驱动的图表生成不想编写代码？让NoteRich的AI为你完成吧。 1. 打开**AI助手**。 2. 输入一个提示，例如：“为在线订单流程生成Mermaid序列图”。 3. AI会返回如下代码块： ```mermaid sequenceDiagram participant 客户 participant 网站 participant 数据库客户->>网站: 下单网站->>数据库: 检查库存数据库-->>网站: 库存可用网站-->>客户: 订单确认 ``` 4. 复制代码，或者如果你的人工智能界面提供了“插入”按钮，可以直接将其粘贴到你的笔记中。 --- ## 📸 OCR：扫描手写或打印的图表有白板照片或打印的流程图吗？NoteRich的**笔记扫描器(OCR)**可以将它们转换为可编辑的Mermaid代码。 1. 打开**AI助手**，选择**笔记扫描器(OCR)**。 2. 上传你的手写或打印图表的图片。 3. 在提示中指定：“将这张图片转换为Mermaid.js流程图代码。” 4. AI会分析图片结构并生成相应的Mermaid语法。 5. 在编辑器中查看生成的代码，并调整任何轻微的识别错误。 > **注意：**为了获得最佳效果，请确保图片清晰且文本可读。复杂的手绘草图在转换后可能需要一些手动调整。 --- ## 🎨 高级功能 ### 节点样式自定义你可以使用CSS类或内联样式来自定义特定节点的外观。 ```mermaid graph LR A[开始] --> B[处理] 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 前端 A[React应用] --> B[UI组件] end subgraph 后端 C[API服务器] --> D[数据库] end B --> C ``` ### 序列图 Mermaid不仅仅用于流程图。你还可以创建序列图来可视化系统之间的交互。 ```mermaid sequenceDiagram participant 用户 participant 笔记Rich participant 服务器用户->>笔记Rich: 编辑笔记笔记Rich->>服务器: 保存数据服务器-->>笔记Rich: 确认保存笔记Rich-->>用户: 更新UI ``` --- ## 💡 NoteRich用户的专业建议 1. **转义特殊字符：**如果节点文本中包含`[]`或`()`等特殊字符，请将文本用引号括起来。 ```mermaid graph TD A["带有括号的节点"] --> B["带有圆括号的节点"] ``` 2. **复制为图片：**当图表渲染完成后，点击它以显示浮动的工具栏。使用“复制图片”按钮将图表粘贴到其他应用程序中，如Slack、Notion或电子邮件。 3. **下载SVG：**高级用户可以下载高质量的SVG文件，用于演示或出版物。 --- ## ❓ 故障排除 * **图表未渲染？**检查预览窗口中的错误提示。常见的问题包括缺少闭合括号`]`或错误的箭头语法。 * **语法错误？**确保你使用的是正确的Mermaid版本语法。NoteRich使用最新稳定的Mermaid.js版本。如果你不确定，请参考[官方文档](https://mermaid.js.org/intro/)。 * **OCR准确性？**如果OCR结果不够完美，可以使用AI助手来改进代码。你可以粘贴粗略的OCR输出，并让AI“修复Mermaid语法”。 --- ## 🏁 结论 NoteRich中的Mermaid.js改变了你记录流程和系统的方式。通过将图表作为代码保存，你可以确保它们始终是最新的，易于修改，并且与你的知识库无缝集成。有了AI生成和OCR扫描功能，创建复杂的可视化图表变得前所未有的简单。今天就开始可视化你的想法吧！ --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> Mermaid 流程图 AI助手 OCR 可视化 NoteRich </div>

如何在 NoteRich 中使用 Mermaid.js 绘制流程图 – 完整教程

您的私密、AI 驱动
笔记中心已准备就绪

资源与指南

如何在 NoteRich 中使用 Mermaid.js 绘制流程图 – 完整教程

您的私密、AI 驱动笔记中心已准备就绪

资源与指南

您的私密、AI 驱动
笔记中心已准备就绪