news 2026/5/14 12:14:15

30. 技术专题-制图-Mermaid

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
30. 技术专题-制图-Mermaid

文章目录

  • 前言
    • 你在用什么记笔记?
  • 一、Mermaid介绍
  • 二、 进阶-让AI帮你节省时间
  • 三、日常规划
  • 四、总结

前言

Mermaid

基于markdown语言的极简制图工具Mermaid。让做研究笔记、画流程图、实验设计、理论框架这件事变得像写文字一样轻松。

Mermaid官网:https://mermaid.js.org/ecosystem/tutorials.html


你在用什么记笔记?

市面上的记笔记软件可以说是五花八门,也许每个人都有自己的一套「知识管理工作流」。常见的选择包括:

OneNote:微软系老牌选手,层级结构清晰,适合课堂速记和资料归档

Notion:颜值高、功能全,数据库能力非常强,适合做项目管理和知识展示。

Typora: 打开就能写,没有复杂的概念,也不需要先理解什么双向链接、知识图谱。对刚从 Word 过渡到 Markdown 的用户来说,它的学习成本几乎是 0。

但是,以上这些工具都有自己的不足之处:
OneNote: 一旦笔记量变大,检索和迁移成本就会明显上升。

Notion: 对网络依赖较强,写长文本或学术笔记时反而容易被“结构”打断思路。高度依赖网络让信息安全性存疑!

Typora: Typora = Markdown 时代的轻量版 Word, 但无法建立笔记之间有效的关联,也就无法承担第二大脑的指责。

更重要的是,以上工具或多或少都需要付费才可以使用!而Obsidian作为以github为发布空间的笔记系统,是免费的!


一、Mermaid介绍

Mermaid 是一种“用文字写图表”的语言——你只需要写几行像代码一样的文本,就能自动生成流程图、时间线、结构图和分析图。他可以在支持Markdown的平台上实现,最简单的比如Obsidian, Typora都可以

你可以用它画:

  • • 流程图

  • • 饼状图

  • • 柱状图

  • • 思维导图

  • • 关系图

  • • 四区散点图 (上边的就是)

  • • 时间线

  • • 还有很多种图!

让我们来举个例子:
Timeline 时间线:

首先要告诉obsidian这是mermaid的代码,然后就生成如图

社交媒体时间线

生成这个图的代码极其简单

再来看另一个例子,一个更学术一点的例子。Bilingualism and dementia

大量研究表明,双语能延缓老年痴呆的患病时间 (Bialystok et al., 2007; Brini et al., 2020):
这其实是多习得一种语言和使用多种语言的过程有效地锻炼了大脑的认知功能,激发了cognitive reserve! 所以我们hypothese: bilingualism modulate the relatin between age and dementia onset:

流程图才是Mermaid的看家本领!当你需要构建causal relationship的时候,使用mermaid是一种选择。下边是画图所用的文字代码

flowchart LR A[Ageing] --> B[Cognitive decline risk] B --> C[Dementia onset] D[Bilingualism] -. modulate .-> B D --> E[Cognitive reserve] E --> B E --> F[Delayed dementia onset] style D fill:#E3F2FD,stroke:#1565C0,stroke-width:2px style E fill:#E8F5E9,stroke:#2E7D32,stroke-width:2px style F fill:#FFF3E0,stroke:#EF6C00,stroke-width:2px

当然,如果你有发表需求,我还是更推荐用更严谨的 Directed acyclic graph 来展示causal relationship

(Li & Coretta, 2025)

二、 进阶-让AI帮你节省时间

给AI明确的指令,让ta输出mermaid代码,并复制在obsidian中呈现

这基本上就是全部的步骤!

我们用Quadrant Chart举例,这是一个将你的data分成四个象限的表格,日常商业化宣传和做PPT必备。你可以看到一些财经类的杂志一直用这类的表格。

我们对各个国家研究生/博士生的待遇感兴趣,于是我们可以上网搜索出不同国家的博士研究生的工作时间和平均薪资

  • • 首先告诉AI 你要生成一个mermaid的Quadrant Chart,有四个象限,名字分别是…
    国家的工作时间和薪资分别是… 于是你会得到:

  • • 当你还想把可视化做的更好,你告诉AI学习一下下边的代码模版

quadrantChart title PhD satisfaction across countries x-axis Fewer working hours --> Longer working hours y-axis Lower income --> Higher income quadrant-1 Overworked but well paid quadrant-2 High satisfaction quadrant-3 Underpaid but less workload quadrant-4 Low satisfaction Germany: [0.55, 0.55] color: #ff9800, radius: 12 USA: [0.75, 0.70] color: #ff9800, radius: 14 Netherlands: [0.30, 0.65] color: #4caf50, radius: 14 Switzerland: [0.45, 0.76] color: #4caf50, radius: 15 Canada: [0.45, 0.65] color: #4caf50, radius: 13 Australia: [0.35, 0.60] color: #4caf50, radius: 13 Spain: [0.48, 0.42] color: #2196f3, radius: 12 Italy: [0.60, 0.35] color: #2196f3, radius: 12 China: [0.80, 0.20] color: #f44336, radius: 16

于是,它给每一个国家坐标后边加上了 color和大小:

最终形成了我们美观又直观的博士生满意度可视化,(数据并非真实,如有雷同,纯属巧合!!!)

三、日常规划

日常我们也可以用mermaid做日程规划,当然我作为一个P人是不常用到这个功能的。

并且会根据实际时间给出一条线

但有时候给朋友规划日常出行的计划,完全可以用这个。比如早上去哪里玩,什么时间集合,比excel要强上不少。

四、总结

让更多真正有需要的人,不再被“习以为常的垄断工具”长期绑定和付费,而是去认识、使用那些看似有一点学习成本,但一旦上手就能持续放大生产力的工具。

Typst如是,Obsidian, mermaid亦如是。

之后我还会继续分享告别word的一百种方式,让他们成为体系,做MS之所不能

如果有时间还会分享一些数据分析学习的open science网站,在Open research的倡导下,这些资料应该对每一位想要学习的人开放,免费!

再加之AI模型的帮助,让我们在后大语言模型时代,更高效学习,办公!


本文的引用仅限自我学习如有侵权,请联系作者删除。
参考知识
Mermaid-Obsidian MD时代记笔记制图 --告别Word的一百种方式!


版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/9 3:40:44

终极解决方案:如何轻松解锁微信网页版完整功能

还在为微信网页版无法正常访问而烦恼吗?每天都有无数用户面临这个困扰:明明需要快速沟通,却因为网页版限制而被迫下载臃肿的桌面客户端。现在,通过wechat-need-web浏览器扩展,你将获得前所未有的微信网页版访问体验。 …

作者头像 李华
网站建设 2026/5/13 9:42:12

明日方舟智能辅助工具:3步实现游戏自动化管理的高效方案

还在为每日重复的基建换班、公招识别和理智刷图而烦恼吗?MAA智能辅助工具正是你需要的解决方案。这款基于图像识别技术的自动化管理神器,能够帮你彻底解放双手,让游戏时间真正回归策略乐趣。通过精准的界面识别和智能操作,MAA让繁…

作者头像 李华
网站建设 2026/5/14 3:57:44

小红书下载神器XHS-Downloader:3步实现无水印批量采集

小红书下载神器XHS-Downloader:3步实现无水印批量采集 【免费下载链接】XHS-Downloader 免费;轻量;开源,基于 AIOHTTP 模块实现的小红书图文/视频作品采集工具 项目地址: https://gitcode.com/gh_mirrors/xh/XHS-Downloader …

作者头像 李华
网站建设 2026/5/13 19:11:26

MTKClient完整使用指南:快速掌握联发科设备调试技巧

MTKClient完整使用指南:快速掌握联发科设备调试技巧 【免费下载链接】mtkclient MTK reverse engineering and flash tool 项目地址: https://gitcode.com/gh_mirrors/mt/mtkclient 面对联发科设备复杂的调试需求,你是否曾经感到无从下手&#xf…

作者头像 李华
网站建设 2026/5/14 5:17:58

炉石传说佣兵战记智能助手:3步告别枯燥操作,重拾游戏乐趣

还在为炉石传说佣兵战记中重复的点击操作感到厌倦吗?每天花费大量时间在队伍选择、技能释放、任务提交这些机械化的流程上,却无法专注于真正的策略乐趣?现在,这一切都将改变! 【免费下载链接】lushi_script This scrip…

作者头像 李华
网站建设 2026/5/12 8:27:58

如何轻松掌握MTKClient:联发科设备调试的终极指南

如何轻松掌握MTKClient:联发科设备调试的终极指南 【免费下载链接】mtkclient MTK reverse engineering and flash tool 项目地址: https://gitcode.com/gh_mirrors/mt/mtkclient MTKClient作为一款专业的联发科设备调试工具,正在彻底改变传统设备…

作者头像 李华