告别冗长文字！用 Mermaid 图表给 Cursor/Windsurf 更清晰的指令

UP主: kate人不错 · 时长: 11:17 · 🔗 B站原视频

发布: 2025-02-10 · 收录: 2025-03-24

标签: Mermaid · Cursor · AI编程 · 提示词工程 · 可视化

开场：今天分享用 Mermaid 图表写 AI 指令

大家好，我是 KATE。今天我想介绍用 Mermaid 的图解代码，来代替冗长段落做自定义说明。我是从最近 Client 的博文里看到这个用法，自己测试了一下，发现效果不错，所以整理成中文，我们一起来看一下。

为什么用 Mermaid 代替长文字指令

他们发现，用 Mermaid 的图表代码来代替传统文字编写 AI 指令，不仅更直观，而且能更清晰地表达指令流程。

传统方式往往要写一大段话；Mermaid 的方式更直观，每个节点和连接都清晰明白，没有歧义空间，决策点一目了然。流程可视化展示，就像是给 AI 一张地图，而不是用文字告诉它方向。

实际应用：用在 Client 的 Memory Bank，重建上下文

Plan 给了一个实际应用，用在他的 Memory Bank。Memory Bank 用这些图表解决 AI 的一个常见问题：每次新对话就会完全重置记忆。通过结构化方式，可以更高效地重建上下文。

他的做法是：

1. 查看你当前的 AI 自定义指令。
2. 使用 AI 将这些指令转化成 Mermaid 图表。
3. 将生成的图表添加到你的指令里。

Memory Bank 的文件架构（示例）

它会有一个 Project Brief，下方有不同的文件：

• Project Brief：塑造其他所有内容的基础文档
• Project Context：业务和用户角度的观点文档
• System Patterns：技术架构和决策
• Tech Context：开发环境和技术栈
• Active Context：当前开发状态和 progress（项目进展）

流程上，它会先读取文件：
如果文件完整，就验证上下文、制定策略、呈现方案；如果不完整，就创建计划，再去编辑记录。

Client 的 Memory Bank 怎么运作、提示词怎么写，大家可以去 Client 的官方文档里仔细读一下。

Mermaid 是什么：语法简单、场景丰富

Mermaid 是一个基于 JavaScript 的图表绘图工具，语法比较简单，类似 Markdown。它 2014 年首次发布，现在已经比较成熟，可以用在软件文档、项目管理、工作流程、原型设计等，应用场景很丰富。

Mermaid 常见图表类型举例

• 流程图：节点与分支很清楚
• 时序图：展示对象之间的交互过程，比如用户、服务器、数据库怎么交互，一目了然
• 类图：展示系统中的类、接口以及它们之间的关系
• 甘特图：用来做计划排期（大家比较熟悉）
• 状态图：比如“待处理 / 处理中 / 已完成 / 失败”，状态变化很直观
• 饼图：对应代码非常简洁

快速入门：在 HTML / Markdown 里使用与基础语法

它很容易在 HTML 页面中使用，可以从 CDN 引入 Mermaid 库；在 Markdown 里使用也很方便，很多知名的 Markdown 编辑器都支持 Mermaid。

基础语法结构大致是：

• 第一行：图表类型
• 第二行：图表内容
• 方向：常见是 TD（top down，从上到下）、LR（left right，从左到右）
• 连接样式：有多种，比如实线箭头、不同类型的连线、文本标注等
• 也支持丰富的定制样式，比如暗色主题

另外可以在 VS Code 或 Cursor 里搜索相关插件，实现实时预览、语法高亮、代码补全等；也支持在 GitHub、Notion 里使用。

让 AI 生成更好的 Mermaid：提示方式

想让 AI 生成更好的 Mermaid，可以这样做：

• 明确要求它输出的格式
• 提供绘图内容描述，并限制无关输出
• 提供示例模板
• 要求优化布局和注释

示例 1：用 Mermaid + Cursor 做任务管理应用

我做了一个任务管理应用，是 Mermaid 和 Cursor 结合做的，HTML + JS 的应用，制作起来比较简单。

它的功能包括：

• 任务管理（可切换到任务看板）
• 数据分析
• 自动化规则
• 设置：基础数据管理、工作时间、专注模式设置等

目前主要做了页面上的一些设置，后端还有很多需要处理。

我的方式是先把 Mermaid 的代码内容发给 Cursor：比如时间追踪是什么样子、数据分析分哪几块、自动化引擎、用户界面、数据管理等。我把图发给 Cursor 之后，让它基于图谱创建应用。

它完成之后会提示还可以添加哪些内容，我选择部分让它做，然后它就开始往里面加。后续我的提示词就是“继续”，让它一步一步按最开始的规划更新内容。最后它生成了多个文件，也能看到多个 JS 文件。

示例 2：文本关键词分析工具（从 Mermaid 到 Windsurf）

另一个例子：我让它做一个文本关键词分析工具。

需求是：

• 输入一段文本，点击开始分析
• 对文章里的专有名词做分析
• 结果展示
• 可导出图片、导出 CSV 等格式

我上传了山姆·奥特曼最新的博文内容，点击分析后，下方会出现词汇及频率分析。能看到 AGI 提到挺多，专业术语也做了高权重。

先用 Claude 生成 Mermaid 流程，再交给 Windsurf 写代码

我在 Claude 里提出需求，让它帮我写 Mermaid，它很快就生成了流程图：输入方式（文本框、PDF、Markdown）、解析错误提示，然后进入文本处理流程：

• 文本预处理
• 移除标点符号
• 去除停用词
• 分词处理
• 统计分析
• 结果展示与导出选项

确认流程没问题后，我把代码复制到 Windsurf，让 Windsurf 帮我写代码，它很快搭建出应用。

Windsurf 没完全理解 Mermaid 时：回到 Claude 改流程

过程中出现一些问题：比如统计出一些没意义的词。我回到 Claude，让它规划一下，它给了停用词清单，包括常用连接词、介词、代词、数据编号、数学序号等，并补了“词汇过滤系统”“权重分配”“计算词频”“提取有意义关键词”等流程。

你可以在这里确认是不是你想要的流程。如果确认，就把内容复制发给 Windsurf，让它去修改。

但我也发现，即使我用的是 Claude 3.5 Sonnet，它给的 Mermaid 图表非常清晰，Windsurf 也不一定能完全 get 到 Mermaid 表达的内容，这部分还是需要继续沟通让它修改。

继续迭代：修正无意义词、语言混杂等问题

我又发现图表里有些词甚至是字母，没有意义，就让它改进关键词分析；还出现法语，我就让它调整成只要中文和英文。

这也是 Mermaid 的优势：如果让我看一长串文字，可能不容易搞清楚关系；但用 Mermaid 整个流程就很清晰。如果人类手画流程图，时间会比较长，用 AI 画就很迅速。

Cursor 的配合方式：出错就新开对话、继续按图推进

把 Mermaid 代码发给 Cursor 处理时，Cursor 的终端处理能力也很好，会自动重启服务器。如果遇到需要加载的内容，它也会重新编写。中间有错误，直接把错误发给它就可以。

如果对话里连续出现多次错误，即使它提示“不占用积分”，也可以直接新开一个对话，把 Mermaid 相关内容发给它，再让它修改。

引入 Gemini 的解释：补全关键词提取方法，再回填流程图

后来我发现分词方面还是不完善，就用 Gemini 2.0 Flash Thinking，问它什么是关键词提取。它给了一个比较详细的例子，我觉得内容不错，就把这段内容发给 Claude，同时附上之前的处理图片结果，让 Claude 根据例子帮我修正。

优化后的流程里加入了词频统计、逆文档频率等，最后做评分优化、关键词排序。确认后同样复制发给 Windsurf 去修改。有些词可能没意义，就直接告诉 Windsurf，让它扩展停用词列表。

总结：用 Mermaid 让指令更清晰、减少歧义、提升迭代效率

我们用 Mermaid 的方式，是为了区别于传统写大段文字：每个节点和连接都清晰明确，没有歧义空间。

一方面方便我们自己看清整个流程，找到和预期不一样的地方；另一方面可以让 AI 迅速修改。让 AI 生成 Mermaid 代码，再发给 AI IDE（比如 Cursor、Windsurf）去快速实现，效率会变得很高。

以上就是我今天的分享。如果喜欢我的视频，欢迎加入我的知识星球。我会分享最新 AI 资讯、分享源代码、回答你的提问，我们下次再见。