←返回博客

使用 Mermaid CLI 和 AI 工具自动化图表创建

2025-04-24•6 分钟阅读

制作图表一直是我文档中最不喜欢的环节。我曾花费数小时移动方框，最终得到的还是看起来很业余的作品。当我发现 Mermaid 后，这种情况得到了改变。在这篇文章中，我将分享我如何仅使用文本通过 Mermaid CLI 创建图表，以及人工智能工具如何彻底改变和简化了这个过程。

什么是 Mermaid？

Mermaid 是一个免费的开源工具，可以将文本转换为图表，有点像 Markdown 将文本转换为格式化内容一样。它完全免费，遵循 MIT 许可证，因此您可以将其用于工作或个人用途，而无需担心许可费用。它可以用来制作各种图表，例如：

  • 流程图
  • 序列图
  • 类图
  • 实体关系图
  • 甘特图
  • 饼图
  • 用户旅程图
  • Git 图
  • 状态图
  • 以及更多

我最喜欢的一点是，我再也不用拖动方框了。我只需编写文本，Mermaid 就会创建图表。在与传统图表工具斗争多年后，这种方法感觉像是一种启示。

开始使用 Mermaid CLI

我开始在浏览器中使用 Mermaid，但 CLI（命令行界面）版本才是真正发挥魔力的地方。它允许您将文本图表转换为实际的图像文件，您可以将其放入文档、演示文稿或任何地方。而且它非常易于使用。

使用 Mermaid CLI 的基本语法是：

npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png

此命令：

  • npx @mermaid-js/mermaid-cli：运行 Mermaid CLI 工具，无需全局安装
  • -i diagram.mmd：指定包含 Mermaid 图表定义的输入文件
  • -o diagram.png：设置输出文件名和格式（此处为 PNG）

您还可以生成 SVG 文件，这些文件是可缩放的，非常适合 Web 使用：

npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg

您还可以使用 MermaidChart 等工具快速在线预览您的 Mermaid 代码，这对于在不安装任何东西的情况下测试和共享图表非常有用。

创建您的第一个 Mermaid 图表

让我们从一个简单的流程图开始。创建一个名为 flowchart.mmd 的文件，其中包含以下内容：

flowchart TD
A[开始] --> B{决策}
B -->|是| C[处理 1]
B -->|否| D[处理 2]
C --> E[结束]
D --> E

现在，生成此图表的 PNG 图像：

npx @mermaid-js/mermaid-cli -i flowchart.mmd -o flowchart.png

这将创建一个简洁、专业的流程图，显示一个简单的决策过程，如下所示：

显示决策过程的简单流程图

您可以使用相同的方法处理 Mermaid 支持的任何类型的图表。

例如，如果您需要可视化系统架构（就像我最近做的那样），您可能会创建类似这样的内容：

flowchart TD
Client([Web 浏览器]) --HTTP/HTTPS--> LB[负载均衡器]
LB --> API1[API 服务器 1]
LB --> API2[API 服务器 2]
API1 --> DB[(数据库)]
API2 --> DB
API1 --> Cache[(Redis 缓存)]
API2 --> Cache

这将生成此图表：

显示 Web 服务器、负载均衡器和数据库的架构图

AI 如何加速图表创建

这就是人工智能成为游戏规则改变者的地方。与手动编写 Mermaid 图表不同，Cursor 和 Windsurf 等 AI 工具可以分析文本描述并为您自动生成图表定义。

我最近需要为具有复杂架构的 AWS + Drupal 项目创建架构图。如果没有 AI，映射所有组件和连接将花费大量时间。相反，我将项目规范输入 Cursor 的 AI 助手，要求它提取系统组件及其关系，并获得了 Mermaid 代码，帮助我更有效地创建图表。

使用 Cursor 的 AI 生成图表

Cursor 是一个具有强大 AI 的 IDE，它同时理解代码和自然语言。它解释技术描述并将其转换为结构化 Mermaid 语法的能力非常出色。这是我的典型工作流程：

  1. 复制描述您想要可视化的概念的相关文本
  2. 使用类似这样的提示：“根据此描述生成 Mermaid 图表”
  3. Cursor 将分析文本并生成适当的 Mermaid 语法
  4. 将生成的 Mermaid 代码保存到 .mmd 文件中
  5. 使用 Mermaid CLI 将其转换为图像

例如，您可以使用类似以下的指令提示 Cursor：

  • “创建一个 Mermaid 流程图，显示用户注册过程”
  • “为这个 API 请求流生成一个 Mermaid 序列图”
  • “将这个项目时间线转换为 Mermaid 甘特图”
  • “根据这个领域模型描述创建一个 Mermaid 类图”

在几秒钟内，您将获得一个完整的 Mermaid 图表，该图表准确地表示了您的概念。

使用 Windsurf 的 AI 进一步发展

Windsurf（来自 Codeium）利用 AI 将图表自动化推向更远。其 AI 模型可以分析整个代码库或文档集，以创建脚本，这些脚本可以：

  1. 扫描文本文件以查找可以可视化的描述
  2. 提取关键元素和关系
  3. 根据内容类型生成适当的 Mermaid 语法
  4. 自动运行 Mermaid CLI 以创建图表图像
  5. 将这些图表包含在您的文档中

这创建了一个连续的文档工作流程，您的图表与您的书面内容保持同步。AI 可以检测到您的代码或文档何时发生足够大的变化以至于需要更新图表，从而使整个过程几乎无需手动操作。

高级图表类型

Mermaid 支持许多比简单流程图更高级的图表类型。以下是一些对架构文档有用的图表类型：

序列图

非常适合说明组件如何随时间交互：

sequenceDiagram
participant 用户
participant API
participant 数据库

用户->>API: GET /products
API->>数据库: 查询产品
数据库-->>API: 返回结果
API-->>用户: JSON 响应

这将生成此序列图：

显示用户、API 和数据库之间 API 请求流程的序列图

类图

非常适合展示面向对象的设计：

classDiagram
class Order {
    +String id
    +Date createdAt
    +OrderStatus status
    +calculateTotal()
}
class Customer {
    +String id
    +String name
    +String email
    +placeOrder()
}
Customer "1" -- "many" Order: 下单

这将生成此类图：

显示 Customer 和 Order 类及其关系的类图

实体关系图

非常适合数据库设计：

erDiagram
CUSTOMER ||--o{ ORDER : 下单
ORDER ||--|{ LINE_ITEM : 包含
CUSTOMER }|..|{ DELIVERY_ADDRESS : 使用

这将生成此实体关系图：

显示客户、订单、行项目和送货地址关系的实体关系图

实际示例

Mermaid CLI 可用于各种可视化需求，包括系统架构文档（如前所述），也可用于：

项目规划

对于项目规划，您可以创建甘特图来显示阶段和依赖关系：

gantt
title 项目时间线
dateFormat  YYYY-MM-DD
section 研究
需求收集 :a1, 2025-01-01, 10d
市场调研       :after a1, 7d
section 开发
前端开发  :b1, 2025-01-18, 14d
后端开发   :b2, 2025-01-18, 21d
section 测试
集成测试   :c1, after b1 b2, 7d
用户验收       :c2, after c1, 7d

这将生成此时间线可视化：

显示包含开发阶段的项目时间线的甘特图

流程文档

对于业务流程文档，Mermaid 可以创建清晰的流程图：

flowchart TD
Start([客户订单]) --> A{库存是否充足？}
A -->|是| B[处理付款]
A -->|否| C[缺货流程]
B --> D[发货产品]
C --> E[通知客户]
D & E --> End([完成订单])

这将生成此流程图：

显示客户订单工作流程的流程图

AI 和自动化的未来可能性

Mermaid CLI 和 AI 工具的结合为文档自动化带来了令人兴奋的可能性。我设想一个系统可以：

  1. 监控文档文件的更改
  2. 使用 AI 识别可能受益于可视化的内容
  3. 根据内容生成适当的 Mermaid 语法
  4. 自动运行 Mermaid CLI 以创建新的图表图像
  5. 智能地将图表嵌入到具有适当上下文的文档中

这样的设置将使图表与文档保持同步，无需手动干预。虽然我还没有构建这个系统，但目前的 AI 工具和 Mermaid CLI 使其完全成为可能。

改进图表的技巧

  1. 使用有意义的形状：Mermaid 提供各种节点形状来区分不同类型的组件（数据库、服务、外部系统）
  2. 添加颜色以提高清晰度：使用颜色对相关组件进行分组或突出显示重要元素
  3. 保持简洁：避免图表过于拥挤；创建多个专注的图表，而不是一个复杂的图表
  4. 使用子图：使用子图将相关组件分组在一起，以显示逻辑边界
  5. 添加标题和描述：通过清晰的标题和简短的描述使您的图表具有自解释性

总结

Mermaid 提供了一种实用的图表创建方法，可以很好地集成到开发工作流程中。Mermaid 图表的基于文本的特性使其易于版本控制和维护，比传统图表格式更方便。

当与 AI 工具结合使用时，该过程变得更加高效。这些工具可以帮助从描述中生成图表代码，即使是没有深厚技术知识的人也可以使用。

以下是关于使用 Mermaid 的一些最终想法：

  • 学习曲线：语法相对容易学习，特别是如果您已经熟悉 markdown 或其他基于文本的格式。
  • 集成：Mermaid 图表可在许多平台中使用，包括 GitHub、Notion 和其他文档系统。
  • 成本：作为一款开源工具，并采用 MIT 许可证，Mermaid 可免费用于任何目的。
  • 效率：一旦您熟悉了语法，基于文本的图表创建可能比传统图表制作更快。
  • 易于设置：使用 npx 运行 Mermaid CLI 消除了安装的麻烦。

如果您希望改进文档流程，请考虑在下一个项目中使用 Mermaid。直接从文本描述创建专业图表，并可能借助 AI 工具的潜力，可能会彻底改变您在工作中处理可视化问题的方式。