mermaid学习笔记

最新推荐文章于 2025-04-12 12:44:42 发布

686967656869

最新推荐文章于 2025-04-12 12:44:42 发布

阅读量1.5k

点赞数

分类专栏： TOOL 文章标签： mermaid markdown

本文链接：https://blog.csdn.net/qq_26661735/article/details/102799006

版权

TOOL 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Markdown文件中利用Mermaid语法绘制甘特图，包括安装Node.js和Yarn的过程，以及在VScode中使用预览插件展示Mermaid图表的方法。同时，提到了MermaidLiveEditor这一在线编辑器，可将Mermaid语法转换为SVG格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这不是完整的笔记。

因为想画甘特图，但是又不是很想使用鼠标，所以我找到了mermaid。

官网和相关参考资料：

安装

我直接使用官网给的安装教程，也就是使用Node.js：

yarn add mermaid

安装Node.js和Yarn的方法可以在网上找得到。上面给出了Yarn的中文文档网站，里面有介绍如何安装。如果安装了npm，也可以使用npm安装Yarn：

npm install -g yarn

使用

我主要是想在Markdown上面使用mermaid，其他的暂时用不上，所以其他用法没有记录，可以到官网查看。

1）在Markdown上面使用mermaid

= =，这个和安装mermaid应该没什么关系。因为我是使用了VScode，所以我安装了一个可以预览mermaid的插件，如下图：
在这里插入图片描述
= =嗯，输入例子：

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

可以得到这样的效果(windows 10)：
在这里插入图片描述
嗯= =，效果不怎么好，但是暂且将就一下吧。听说有些markdown编辑器和笔记软件对mermaid有支持，比如typora就可以，可以看这里。