【Mermaid】画图工具使用笔记-阿里云开发者社区

【Mermaid】画图工具使用笔记

2023-05-24 138

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Mermaid】画图工具使用笔记

Mermaid简介

Mermaid 允许使用文本和代码创建图表和可视化效果。它是一个基于 JavaScript 的图表绘制和图表工具，可呈现受 Markdown 启发的文本定义，以动态创建和修改图表。

Mermaid使用方法

1、流程图（graph）

graph TD;
  A-->B;
  A-->C;
  B-->D;

微信截图_20230524182206.png

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

微信截图_20230524182231.png

graph TB
    sq[Square shape] --> ci((Circle shape))
    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end
    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]
    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
    cyr[Cyrillic]-->cyr2((Circle shape Начало));
     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

微信截图_20230524182259.png

微信截图_20230524182313.png

2、时序图(sequenceDiagram)

sequenceDiagram
  Alcie->>Johb:hello John, how are you?
  John-->>Alice:Great!

微信截图_20230524182540.png

微信截图_20230524182555.png

3、状态图（stateDiagram）

stateDiagram
  [*]-->s1
  s1-->[*]

微信截图_20230524182643.png

4、类图

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

微信截图_20230524182712.png

5、甘特图（gantt）

gantt
    section Section
    Completed :done,    des1, 2022-01-06,2022-01-08
    Active        :active,  des2, 2022-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

微信截图_20230524182739.png

6、饼图(pie)

pie
  title Key elements in Product X
  "Dogs" : 25
  "Cats" : 25
  "Rats" : 15
  "Iron" : 35

微信截图_20230524182807.png

7、需求图

flowchat
  st=>start: Start
  op=>operation: Your Operation
  cond=>condition: Yes or No?
  e=>end
  st->op->cond
  cond(yes)->e
  cond(no)->op

微信截图_20230524182835.png