如何使用 Mermaid 绘图

如何使用 Mermaid 绘图

简介

Mermaid 是一个基于 JavaScript 的图表库，它允许用户通过编写文本和代码描述来生成流程图、序列图、甘特图和其他图表类型。Mermaid 的目标是让开发者和文档编写者能够快速创建图表，而无需使用图形编辑工具，从而简化了图表的创建和维护过程。Mermaid 可以轻松集成到各种文档系统和开发工具中，例如 Markdown 编辑器、Confluence、GitLab 等。

Mermaid 的优点包括：

• 易于使用：使用基于文本的描述语言，对于程序员来说易于学习和使用。
• 版本控制友好：由于是文本格式，它可以很好地与版本控制系统协作。
• 轻量级：Mermaid 本身是轻量级的，不需要复杂的依赖。
• 易于集成：可以容易地嵌入到 Markdown、HTML 和其他文档中。

Mermaid 的局限性：

• 样式和布局选项有限：与专业的图表工具相比，Mermaid 在自定义样式和布局方面的能力有限。
• 渲染性能问题：对于大型或复杂的图表，Mermaid 可能会遇到性能瓶颈。
• 交互性有限：Mermaid 生成的图表是静态的，不支持复杂的交互功能。

PlantUML 是另一种流行的图表创建工具，它的特点包括：

• 功能丰富：提供了广泛的图表类型支持，以及更多的样式和布局控制。
• 生成的图表质量高：PlantUML 可以生成高质量的图表，适合打印和演示。
• 跨平台：PlantUML 可以作为一个独立的 Java 应用程序运行，兼容多个平台。

PlantUML 的局限性：

• 需要 Java 环境：运行 PlantUML 需要 Java 环境，这可能会增加设置和配置的复杂性。
• 版本控制：虽然 PlantUML 也是基于文本的，但是其语法比 Mermaid 更加复杂，可能不那么容易理解和修改。
• 性能问题：对于非常大的图表，PlantUML 也可能遇到性能瓶颈。

总之，Mermaid 和 PlantUML 都是有力的工具，选择使用哪一个通常取决于个人的需求、图表的复杂度、项目的集成环境以及个人对语法的偏好。Mermaid 由于其简单性和易于集成，对于基本的图表需求来说是一个很好的选择，而 PlantUML 则更适合需要更高质量和更复杂图表的情况。

使用

Source Code

flowchart LR
    subgraph client ["Client"]
        direction TB
        subgraph materialGroup ["Material Group"]
            MaterialA[MaterialA]
            MaterialB[MaterialB]
            MaterialC[MaterialC]
        end
        subgraph lowCode ["LowCode"]
            Material_Scheduler[Material Scheduler]
        end
    end
 
    subgraph service ["Service"]
        Material_Controller[Material Controller]
    end
 
    subgraph db ["DB"]
        MaterialA_Model[MaterialA Model]
        MaterialB_Model[MaterialB Model]
        MaterialC_Model[MaterialC Model]
    end
 
    MaterialA --> Material_Scheduler
    MaterialB --> Material_Scheduler
    MaterialC --> Material_Scheduler
    Material_Scheduler --> Material_Controller
    Material_Controller --> MaterialA_Model
    Material_Controller --> MaterialB_Model
    Material_Controller --> MaterialC_Model
 
    classDef database fill:#E6FFE6,stroke:#000000;
    classDef rectangle fill:#E0EFFF,stroke:#000000;
    classDef service fill:#FFEBE8,stroke:#000000;
    class MaterialA,MaterialB,MaterialC database
    class Material_Scheduler rectangle
    class Material_Controller service
    class MaterialA_Model,MaterialB_Model,MaterialC_Model database
 

Mermaid Graphics

语法

当然，我会为您解释上述 Mermaid 代码中每行的作用：

• flowchart LR 定义了一个流程图，并设置图的方向从左到右（Left to Right）。

• subgraph client ["Client"] 开始定义一个名为 "Client" 的子图区域，所有包含在这个区域的元素都会被视为这个子图的一部分。

• direction TB 设置子图内部的布局方向从上到下（Top to Bottom）。

• subgraph materialGroup ["Material Group"] 在 "Client" 子图内定义了一个名为 "Material Group" 的更小的子图区域。

• 这三行定义了三个节点，分别是 MaterialA、MaterialB 和 MaterialC，并将这些节点包含在 "Material Group" 子图中。

• end 标记子图 "Material Group" 的结束。

• subgraph lowCode ["LowCode"] 在 "Client" 子图内另外定义了一个名为 "LowCode" 的子图区域。

• 这行定义了 "LowCode" 子图中的 Material_Scheduler 节点。

• end 标记子图 "LowCode" 的结束。

• 另一个 end 标记 "Client" 子图的结束。

• subgraph service ["Service"] 定义了一个名为 "Service" 的子图区域。

• 这行定义了子图 "Service" 中的 Material_Controller 节点。

• end 标记子图 "Service" 的结束。

• subgraph db ["DB"] 定义了一个名为 "DB" 的子图区域，用于表示数据库部分。

• 这三行在 "DB" 子图中定义了三个数据库模型节点。

• end 标记子图 "DB" 的结束。

• 这些行定义了节点之间的关系（箭头指向），表示它们之间的连接或数据流。

• 这三行 classDef 定义了不同的样式类，database、rectangle 和 service，每个类定义了填充颜色和边框颜色。

• 最后四行使用 class 关键字将前面定义的样式类应用于特定的节点。

这些代码共同构成了一个布局整齐且具有层次结构的 Mermaid 流程图。每个 subgraph 代表了图中的一个逻辑区域或组件，classDef 和 class 用于应用样式，以提升图表的可读性和外观。