智能开发环境下的 Diagram-as-Code 实践：MCP Mermaid 技术链路拆解

前言

在软件工程、系统架构设计以及日常的项目管理中，图表（Diagrams）是信息传递的核心载体。传统的绘图方式往往需要借助 Visio、Draw.io 等图形化工具，通过繁琐的拖拽操作来完成。而 Mermaid.js 的出现，将"绘图"转变为"编写代码"，实现了图表的文本化与版本控制化。

随着大语言模型（LLM）的兴起，Model Context Protocol (MCP) 应运而生，它作为一种通用协议，连接了 AI 模型与外部工具。本文将详细拆解如何在蓝耘（Lanyun）MCP 广场中获取 Mermaid 服务，并将其集成到 Trae 编辑器中，通过自然语言指令自动生成专业的 Mermaid 图表代码。

第一阶段：MCP 服务的发现与获取

MCP 协议的核心在于将工具标准化。在开始集成之前，首先需要在服务供应平台找到对应的工具模块。

1.1 服务搜索与定位

在蓝耘 MCP 广场的搜索界面，通过输入关键词 MCP Mermaid，可以快速定位到目标工具。

上图展示了搜索结果页面。可以看到界面中央清晰地列出了搜索到的 MCP Mermaid 卡片。这一步是整个流程的起点，意味着我们不仅仅是在寻找一个绘图工具，而是在寻找一个可以被 AI 调用的标准接口（Interface）。该卡片不仅显示了名称，通常还会包含该工具的版本信息、简要描述以及部署状态。

1.2 托管状态与配置生成

点击进入工具详情页后，会发现该 MCP 服务呈现"托管"状态。这是一个关键的技术细节。

如上图所示，界面显示了"这一款 mcp 已经被蓝耘给托管了"的信息。在传统的 MCP 部署中，用户通常需要在本地环境安装 Node.js 或 Python 运行时，并通过命令行（CLI）启动服务。而"托管"意味着服务运行在云端服务器上，用户无需消耗本地计算资源，也无需处理复杂的依赖安装问题。

界面右侧提供了"生成体验的 json 代码"按钮。这个 JSON 配置文件是连接本地编辑器（客户端）与云端 MCP 服务（服务端）的凭证。

1.3 配置代码的对比与选择

在配置环节，通常存在两种模式：本地运行模式和远程 SSE 模式。

官方提供的本地运行 JSON 代码：

json 复制代码

{
  "mcpServers": {
    "mcp-mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ]
    }
  }
}

这段代码使用了 npx 命令，意味着它依赖用户本地的 npm 环境来动态下载并执行 mcp-mermaid 包。这种方式虽然灵活，但要求本地具备相应的开发环境，且受限于本地网络状况。

蓝耘提供的托管 JSON 代码（推荐）：

为了简化流程，我们选择蓝耘提供的基于 SSE（Server-Sent Events）的配置：

json 复制代码

{
  "mcpServers": {
    "MCP Mermaid": {
      "type": "sse",
      "url": "http://d885cc9e62854df8b41f70b4caedd399.mcp.lanyun.net:8088/sse/MCP Mermaid"
    }
  }
}

上图展示了实际获取到的 JSON 配置块。这里有两个关键字段需要解析：

type: "sse"：指明了通信协议采用 Server-Sent Events。这是一种允许服务器主动向客户端推送数据的 HTTP 连接方式，非常适合 LLM 流式输出的场景。
url：指向了蓝耘云平台的具体端口（8088）和路径。这个 URL 是服务的唯一访问入口，包含了身份验证或会话标识的哈希字符串。

第二阶段：Trae 编辑器中的集成与配置

获取配置信息后，下一步是在开发环境 Trae 中进行注册。Trae 是一款支持 MCP 协议的现代 IDE，允许用户通过修改配置文件来扩展 AI 的能力。

2.1 手动添加 MCP 服务

打开 Trae 的设置或配置文件编辑界面。

如上图所示，用户将之前复制的 JSON 代码块精准地粘贴到了 mcpServers 对象中。Trae 会读取这个配置文件，解析出服务的名称（MCP Mermaid）、类型（sse）以及连接地址。这一步相当于为 IDE 安装了一个新的"驱动程序"，使其具备了生成图表的能力。

2.2 服务加载状态验证

配置保存后，IDE 会尝试与远程服务器建立连接。

上图展示了服务加载成功的状态。通常在界面上会有一个指示灯变为绿色，或者显示"Connected"/"已连接"字样。这表明 Trae 已经成功通过 HTTP 协议握手连接到了蓝耘托管的 Mermaid 服务端，随时准备接受指令。

2.3 创建专属智能体

为了更好地管理上下文，建议创建一个专门用于绘图的智能体（Agent）。

在上图的操作界面中，用户勾选了刚刚添加的 MCP Mermaid 服务。这意味着该智能体在处理用户输入时，拥有了调用 Mermaid 工具的权限。通过这种方式，可以将通用的聊天功能与专业的绘图功能进行隔离，确保生成的代码更加纯粹和专业。

第三阶段：核心场景实战测试

环境搭建完毕后，进入核心的实战测试阶段。我们将通过五个不同维度的测试用例，验证 AI 如何将自然语言转化为标准的 Mermaid 语法，并解析每一类图表的结构逻辑。

3.1 流程图（Flowchart）：逻辑判断与路径控制

测试场景 ：用户登录系统流程。
输入指令："请帮我画一个用户登录系统的流程图：用户输入账号密码 -> 系统验证。如果验证成功，跳转首页；如果验证失败，提示错误并返回登录页。"

上图展示了 Trae 根据指令生成的流程图预览。可以看到，图表清晰地表达了条件分支逻辑。

生成的代码解析：
验证成功验证失败用户输入账号密码系统验证跳转首页提示错误并返回登录页

graph TD;：声明这是一个从上到下（Top-Down）的图表。
节点定义 ：A[...] 使用方括号定义了矩形节点。
连接线 ：--> 表示带箭头的实线。
条件标注 ：|验证成功| 是连接线上的文本标签，清晰地展示了逻辑判断的结果导向。

该图表准确地捕捉了业务逻辑中的"顺序执行"与"条件分支"两个核心要素。

3.2 时序图（Sequence Diagram）：对象交互与时间顺序

测试场景 ：网购下单全过程。
输入指令：生成一个网购的时序图。参与者包括用户、商城前端、后端API、支付网关。展示点击下单到返回结果的全过程。

上图呈现了各个系统组件之间的垂直生命线以及水平的消息传递。这种图表对于理解分布式系统中的调用链路至关重要。

生成的代码解析：
用户商城前端后端API 支付网关点击下单发起下单请求调用支付接口返回支付成功结果返回下单成功结果显示支付成功用户商城前端后端API 支付网关

participant：显式声明了参与交互的对象，确保它们在图中按顺序排列。
->>：实线箭头，表示同步请求或异步消息的发送。
-->>：虚线箭头，表示响应消息的返回。

AI 生成的代码完美遵循了请求-响应（Request-Response）模式，清晰地展示了数据流如何在前端、后端与第三方服务之间流转。

3.3 甘特图（Gantt Chart）：项目进度与时间管理

测试场景 ：两周周期的项目开发计划。
输入指令：包含需求分析（2天）、原型设计（2天）、代码开发（6天）、测试与修复（3天）。

上图展示了项目的时间轴视图。甘特图是项目经理进行排期和资源可视化的首选工具。

生成的代码解析：
2025-12-07 2025-12-08 2025-12-09 2025-12-10 2025-12-11 2025-12-12 2025-12-13 2025-12-14 2025-12-15 2025-12-16 2025-12-17 2025-12-18 2025-12-19 2025-12-20 需求分析原型设计代码开发测试与修复项目阶段项目开发甘特图

dateFormat：定义了日期的解析格式。
section：将任务分组，这里统一在"项目阶段"下。
任务状态 ：done 表示已完成，active 表示进行中，空白表示未开始。
时间跨度 ：2d、6d 等后缀准确定义了任务持续的时长。

Mermaid 自动计算了各个任务的起始和结束日期，直观地反映了任务间的依赖关系（虽然此例中为线性依赖）。

3.4 类图（Class Diagram）：面向对象结构设计

测试场景 ：学校管理系统的数据模型。
输入指令：包含学生、老师、课程三个类，定义多对多和一对多关系，以及基本属性和方法。

上图展示了标准的 UML 类图结构。每个矩形框代表一个类，分为类名、属性、方法三层结构。

生成的代码解析：
选修 * * 教授 1 * 学生 +String 姓名 +int 学号 +void 注册课程() +void 查看课程() 老师 +String 姓名 +int 工号 +void 添加课程() +void 查看课程() 课程 +String 课程名称 +String 课程编号 +void 添加学生() +void 查看学生()

可见性修饰符 ：+ 表示 Public（公开）属性或方法。
数据类型 ：明确标注了 String、int 等类型。
关系基数 ："*" 代表多（Many），"1" 代表一（One）。
关联描述 ：: 选修 和 : 教授 对类之间的关系进行了语义化说明。

这张图不仅展示了静态结构，还规范了系统的业务规则（例如一个老师可以教授多门课程）。

3.5 思维导图（Mindmap）：知识结构与发散思维

测试场景 ：人工智能学习路径规划。
输入指令：中心节点 AI，分支包含机器学习、深度学习、编程语言、数学基础及其子节点。

上图展示了以 AI 为核心的辐射状知识图谱。思维导图非常适合用于头脑风暴、知识梳理和层级展示。

生成的代码解析：

mindmap root((AI)) 机器学习监督学习无监督学习深度学习 CNN RNN Transformer 编程语言 Python C++ 数学基础

root((AI))：定义了中心根节点，双括号使其呈现圆形。
缩进层级：Mermaid 的思维导图语法依赖缩进来表示层级关系，无需复杂的箭头定义，这使得代码极具可读性。

通过这种结构，复杂的知识体系被可视化为层级分明的树状结构，便于记忆和理解。

总结与展望

通过上述流程，我们完整体验了从 MCP 服务的搜索、配置，到在 IDE 中通过自然语言生成五种不同类型图表的全过程。

这一方案的优势在于：

低门槛：用户无需学习繁杂的 Mermaid 语法，只需描述需求。
高效率：蓝耘托管服务免去了本地环境搭建的成本，开箱即用。
可维护性：生成的图表本质上是文本代码，可以随项目源码一起进行版本控制（Git），便于后续的修改和迭代。

MCP Mermaid 不仅是一个绘图工具，更是 AI 辅助工程化（AI4SE）的一个典型切面。它展示了如何通过标准协议将大模型的理解能力转化为实际的生产力工具。对于开发者、产品经理以及系统架构师而言，掌握这一工作流将显著提升文档编写与技术沟通的效率。

如果您对这一技术栈感兴趣，可以通过以下链接注册并体验蓝耘平台提供的服务：
https://console.lanyun.net/#/register?promoterCode=0131