跳到主要内容

Mermaid

概述​

Mermaid 章节小插件让实验室专业人员能够使用基于文本的语法，直接在 Labii 记录中创建并嵌入交互式图表。该小插件基于强大的 Mermaid JavaScript 库，可将简单的文本描述转换为专业质量的图表，包括流程图、时序图、甘特图、类图等。它特别适合记录实验工作流程、过程流、项目时间线和系统架构，无需使用专门的绘图软件。通过集成的 AI 辅助功能，用户可以根据自然语言描述生成复杂图表，使技术和非技术实验室人员都能轻松创建图表。

使用场景​

  • 实验方案可视化：创建流程图，记录包含决策点和条件分支的逐步实验程序
  • 实验室工作流程映射：设计显示样本处理、检测顺序和质量控制检查点的过程流程图
  • 项目时间线管理：为研究项目构建甘特图，显示任务依赖关系和里程碑跟踪

界面​

只读视图​

只读视图以最终视觉形式显示渲染后的图表。用户可以查看采用所选主题应用全部格式、颜色和样式的完整图表。图表完全支持交互，查看复杂或大型图表时可以缩放和平移。图表元素中嵌入的所有超链接均可点击，用于前往相关文档或外部资源。该视图会自动缩放图表，使其适应章节容器，同时保持宽高比和清晰度。

Mermaid 章节小插件的只读视图

编辑视图​

编辑视图采用分屏界面，左侧为文本编辑器，右侧为实时预览窗格。用户输入或修改 Mermaid 语法时，预览会实时更新，以便立即查看更改。文本编辑器为 Mermaid 代码提供语法高亮，便于识别图表元素、关系和格式指令。

Mermaid 章节小插件的编辑视图

编辑界面的主要功能包括：

  • Code Editor：使用行号和基本文本编辑功能编写或编辑 Mermaid 语法
  • Live Preview：输入时实时渲染图表，准确显示最终图表的外观
  • AI Assistant：通过专用按钮使用 AI 生成图表，以自然语言描述所需图表
  • Theme Selection：从多个视觉主题（Default、Forest、Dark、Neutral）中选择，以匹配文档样式或公司品牌
  • Insert/Replace Controls：使用 AI 生成内容时，选择在光标位置插入生成的代码，或完全替换现有内容
  • Syntax Validation：自动检测语法错误，并提供有用的错误消息以指导修正

编辑器支持复制、粘贴、撤销和重做等所有标准文本编辑操作，便于迭代图表设计并整合反馈。

配置​

信息

Mermaid 小插件只需少量配置。大多数用户将该小插件添加到章节后，即可立即开始创建图表。

添加 Mermaid 小插件​

前往要添加图表的记录，然后点击 Add Section。

从章节小插件选项中选择 Mermaid。

点击 Edit 打开图表编辑器并开始创建图表。

创建基本图表​

在编辑视图的文本编辑器中输入 Mermaid 语法。以下是一个简单流程图：

graph TD
    A[Start] --> B[Process Sample]
    B --> C{Quality Check}
    C -->|Pass| D[Continue Analysis]
    C -->|Fail| E[Reprocess]
    E --> B

从主题下拉菜单中选择所需主题：

  • Default：简洁的极简样式，带蓝色强调色
  • Forest：绿色调色板，适合环境或生物学文档
  • Dark：高对比度深色主题，适合演示或减轻眼睛疲劳
  • Neutral：用于正式文档的灰度专业样式

点击 Submit 保存图表。渲染后的图表将显示在只读视图中。

使用 AI Assistant 生成图表​

在图表编辑器中点击 AI Assistant 按钮。

使用自然语言描述所需图表。例如：“Create a flowchart showing a protein purification workflow with centrifugation, column chromatography, and quality control steps”。

按 Enter 提交提示词。

在预览窗格中检查 AI 生成的 Mermaid 代码。AI 将根据描述创建语法正确的 Mermaid 代码。

选择插入方式：

  • 点击 Insert，在当前光标位置添加生成的代码
  • 点击 Replace，使用生成的版本替换所有现有图表代码

根据需要调整生成的代码，并选择所需主题。

点击 Submit 保存完成的图表。

提示

对于不熟悉 Mermaid 语法的用户，或需要快速创建复杂图表时，AI Assistant 尤其有用。您始终可以编辑 AI 生成的代码，进一步自定义图表。

其他功能​

支持的图表类型​

Mermaid 小插件支持 Mermaid 库提供的所有图表类型：

流程图​

用于表示过程、决策和工作流程的标准有向图。支持多种方向（从上到下、从左到右、从下到上）和多种节点形状（矩形、圆角矩形、圆形、菱形、六边形）。

文档：https://mermaid-js.github.io/mermaid/#/flowchart

时序图​

显示过程、系统或对象如何相互通信以及通信顺序的交互图。适合记录系统集成、API 交互和多步自动化工作流程。

文档：https://mermaid-js.github.io/mermaid/#/sequenceDiagram

类图​

显示系统结构、类关系和数据模型的面向对象建模图。适合记录软件架构、数据库模式和数据关系模型。

文档：https://mermaid-js.github.io/mermaid/#/classDiagram

状态图​

通过有限状态及其转换描述系统行为的图表，非常适合记录设备状态、样本生命周期阶段和过程控制逻辑。

文档：https://mermaid-js.github.io/mermaid/#/stateDiagram

甘特图​

显示任务时间线、依赖关系和里程碑的项目计划可视化图，是研究项目规划、资源分配和截止日期跟踪的重要工具。

文档：https://mermaid-js.github.io/mermaid/#/gantt

饼图​

显示数值比例的圆形统计图，适合查看资源分配、样本组成或分类数据分布。

文档：https://mermaid-js.github.io/mermaid/#/pie

信息

还支持实体关系图、用户旅程图和 Git 图等其他图表类型。请查看 Mermaid 文档，了解可用图表类型的完整列表。

参考资料​

Mermaid 官方资源​

图表类型参考​

编辑此页
最后由 Yonggan Wu 于 更新