mermaid学习笔记

这不是完整的笔记。

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

官网和相关参考资料：

1. mermaid官网
2. Yarn中文文档
3. npm安装Yarn_简书
4. NPM与YARN安装与配置_CSDN
5. Mermaid Live Editor
6. mermaid工具_CSDN

安装

我直接使用官网给的安装教程，也就是使用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就可以，可以看这里。

2）Mermaid Live Editor

在网上看到一个在线的mermaid编辑器：Mermaid Live Editor

这个网站可以导出SVG格式的图片。