[工具]Mermaid

从设计上应该是程序员之友，类似于Markdown的扩展功能，但目前个人感觉做的还差点意思，未来可期吧。

Steven-Zhl 头像
[工具]Mermaid

Mermaid是一种用于绘制示意图的标记语言，语法简单，功能强大，并且对Markdown支持良好。嗯，还算不错。

1. 如何查看

Mermaid并并非标准的Markdown语法，自然不能直接被Markdown渲染，通常需要第三方工具单独对Mermaid语法进行渲染。这一小节介绍一些如何查看Mermaid语法的方法，主要是在编辑器中。

用以下的Mermaid语法为示例

  graph TD
  root((circle)) --> child1((circle))
  root((circle)) --> child2((circle))

1.1 在VS Code中

需要额外插件，我使用的是Markdown Preview Mermaid Support。这应该也是在VS Code中最常用的相关插件了。

  1. 通常来说，只需要在VS Code的扩展中搜索Markdown Preview Mermaid Support，然后安装即可。
  2. 随后打开一个Markdown文件，使用Markdown的多行代码语法(代码类型为mermaid)将内容包裹起来即可。
  3. 在渲染窗口，如果语法没错的话，就可以看到渲染后的效果了。

VS Code效果预览

1.2 在Typora中

Typora已经支持Mermaid语法，使用方法和VS Code一致。

Typora的Mermaid语法已默认开启，如果并没有渲染的话，可以在偏好设置 > Markdown > Markdown扩展语法 > 图标勾选以开启

Typora效果预览

1.3 在Obsidian中

Obsidian也已经支持Mermaid语法，使用方法和上面两个也相同。

Obsidian效果预览

1.4 在Jekyll中

Jekyll中渲染Mermaid和上面几个有所不同。上面几个都是编辑器软件，而Jekyll是一个静态网站生成器，它需要安装插件以实现Mermaid的渲染。

  1. 确保本地已配置好Ruby、Jekyll和Gems环境
  2. 命令行执行gem install jekyll-mermaid安装插件
  3. 在Jekyll的配置文件中添加plugins: [jekyll-mermaid]以启用插件
  4. 使用<div class="mermaid"></div>或{% mermaid %}{% endmermaid %}将内容包裹起来即可。
  5. 在启动Jekyll之后，你便可以在网页中看到Mermaid的渲染效果了

Jekyll效果预览

多说一句，Jekyll可以被部署在GitHub Pages上用作个人博客，但GitHub Pages并不支持jekyll-mermaid插件(详见Dependency versions | GitHub Pages)，如果仍然想在GitHub Pages渲染Mermaid的话，需要在HTML层面自行引用mermaid.min.js进行渲染。

2. 基本语法

本节将用最少的篇幅快速讲完Mermaid的基本语法。