问题描述

Mermaid，基于 JavaScript 的绘图工具，通过文本定义图解内容，即：我们只需要编写“代码”来描述图解，而图解的创建、布局、渲染等等由工具完成。下面是通过 Mermaid 绘制的图解（复制于官方的 README.md 文件，还有很多其他样式）：

| |

学习 Mermaid 的原因是：GitLab 支持渲染在 Markdown 中的 Mermaid 代码，因此我们可以通过 Mermaid 在 REAME.md 中插入图解，方便修改（相比原始的插入固定的图片的方式），因此我们才学习 Mermaid 的使用方法。（当然，除了 Mermaid 之外，GitLab 还支持 PlantUML，但是需要额外配置。既然都是学习“这种新知识”，使用哪个又有什么区别呢？我们认为 Mermaid 被默认启用，也是被官方认同的，所以就学习 Mermaid 使用方法）

该笔记将记录：Mermaid 的学习笔记，记录相关资源，整理常见问题及其处理方法。

学习资料

对于入门学习，可以参考如下文档：
1）mermaid/README.md at develop · mermaid-js/mermaid
2）Flowcharts – Basic Syntax

对于深入学习，可以参考 mermaid – Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. 文档；

编辑工具

使用 Mermaid live editor 可以在线编辑与在线预览。

注释符号

双百分号（%%）

其他问题

如何设置图片大小？

Generated PDF width/height · Issue #35 · mermaidjs/mermaid.cli

只能通过 CSS 或者 命令行参数的形式指定图片大小，也就是说无法在语言中定义图片大小。

参考文献

How do I do comments? · Issue #47 · mermaid-js/mermaid
Error: Failed to launch Chrome · Issue #39 · mermaidjs/mermaid.cli