直接开门见山了,这一句Prompt就是:
请使用mermaid帮我画………
为了避免说起来干巴巴的,先展示个效果吧。
输入Prompt:
做一个30天假期的减肥规划,请用mermaid帮我画成甘特图
输出的甘特图:

怎么样?效果还可以吧。
那我们接着说。
前面我们科普过Markdown:为什么AI的回答复制出来总是带有「##」、「**」、「-」等无用符号?如何才能去掉它们?
Markdown可以通过简单的文本语法表示多种格式,今天说的跟它类似,可以通过简单的文本语法创建多种类型的图表,并基于JavaScript完成可视化渲染,叫做Mermaid。
上面的减肥计划,在AI对话窗口中,其实长这样:

点击代码框右上角的复制,然后粘贴到提供Mermaid渲染功能的网站,例如mermaidchart.com或者mermaid.live,就可以转换成可视化图表。

下面设置几个具体的场景来演示一下吧。
1.比如说,我们今天在「人人都是产品经理」这个网站上读到一篇文章,介绍的是《活动策划的标准SOP流程》。我想把它梳理并总结下来。

那我就可以复制整篇文章,然后告诉DeepSeek-R1,请帮我把下面这篇文章梳理成mermaid图表。

于是我们就得到了这样一份类似思维导图的图表:

这篇示例文章的原文不怎么复杂,而且图片比较多,所以得到的图表相对简单。如果你使用你们公司内部的流程或者SOP,或者正在学习的课程等等,会有更好的效果。
2.绘制一份行业知识图谱。比如说,绘制一份大语言模型行业的知识图谱。

于是我们就得到了一份知识图谱:

3.请使用mermaid帮我画出双十一当天用户进入优衣库天猫直播间下单的购物旅程图。

于是我们就得到了一份用户旅程图:

4.同时开始深度思考和联网搜索:请使用mermaid帮我画出2023年和2024年云服务器市场份额占比。

于是我们得到两个饼图:


5.请用mermaid帮我画出普通家庭宽带网络的协议交互图。

于是得到图表如下:

6.同时开启深度思考和联网搜索:请总结并梳理罗振宇2025年跨年演讲的演讲稿,然后用mermaid帮我把它画成思维导图(mindmap)。
*这里DeepSeek有点反应不过来,需要提示一下使用mindmap画思维导图,否则会画成前面第1条那种流程图形式的思维导图

于是得到思维导图:

7.同时开启深度思考和联网搜索:请使用mermaid帮我画出网站acfun的发展历程。

这个案例里DeepSeek突发奇想使用了甘特图来画,不过倒也合理:

也可以明确要求它用时间线来画:

8.同时开启深度思考和联网搜索:请用mermaid帮我画出历年天猫双十一GMV的变化柱状图(xychart)。
*这里也需要提示一下deepseek使用xychart图表才能正确绘制坐标柱状图。

于是得到柱状图:

以上几个演示案例基本覆盖了最常见的几种Mermaid图表,相信你也已经看懂了。
但我并不想到这里就结束。
之前我在:DeepSeek的API,我们普通人都能用在哪?这篇文章表达过一个观点,我想在这里重申一下:
在过去,掌握一些搜索能力的人,包括我自己在内,会吃到一部分小红利。因为我们总能判断出针对某一些问题,是否可能存在一些现成的解决方案,然后通过搜索,找到这些已经存在于互联网上的现成解决方案或者说小工具。然后利用这些现成的旧轮子,快速解决自己遇到的新问题。
但随着AI的进步,解决很多问题的最优路径,可能不再是找到一个现成的好方案来解决问题,而是直接用AI针对眼前的问题生成一个100%匹配的解决方案直接莽过去。
这也是我认为的AI时代解决问题的一个新范式。
之前Markdown那篇文章评论区有很多人留言,对为什么我推荐写一个新的转换器来处理Markdown标记表示不理解。

有人说这种符号用手一个一个直接删了了事,并不麻烦;有人说要到word查找替换;有人说使用腾讯文档;有人说选择到网上找一个开源的Markdown编辑器导成PDF;有人选择安装VSC和Typora解决;有人说Markdown本身就允许人类直接阅读,没有必要转换;有人说选择直接放弃格式,在Prompt里要求禁止使用Markdown。
但我依旧建议,使用AI生成一个最符合自己习惯的个人转换器。不仅是自己为自己私人定制,也是在刻意练习。
所以,mermaidchart.com和mermaid.live固然都很好,
我依旧打开了Cursor。

最终,我的Mermaid转换器:
-支持四个主题,黑白两种背景
-支持横向、竖向两种流程图的排版方式
-支持鼠标拖动和不按住ctrl键通过滚轮放大缩小(这个单纯是因为我不喜欢按ctrl键)
-支持全屏浏览
-支持在任意浏览状态下导出图表为png,且清晰度比在线网站高得多


按照惯例,源码贴在这里:
<!DOCTYPE html>
依旧是新建一个文本文档,把代码粘贴进去,修改扩展名为「.html」,开箱即用,也可以发给他人。
但还是那句话,建议试着自己借助AI写一个。
发表回复