news 2026/4/29 15:06:10

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/4/25 19:19:12

小红书下载神器:3步搞定无水印作品批量下载

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

作者头像 李华
网站建设 2026/4/29 13:05:09

MAA自动公招系统:智能招募的终极指南与高效配置方法

MAA自动公招系统:智能招募的终极指南与高效配置方法 【免费下载链接】MaaAssistantArknights 一款明日方舟游戏小助手 项目地址: https://gitcode.com/GitHub_Trending/ma/MaaAssistantArknights MAA自动公招系统作为明日方舟辅助工具的核心功能,…

作者头像 李华
网站建设 2026/4/25 7:54:12

小米运动自动刷步工具:智能步数同步解决方案

小米运动自动刷步工具:智能步数同步解决方案 【免费下载链接】mimotion 小米运动刷步数(微信支付宝)支持邮箱登录 项目地址: https://gitcode.com/gh_mirrors/mimo/mimotion 还在为每天手动记录步数而烦恼吗?现代生活中&am…

作者头像 李华
网站建设 2026/4/25 8:21:17

Zotero-SciPDF:学术文献自动获取的智能助手

Zotero-SciPDF:学术文献自动获取的智能助手 【免费下载链接】zotero-scipdf Download PDF from Sci-Hub automatically For Zotero7 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-scipdf 在学术研究过程中,你是否经常遇到这样的困扰&…

作者头像 李华
网站建设 2026/4/27 1:34:34

Zotero-SciPDF插件:学术文献PDF自动下载终极指南

Zotero-SciPDF插件:学术文献PDF自动下载终极指南 【免费下载链接】zotero-scipdf Download PDF from Sci-Hub automatically For Zotero7 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-scipdf 在学术研究的漫长道路上,文献收集往往是最耗…

作者头像 李华
网站建设 2026/4/23 14:57:13

Zotero-SciPDF插件终极指南:一键自动从在线资源库下载PDF全文

Zotero-SciPDF插件终极指南:一键自动从在线资源库下载PDF全文 【免费下载链接】zotero-scipdf Download PDF from Sci-Hub automatically For Zotero7 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-scipdf 想要快速获取学术文献的PDF全文吗&#xff…

作者头像 李华