「Mermaid」- 快速开始(学习笔记)

  CREATED BY JENKINSBOT

问题描述

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

| |

学习 Mermaid 的原因是:GitLab 支持渲染在 Markdown 中的 Mermaid 代码,因此我们可以通过 Mermaid 在 REAME.md 中插入图解,方便修改(相比原始的插入固定的图片的方式),因此我们才学习 Mermaid 的使用方法。(当然,除了 Mermaid 之外,GitLab 还支持 PlantUMLKroki,但是这两者需要额外配置。既然都是学习“这种新知识”,使用哪个又有什么区别呢?我们认为 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