摘要:本文将介绍一种新兴的高效工具组合:AI与Mermaid。通过结合人工智能的强大生成能力和Mermaid简洁高效的文本图表绘制功能,产品经理可以大幅提升工作效率,快速生成清晰的业务流程图、系统交互图、项目进度图等多种图表,同时减少因需求变更带来的重复工作。
本文将介绍一种新兴的高效工具组合:AI与Mermaid。通过结合人工智能的强大生成能力和Mermaid简洁高效的文本图表绘制功能,产品经理可以大幅提升工作效率,快速生成清晰的业务流程图、系统交互图、项目进度图等多种图表,同时减少因需求变更带来的重复工作。
作为一名产品经理,你是否曾经为了向开发团队解释一个复杂的业务流程而绞尽脑汁?或者在产品评审会上,因为一张不够直观的流程图而被质疑?又或者,你花了大量时间制作精美的流程图,却发现一个小小的需求变更就要重新绘制整个图表?
在过去的星球知识分享或者是公众号文章中,我曾经推荐过很多次Mermaid的这个工具,但是有不少朋友因为记不住它的语法规则,不知道怎么高效率的输出相关图形,所以就没什么动力去学习和使用它。但是随着大语言模型的持续迭代发展,现在的主流大语言模型及相关的产品都可以通过文字描述快速生成合适的Mermaid代码,从而大大降低了文本绘图的难度和门槛。
所以今天,我非常想再次给大家安利和推荐一下Mermaid这个产品,以及如何将它与AI结合,大幅提升我们日常的工作效率。
什么是Mermaid?Mermaid是一种基于文本的图表绘制工具,它允许我们使用类似于Markdown的语法来创建各种类型的图表。简单来说,你只需要写一些特定格式的文本,Mermaid就能自动将其转换为美观的图表。
比如,当我需要绘制一个简单的流程图时,只需要写这样的代码:
这段代码会自动生成一个从上到下的流程图,清晰地展示订单处理的基本流程。
你可能会想,这不就是写代码吗?作为产品经理,我们需要学习编程?别担心,Mermaid的语法非常简单直观,更像是在写结构化的文本,而不是编程。即使你没有任何编程基础,也能在短时间内掌握它的基本用法。
Mermaid支持多种图表类型,包括但不限于:
流程图(Flowchart)时序图(Sequence Diagram)甘特图(Gantt Chart)类图(Class Diagram)状态图(State Diagram)饼图(Pie Chart)用户旅程图(User Journey)这些图表类型几乎覆盖了我们在产品工作中需要用到的所有图表形式。无论是梳理业务流程、描述系统交互、规划项目进度,还是展示数据分布,Mermaid都能胜任。
Mermaid是一种基于文本的图表绘制工具,使用简单的语法就能创建各种专业图表,无需编程基础,适合产品经理日常工作使用。
为什么要学习Mermaid?大多数产品经理在绘制流程图时,选择的工具选择通常是Visio、ProcessOn、Axure或者Draw.io这类专业绘图软件。它们功能强大,但使用起来也有一些痛点:
修改成本高:当业务流程有变更时(这在供应链领域几乎是家常便饭),需要重新调整图形、连线,有时甚至需要重新绘制整个图表。版本管理困难:图形文件通常以二进制格式保存,无法像代码一样进行差异比较和版本控制。协作不便:团队成员要么需要安装相同的软件,要么需要依赖特定的在线平台。与文档分离:图表通常需要单独导出为图片,然后插入到文档中,这使得后续维护变得复杂。而Mermaid恰好解决了这些问题:
首先,Mermaid是基于文本的,这意味着你可以像编辑文本一样编辑图表。当业务流程发生变化时,你只需要修改相应的文本描述,而不是重新调整图形元素。比如,在上面的订单处理流程中,如果我们需要增加一个”客户确认”的步骤,只需要添加一行文本即可。
其次,由于Mermaid图表本质上是文本,它可以轻松地纳入版本控制系统(如Git)。你可以清晰地看到每次修改的内容,追踪图表的演变历程,甚至可以回滚到之前的版本。
第三,Mermaid的文本特性使得协作变得简单。团队成员可以直接在文本编辑器中修改图表描述,无需依赖特定的绘图软件。而且,许多常用的文档工具(如语雀、飞书、钉钉、Notion、Confluence)都已经内置了Mermaid支持,使得分享和协作更加便捷。
最后,Mermaid可以直接嵌入到Markdown文档中,成为文档的一部分。这意味着你的图表和文档是一体的,可以一起维护和更新,大大降低了文档维护的成本。
在供应链领域,我们经常需要处理复杂的业务流程和系统交互。比如,一个完整的订单履约流程可能涉及订单管理系统(OMS)、仓库管理系统(WMS)、运输管理系统(TMS)等多个系统的协作。使用Mermaid,我们可以清晰地描述这些系统之间的交互,并且在业务变更时快速调整图表。
这个时序图清晰地展示了订单从客户下单到最终配送的整个流程,以及各个系统之间的交互。如果流程有变更,我们只需要修改相应的文本描述即可。
小结:学习Mermaid能够帮助产品经理解决传统绘图工具的痛点,包括修改成本高、版本管理困难、协作不便和与文档分离等问题。特别是在供应链这样流程复杂且经常变更的领域,Mermaid的优势更加明显。
Mermaid在产品工作中的高频场景作为供应链产品经理,我们的日常工作涉及多种场景,Mermaid在这些场景中都能发挥重要作用。下面,我将结合实际案例,分享Mermaid在几个高频工作场景中的应用。
1. 业务流程梳理
在开始一个新项目或优化现有系统时,梳理业务流程是必不可少的步骤。传统的方式是使用流程图软件绘制,但这往往耗时且难以迭代。
以库存管理为例,我曾经需要梳理一个从采购计划到库存调拨的完整流程。使用Mermaid,我可以这样描述:
graph LR
A[销售预测] –> B[需求计划]
B –> C[采购计划]
C –> D[采购订单]
D –> E[入库]
E –> F[库存管理]
F –> G{库存是否充足?}
G –>|是| H[正常销售]
G –>|否| I[库存调拨]
I –> J[紧急采购]
J –> D
I –> K[调整销售策略]
这个流程图清晰地展示了库存管理的主要环节和决策点。当我与业务部门讨论时,可以直接在会议中修改这个图表,实时反映大家的意见。
更重要的是,这个流程图可以作为产品需求文档的一部分,帮助开发团队理解业务逻辑。当流程有变更时,我只需要修改相应的文本描述,而不是重新绘制整个图表。
2. 系统交互设计
在供应链系统中,不同模块之间的交互往往非常复杂。使用Mermaid的时序图,我们可以清晰地描述这些交互。
比如,在设计一个跨仓调拨功能时,我需要整理调出仓,在途库存,调入仓这三个核心对象的交互流程:
这个时序图不仅展示了主体之间的交互顺序,还明确了每个主体的职责边界。在与开发团队沟通时,这样的图表能够帮助大家快速达成共识,避免理解偏差。
3. 状态流转设计
在供应链系统中,订单、库存、物流等实体往往有复杂的状态流转。使用Mermaid的状态图,我们可以直观地展示这些状态及其转换条件。
以订单状态为例:
这个状态图清晰地展示了订单从创建到结束的所有可能状态和转换路径。在设计订单管理系统时,这样的图表能够帮助我们确保覆盖所有状态转换场景,避免遗漏。
4. 项目规划与进度跟踪
作为产品经理,我们经常需要规划项目进度并跟踪执行情况。Mermaid的甘特图功能非常适合这个场景。
比如,在规划一个库存优化项目时:
这个甘特图直观地展示了项目各阶段的时间安排和依赖关系。在项目进行过程中,我们可以随时更新图表,反映实际进度。
5. 数据分析与可视化
在供应链决策中,数据分析是必不可少的环节。Mermaid提供了饼图等简单的数据可视化工具,适合在产品文档中展示一些基本的数据分布。
比如,在分析库存结构时:
这个饼图直观地展示了不同类别商品在库存中的占比,帮助我们识别重点关注的商品类别。
Mermaid在产品工作的多个场景中都能发挥重要作用,包括业务流程梳理、系统交互设计、状态流转设计、项目规划与进度跟踪,以及简单的数据分析与可视化。通过这些应用,我们可以提高工作效率,改善沟通质量,确保产品设计的完整性和准确性。
Mermaid的一些AI通用提示词在使用Mermaid的过程中,我总结了一些通用的AI提示词(Prompt),可以帮助你借更高效地创建各类图表。特别是当你将Mermaid与AI工具(如ChatGPT)结合使用时,这些提示词能够帮助你快速获得想要的图表。
流程图提示词
当你需要创建业务流程图时,可以使用类似这样的提示词:
请使用Mermaid语法创建一个流程图,描述电商平台的订单履约流程,从用户下单到收货的完整过程,包括订单创建、支付、仓库处理、物流配送等环节。
这样的提示词明确了图表类型(流程图)、主题(订单履约流程)和需要包含的关键环节,AI工具能够据此生成相应的Mermaid代码。
如果你对流程图的方向有特定要求,可以在提示词中明确指出:
请使用Mermaid语法创建一个从左到右(LR)的流程图,描述库存补货流程,包括销售预测、需求计划、采购计划、供应商确认、入库等环节。
时序图提示词
对于系统交互设计,时序图是非常有用的工具。你可以使用这样的提示词:
请使用Mermaid语法创建一个时序图,描述在订单取消场景下,OMS、WMS、支付系统之间的交互流程,包括取消指令的传递、库存释放、退款处理等步骤。
这个提示词明确了图表类型(时序图)、场景(订单取消)和涉及的系统(OMS、WMS、支付系统),以及需要关注的关键步骤。
状态图提示词
对于状态流转设计,你可以使用这样的提示词:
请使用Mermaid语法创建一个状态图,描述采购订单的生命周期,包括草稿、已提交、审核中、已审核、执行中、部分收货、全部收货、已关闭等状态,以及各状态之间的转换条件。
这个提示词明确了图表类型(状态图)、主题(采购订单生命周期)和需要包含的状态及转换条件。
甘特图提示词
对于项目规划,你可以使用这样的提示词:
请使用Mermaid语法创建一个甘特图,描述一个为期3个月的库存优化项目,包括需求分析、系统设计、开发、测试、上线等阶段,明确各阶段的时间安排和依赖关系。
这个提示词明确了图表类型(甘特图)、项目主题(库存优化)、时间跨度(3个月)和主要阶段。
组合图表提示词
有时,我们需要使用多个图表来描述一个复杂的系统或流程。这时,你可以使用组合提示词:
请使用Mermaid语法创建以下图表:
1. 一个流程图,描述退货处理的业务流程
2. 一个时序图,描述退货场景下各系统的交互
3. 一个状态图,描述退货单的状态流转
这样的提示词能够帮助你一次性获取多个相关图表,全面描述一个业务场景。
图表优化提示词
当你已经有了一个基本的图表,但想要进一步优化时,可以使用这样的提示词:
我有一个描述订单处理流程的Mermaid流程图,但感觉结构不够清晰。请帮我优化这个图表,使其更加简洁明了,并添加适当的注释。
graph TD
A[接收订单] –> B[验证订单]
B –> C{库存检查}
C –>|库存充足| D[分配库存]
C –>|库存不足| E[缺货处理]
D –> F[拣货包装]
F –> G[发货]
G –> H[更新订单状态]
E –> I[通知客户]
I –> J[等待库存]
J –> C
这个提示词提供了现有的图表代码,并明确了优化目标(结构清晰、简洁明了、添加注释)。
AI与Mermaid结合的最佳实践
在将AI与Mermaid结合使用时,我总结了一些最佳实践的提示词,你可以更高效地利用AI工具创建Mermaid图表,提升产品工作效率。
明确图表类型:在提示词中明确指出你需要的图表类型(流程图、时序图、状态图等)。提供足够的上下文:描述业务场景、涉及的系统或角色、关键步骤或状态等信息,帮助AI理解你的需求。指定图表方向:对于流程图,明确指出你希望的方向(TD:从上到下,LR:从左到右等)。分步骤请求:对于复杂的图表,可以先请求一个基本版本,然后逐步添加细节或优化。提供示例:如果你有特定的风格或格式要求,提供一个示例图表可以帮助AI更好地理解你的期望。迭代优化:AI生成的图表可能不会一次就完美,通过多轮对话进行迭代优化是很常见的做法。通过使用针对不同图表类型的提示词,结合AI工具,我们可以快速创建和优化各类Mermaid图表。明确图表类型、提供足够上下文、指定图表方向、分步骤请求、提供示例和迭代优化是结合AI与Mermaid的最佳实践。
AI实践与心得分享1.Chrome插件“豆包”,划词生成Mermaid图
浏览器安装插件“豆包”,然后在“设置”中找到“划词工具栏”,选择“添加技能”,填写“提示词内容”,保存生效后,就可以划词生成Mermaid图了。
对选中的文字 {selection}进行总结提炼,根据文字内容的描述,自动生成符合Mermaid语法的图表代码。
技能:熟悉Mermaid的图表类型和语法,能高效将流程转化为代码。 理解流程分析、架构设计及结构化展示等领域知识。
约束:代码必须符合Mermaid语法规范。 流程和结构表达需准确清晰。 流程图可以按实际情况有二级、三级等多层级。 输出的代码格式应简洁且易于理解。
2.通过Mermaidchart,导出精美png图片
我经常用语雀来写作,所以在语雀文档中会有大量的Mermaid的内容,但是语雀目前存在一个BUG或者是不足点,就是右键复制生成的SVG图片然后粘贴到其他地方之后,清晰度会压缩很多,很影响观感。
如果把SVG保存到本地,然后再导入到Figma或者其他SVG转PNG的图片中,也是可以的,但是相对来说会慢一些,而且有一些工具导出的清晰度也会有点影响。
经过一段时间的摸索之后,我个人最喜欢的是用Mermaid官方的一个网站去导出png的图片,就是这个:
而且它还有一个好处,就是可以在生成预览图之后,通过下面红框中的小工具,去更换外观、样式、增加一些元素等,可以让你的Mermaid图和别人做出来的默认样式明细区分开,整体体验还是非常不错的
3.保存一份常用的Mermaid提示词
这个提示词是我从别的公众号中找到的,它适用于总结一些比较长的,但是又有一定的逻辑性的内容,可以生成多种不一样风格的图片,然后让用户去选择具体需要哪个。这里我将这个提示词一并分享给大家。
Role:你是最擅长内容和数据视觉化、信息图展示的大师。
Task:
1. 请分析文章内容,用Mermaid语法创建适当的图表来可视化其中的关键信息,选择最合适3-5种图表类型展示
1. 如果内容包含步骤或流程,请创建流程图(flowchart)
2. 如果内容描述时间线或事件序列,请创建时序图(timeline)或甘特图(gantt)
3. 如果内容展示组织结构或层次关系,请创建组织结构图
4. 如果内容包含实体间的关系,请创建实体关系图(ER diagram)
5. 如果内容包含类或对象间的关系,请创建类图(class diagram)
6. 如果内容包含状态转换,请创建状态图(state diagram)
7. 如果内容包含顺序交互,请创建序列图(sequence diagram)
2. 整理网站核心内容和观点,生成文本格式的思维导图。放在 “`代码块中。
Notice:
1. 请确保图表:
– 图表要显示在移动版,所以宽度有限,如横向生成太宽,改成纵向图表,如flowchart TD/TB。
– 清晰展示文章中的主要概念和关系
– 通过颜色和多种样式增强可读性,不要超过4种颜色,但也别太单调。
– 包含简洁的标签和描述
– 遵循Mermaid语法规范
– 根据文本中的数据或关键点,用文本符号绘制合适的Mermaid图表。
– 如果绘制不出Mermaid图,用文本图代替,不能留空。
2. 直接输出内容,不解读图表选择逻辑,也不需要任何引导语,比如“好的,我来…”
3. 生成的图表,用户看完有恍然大悟感觉,甚至认知升级,影响他的思想和行动。
4. 你每次都会CoT思考,梳理清楚内容/结构后,才开始绘图。
Format:
### 一、
### 二、
### 三、
…
待处理文章内容:
{{ content }}
作为供应链产品经理,我们经常需要处理复杂的业务流程和系统交互,清晰有效的沟通是我们工作的核心。AI+Mermaid的组合为我们提供了一个强大的工具,帮助我们更高效地梳理业务流程、设计系统交互、规划项目进度,并与各方进行有效沟通。
特别是在当前AI技术快速发展的背景下,掌握如何利用AI工具提升工作效率已经成为产品经理的必备技能。通过本文介绍的方法和技巧,你可以将AI与Mermaid结合,在日常工作中创造更大价值。
如果你有任何问题、建议或者使用心得,欢迎在评论区分享,我们一起探讨和进步。如果你觉得这篇文章有帮助,也请关注我的公众号”PM维他命”,获取更多产品和供应链领域的实用内容。
最后,技术和工具只是手段,真正的价值在于我们如何利用它们解决实际问题、创造业务价值。希望你能将这些工具融入到自己的工作中,不断探索和创新,成为更优秀的产品经理!
来源:人人都是产品经理