【Mermaid】画图工具使用笔记

2022-12-13 18:05:58 浏览数 (1)

文章目录
  • Mermaid简介
  • Mermaid使用方法
    • 1、流程图（graph）
    • 2、时序图(sequenceDiagram)
    • 3、状态图（stateDiagram）
    • 4、类图
    • 5、甘特图（gantt）
    • 6、饼图(pie)
    • 7、需求图
  • 参考连接

Mermaid简介

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

Mermaid使用方法

1、流程图（graph）

代码语言：javascript复制
graph TD;
	A-->B;
	A-->C;
	B-->D;

代码语言：javascript复制
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

代码语言：javascript复制
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

2、时序图(sequenceDiagram)

代码语言：javascript复制
sequenceDiagram
	Alcie->>Johb:hello John, how are you?
	John-->>Alice:Great!

3、状态图（stateDiagram）

代码语言：javascript复制
stateDiagram
	[*]-->s1
	s1-->[*]

4、类图

代码语言：javascript复制
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()
}

5、甘特图（gantt）

代码语言：javascript复制
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

6、饼图(pie)

代码语言：javascript复制
pie
	title Key elements in Product X
	"Dogs" : 25
	"Cats" : 25
	"Rats" : 15
	"Iron" : 35

7、需求图

代码语言：javascript复制
flowchat
  st=>start: Start
  op=>operation: Your Operation
  cond=>condition: Yes or No?
  e=>end
  st->op->cond
  cond(yes)->e
  cond(no)->op

参考连接

github git 开源 数据结构

0 人点赞