Mermaid使用手册

Stars
⭐️⭐️⭐️⭐️
Last edited time
Jan 20, 2024 01:33 AM
Last edited by

概述

  • 怎么使用Mermaid?
    • 使用特定的Mermaid渲染器;
    • *使用集成了Mermaid渲染功能的Markdown编辑器,如Typora。**使用时,需要将代码块的语言选择为Mermaid。
    • Typora是宇宙第一笔记软件,不接受反驳
  • Mermaid能绘制哪些图?
    • 饼状图:使用pie关键字,具体用法后文将详细介绍
    • 流程图:使用graph关键字,具体用法后文将详细介绍
    • 序列图:使用sequenceDiagram关键字
    • 甘特图:使用gantt关键字
    • 类图:使用classDiagram关键字
    • 状态图:使用stateDiagram关键字
    • 用户旅程图:使用journey关键字
  • 实例:朱元璋家谱简图,圆圈代表皇帝
以上是概述,下面详细介绍饼状图和流程图的语法。其他图的语法可访问上文给出的项目地址,自行学习。(记得挂梯子)

饼状图

  • 语法
    • pie关键字开始图表
    • 然后使用title关键字及其在字符串中的值,为饼图赋予标题。(这是可选的
    • 数据部分
      • " "内写上分区名。
      • 分区名后使用:作为分隔符
      • 分隔符后写上数值,最多支持2位小数——数据会以百分比的形式展示
  • 实例

流程图

实例

方向

用于开头,声明流程图的方向。
  • graphgraph TBgraph TD:从上往下
  • graph BT:从下往上
  • graph LR:从左往右
  • graph RL:从右往左

结点

  • 无名字的结点:直接写内容,此时结点边框为方形;节点内容不能有空格
  • 有名字的结点:节点名后书写内容,内容左右有特定符号,结点边框由符号决定;节点内容可以有空格
下面的实例中,没有为graph指定方向,因此默认是从上往下的。但是由于各个结点之前没有箭头,所以他们都处于同一排。

连线样式

  • 实线箭头:分为无文本箭头和有文本箭头,有文本箭头有2种书写格式
    • 粗实线箭头:分为无文本箭头和有文本箭头
      • 虚线箭头:分为无文本箭头和有文本箭头
        • 无箭头线:即以上三种连线去掉箭头后的形式
          • 其他连线:需要将graph关键字改为flowchart,除了新增加的连线形式外,上面三种线的渲染效果也会不同
            • 延长连线:增加相应字符即可,如下图中的B到E,连线中增加了一个。字符可多次添加。

              连线形式

              • 直链
                • 多重链:可以使用&字符,或单个描述

                  其他

                  • 子图:需要将graph关键字改为flowchart,在代码段的开始加入subgraph,尾部加入end
                    • 注释:在行首加入%%即可。
                      •  
                    Loading...