编辑器 MarkDown基础及表格、KaTeX公式、矩阵、流程图、UML图、甘特图语法

概述

最多可设置6级标题

技巧

列表

有序列表

MD语法：

1. 你好

2. 我也好

呈现效果：

你好我也好

无序列表

MD语法：

- a

- b

* aa

* bb

+ aaa

+ bbb

效果：

ab

aabb

aaabbb

结论，支持三种方式：-、*、+

TODO列表

MD语法：

- [x] 后端接口开发

- [ ] 与前端联调

呈现效果：

后端接口开发 与前端联调

加粗斜体与删除线

MD语法：

*斜体*，_斜体1_，**加粗**，__加粗1__，***粗斜体***，**_粗斜体1_**，~~删除线~~

效果： 斜体，斜体1，加粗，加粗1，粗斜体，粗斜体1，删除线

结论：一个*或_表示斜体，两个*或_表示加粗，三个*或_表示加粗斜体。

分割线

单独一行里输入3个或以上的短横线-、星号*或下划线_。

引用、嵌套引用

一个>表示引用，两个>表示嵌套引用 效果：

鲁迅：我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？

嵌套引用

超链接

支持类HTML方式： 超链接1 效果：超链接1

[超链接2](http_url "alt 提示") 效果：超链接2

表格

设置表格内容对齐

MD语法：

| 左对齐标题 | 右对齐标题 | 居中对齐标题 | 居中对齐标题

| :------| ------: | :------: | --

| 短文本 | 中等长度文本 | 稍微长一点的文本 | 稍微长一点的文本

| 稍微长一点的文本 | 短文本 | 中等文本 | 中等文本

效果

左对齐标题右对齐标题居中对齐标题居中对齐标题短文本中等长度文本稍微长一点的文本稍微长一点的文本稍微长一点的文本短文本中等文本中等文本

也就是说：两个横杠--即可代表一个列，默认是居中，故两侧的冒号:可以省略。冒号:加在左边，即表示左对齐；冒号加在右边，即表示右对齐。

设置表格内容换行

MD语法：

标题 | 我想要这个注释居中

:--|--

我想要这个标题左对齐 | 第一行
第二行

效果

标题我想要这个注释居中我想要这个标题左对齐第一行第二行

结论：
可以实现换行

设置表格内容合并

MD语法：

标题左对齐 | 我想要这个右对齐

:--|--:

合并的标题|第一行

效果

标题左对齐我想要这个居中对齐我想要这个右对齐合并的标题第一行第一列

第二行第一列第一行第二列

有很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多第二行第二列

结论：

但是比较丑！尤其是在表格内容长度不一的情况下。

表格里含有特殊字符

表格以|作为分隔符，那如果我想要在表格单元格里面添加|，如何实现？加上转义字符\即可。其他特殊字符也是一样的处理方式。

MD语法：

模式|解释

--|--

`p1\|p2`|交替匹配任意 p1 或 p2

效果

模式解释p1|p2交替匹配任意 p1 或 p2

公式

Markdown Preview Enhanced使用KaTeX或MathJax来渲染数学表达式。KaTeX比MathJax性能更好，但却缺少很多MathJax拥有的特性。

两种公式编写方式：

$...$或\(...\)中的数学表达式将会在行内显示$$...$$或\[...\]或```math中的数学表达式将会在块内显示

常用符号

下标：$a_{11}$，呈现效果：

a

11

a_{11}

a11​ 上标：$a^{11}$，呈现效果：

a

12

a^{12}

a12 分数：$\frac{a}{b}$，呈现效果

a

b

\frac{a}{b}

ba​ 向量：$\vec{a}$，呈现效果：

a

⃗

\vec{a}

a

累加：$\sum$，呈现效果：

∑

\sum

∑ 累积：$\prod$，呈现效果：

∏

\prod

∏ 无穷大：$\infty$，呈现效果：

∞

\infty

∞ 1重积分：$\int\frac{dx}{1+x^2}=arctanx+C$，呈现效果：

∫

d

x

1

+

x

2

=

a

r

c

t

a

n

x

+

C

\int\frac{dx}{1+x^2}=arctanx+C

∫1+x2dx​=arctanx+C 2重积分：$\iint$，呈现效果：

∬

\iint

∬ 3重积分：$\iiint$，呈现效果：

∭

\iiint

∭

微分：

希腊字母

字母markdown语法呈现效果alpha$\alpha$

α

\alpha

αbeta$\beta$

β

\beta

βgamma$\gamma$

γ

\gamma

γdelta$\delta$

δ

\delta

δepsilon$\epsilon$

ϵ

\epsilon

ϵzeta$\zeta$

ζ

\zeta

ζeta$\eta$

η

\eta

ηtheta$\theta$

θ

\theta

θlambda$\lambda$

λ

\lambda

λpi$\pi$

π

\pi

πomega$\omega$

ω

\omega

ωpsi$\psi$

ψ

\psi

ψsigma$\sigma$

σ

\sigma

σrho$\rho$

ρ

\rho

ρxi$\xi$

ξ

\xi

ξtau$\tau$

τ

\tau

τkappa$\kappa$

κ

\kappa

κmu$\mu$

μ

\mu

μnu$\nu$

ν

\nu

νchi$\chi$

χ

\chi

χupsilon$\upsilon$

υ

\upsilon

υ

实战

实例语法：

呈现效果：

(

1

+

x

)

a

(1+x)^a

(1+x)a

方程组

起始、结束处以{cases}声明

示例：

$$\begin{cases}

a_1x+b_1y+c_1z=d_1\\

a_2x+b_2y+c_2z=d_2\\

a_3x+b_3y+c_3z=d_3\\

\end{cases}

$$

呈现效果：

{

a

1

x

+

b

1

y

+

c

1

z

=

d

1

a

2

x

+

b

2

y

+

c

2

z

=

d

2

a

3

x

+

b

3

y

+

c

3

z

=

d

3

\begin{cases} a_1x+b_1y+c_1z=d_1\\ a_2x+b_2y+c_2z=d_2\\ a_3x+b_3y+c_3z=d_3\\ \end{cases}

⎩

⎨

⎧​a1​x+b1​y+c1​z=d1​a2​x+b2​y+c2​z=d2​a3​x+b3​y+c3​z=d3​​

矩阵

基础

矩阵MD语法规则：

数学公式（包括矩阵）放在$$之间起始标记\begin{matrix}，结束标记\end{matrix}行尾标记\\，行间元素用&分隔

示例语法：

$$\begin{matrix}

0.8&0.2\\

0.4&0.6\\

\end{matrix}$$

呈现效果：

0.8

0.2

0.4

0.6

\begin{matrix} 0.8&0.2\\ 0.4&0.6\\ \end{matrix}

0.80.4​0.20.6​

矩阵边框

上面的预览没有边框。在起始、结束标记用下列词替换matrix：

pmatrix：小括号边框bmatrix：中括号边框Bmatrix：大括号边框vmatrix：单竖线边框Vmatrix：双竖线边框

呈现效果：

[

0.8

0.2

0.4

0.6

]

\begin{bmatrix} 0.8&0.2\\ 0.4&0.6\\ \end{bmatrix}

[0.80.4​0.20.6​]

省略元素

当矩阵元素较多且呈现一定规律时会使用省略号：

横省略号：\cdots竖省略号：\vdots斜省略号：\ddots

示例：

$$A=\begin{Bmatrix}

{a_{11}}&{a_{12}}&{\cdots}&{a_{1n}}\\

{a_{21}}&{a_{22}}&{\cdots}&{a_{2n}}\\

{\vdots}&{\vdots}&{\ddots}&{\vdots}\\

{a_{m1}}&{a_{m2}}&{\cdots}&{a_{mn}}\\

\end{Bmatrix}$$

呈现效果：

A

=

{

a

11

a

12

⋯

a

1

n

a

21

a

22

⋯

a

2

n

⋮

⋮

⋱

⋮

a

m

1

a

m

2

⋯

a

m

n

}

A=\begin{Bmatrix} {a_{11}}&{a_{12}}&{\cdots}&{a_{1n}}\\ {a_{21}}&{a_{22}}&{\cdots}&{a_{2n}}\\ {\vdots}&{\vdots}&{\ddots}&{\vdots}\\ {a_{m1}}&{a_{m2}}&{\cdots}&{a_{mn}}\\ \end{Bmatrix}

A=⎩

⎨

⎧​a11​a21​⋮am1​​a12​a22​⋮am2​​⋯⋯⋱⋯​a1n​a2n​⋮amn​​⎭

⎬

⎫​

阵列

规则：

包含：起始、结束处以{array}声明对齐方式：在{array}后以{}逐行统一声明左对齐：l；居中：c；右对齐：r竖直线：在声明对齐方式时，插入|建立竖直线插入水平线：\hline

示例：

$$\begin{array}{c|lll}

{↓}&{a}&{b}&{c}\\

\hline

{R_1}&{c}&{b}&{a}\\

{R_2}&{b}&{c}&{c}\\

\end{array}$$

呈现效果：

↓

a

b

c

R

1

c

b

a

R

2

b

c

c

\begin{array}{c|lll} {↓}&{a}&{b}&{c}\\ \hline {R_1}&{c}&{b}&{a}\\ {R_2}&{b}&{c}&{c}\\ \end{array}

↓R1​R2​​acb​bbc​cac​​

流程图

横向流程图

复制下面代码时去掉【晕】字，下同：

```mermaid

graph LR

A[方形] -->B(圆角)

B --> C{条件a}

C -->|a=1| D[结果1]

C -->|a=2| E[结果2]

F[横向流程图]

晕```

呈现效果：

#mermaid-svg-j5zLdII3jUGifdsW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-j5zLdII3jUGifdsW .error-icon{fill:#552222;}#mermaid-svg-j5zLdII3jUGifdsW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-j5zLdII3jUGifdsW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-j5zLdII3jUGifdsW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-j5zLdII3jUGifdsW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-j5zLdII3jUGifdsW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-j5zLdII3jUGifdsW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-j5zLdII3jUGifdsW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-j5zLdII3jUGifdsW .marker.cross{stroke:#333333;}#mermaid-svg-j5zLdII3jUGifdsW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-j5zLdII3jUGifdsW .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-j5zLdII3jUGifdsW .cluster-label text{fill:#333;}#mermaid-svg-j5zLdII3jUGifdsW .cluster-label span{color:#333;}#mermaid-svg-j5zLdII3jUGifdsW .label text,#mermaid-svg-j5zLdII3jUGifdsW span{fill:#333;color:#333;}#mermaid-svg-j5zLdII3jUGifdsW .node rect,#mermaid-svg-j5zLdII3jUGifdsW .node circle,#mermaid-svg-j5zLdII3jUGifdsW .node ellipse,#mermaid-svg-j5zLdII3jUGifdsW .node polygon,#mermaid-svg-j5zLdII3jUGifdsW .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-j5zLdII3jUGifdsW .node .label{text-align:center;}#mermaid-svg-j5zLdII3jUGifdsW .node.clickable{cursor:pointer;}#mermaid-svg-j5zLdII3jUGifdsW .arrowheadPath{fill:#333333;}#mermaid-svg-j5zLdII3jUGifdsW .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-j5zLdII3jUGifdsW .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-j5zLdII3jUGifdsW .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-j5zLdII3jUGifdsW .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-j5zLdII3jUGifdsW .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-j5zLdII3jUGifdsW .cluster text{fill:#333;}#mermaid-svg-j5zLdII3jUGifdsW .cluster span{color:#333;}#mermaid-svg-j5zLdII3jUGifdsW div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-j5zLdII3jUGifdsW :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

a=1

a=2

方形

圆角

条件a

结果1

结果2

横向流程图

竖向流程图

```mermaid

graph TD

A[方形] --> B(圆角)

B --> C{条件a}

C --> |a=1| D[结果1]

C --> |a=2| E[结果2]

F[竖向流程图]

晕```

呈现效果：

#mermaid-svg-M2dpY3Ou9MNi3PzM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-M2dpY3Ou9MNi3PzM .error-icon{fill:#552222;}#mermaid-svg-M2dpY3Ou9MNi3PzM .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-M2dpY3Ou9MNi3PzM .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-M2dpY3Ou9MNi3PzM .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-M2dpY3Ou9MNi3PzM .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-M2dpY3Ou9MNi3PzM .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-M2dpY3Ou9MNi3PzM .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-M2dpY3Ou9MNi3PzM .marker{fill:#333333;stroke:#333333;}#mermaid-svg-M2dpY3Ou9MNi3PzM .marker.cross{stroke:#333333;}#mermaid-svg-M2dpY3Ou9MNi3PzM svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-M2dpY3Ou9MNi3PzM .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-M2dpY3Ou9MNi3PzM .cluster-label text{fill:#333;}#mermaid-svg-M2dpY3Ou9MNi3PzM .cluster-label span{color:#333;}#mermaid-svg-M2dpY3Ou9MNi3PzM .label text,#mermaid-svg-M2dpY3Ou9MNi3PzM span{fill:#333;color:#333;}#mermaid-svg-M2dpY3Ou9MNi3PzM .node rect,#mermaid-svg-M2dpY3Ou9MNi3PzM .node circle,#mermaid-svg-M2dpY3Ou9MNi3PzM .node ellipse,#mermaid-svg-M2dpY3Ou9MNi3PzM .node polygon,#mermaid-svg-M2dpY3Ou9MNi3PzM .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-M2dpY3Ou9MNi3PzM .node .label{text-align:center;}#mermaid-svg-M2dpY3Ou9MNi3PzM .node.clickable{cursor:pointer;}#mermaid-svg-M2dpY3Ou9MNi3PzM .arrowheadPath{fill:#333333;}#mermaid-svg-M2dpY3Ou9MNi3PzM .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-M2dpY3Ou9MNi3PzM .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-M2dpY3Ou9MNi3PzM .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-M2dpY3Ou9MNi3PzM .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-M2dpY3Ou9MNi3PzM .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-M2dpY3Ou9MNi3PzM .cluster text{fill:#333;}#mermaid-svg-M2dpY3Ou9MNi3PzM .cluster span{color:#333;}#mermaid-svg-M2dpY3Ou9MNi3PzM div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-M2dpY3Ou9MNi3PzM :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

a=1

a=2

方形

圆角

条件a

结果1

结果2

竖向流程图

标准流程图

示例：

```mermaid

flowchat

st=>start: 开始框

op=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st->op->cond

cond(yes)->io->e

cond(no)->sub1(right)->op

晕```

呈现效果：

Created with Raphaël 2.3.0

开始框

处理框

判断框(是或否?)

输入输出框

结束框

子流程

yes

no

UML时序图

示例：

```mermaid

sequenceDiagram

对象A->>对象B: 对象B你好吗?（请求）

Note right of 对象B: 对象B的描述

Note left of 对象A: 对象A的描述(提示)

对象B-->>对象A: 我很好(响应)

对象A->>对象B: 你真的好吗？

晕```

呈现效果：

#mermaid-svg-fZoUa47gE7UrlAoS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-fZoUa47gE7UrlAoS .error-icon{fill:#552222;}#mermaid-svg-fZoUa47gE7UrlAoS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-fZoUa47gE7UrlAoS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-fZoUa47gE7UrlAoS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-fZoUa47gE7UrlAoS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-fZoUa47gE7UrlAoS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-fZoUa47gE7UrlAoS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-fZoUa47gE7UrlAoS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-fZoUa47gE7UrlAoS .marker.cross{stroke:#333333;}#mermaid-svg-fZoUa47gE7UrlAoS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-fZoUa47gE7UrlAoS .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fZoUa47gE7UrlAoS text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-fZoUa47gE7UrlAoS .actor-line{stroke:grey;}#mermaid-svg-fZoUa47gE7UrlAoS .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-fZoUa47gE7UrlAoS .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-fZoUa47gE7UrlAoS #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-fZoUa47gE7UrlAoS .sequenceNumber{fill:white;}#mermaid-svg-fZoUa47gE7UrlAoS #sequencenumber{fill:#333;}#mermaid-svg-fZoUa47gE7UrlAoS #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-fZoUa47gE7UrlAoS .messageText{fill:#333;stroke:#333;}#mermaid-svg-fZoUa47gE7UrlAoS .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fZoUa47gE7UrlAoS .labelText,#mermaid-svg-fZoUa47gE7UrlAoS .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-fZoUa47gE7UrlAoS .loopText,#mermaid-svg-fZoUa47gE7UrlAoS .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-fZoUa47gE7UrlAoS .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-fZoUa47gE7UrlAoS .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-fZoUa47gE7UrlAoS .noteText,#mermaid-svg-fZoUa47gE7UrlAoS .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-fZoUa47gE7UrlAoS .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fZoUa47gE7UrlAoS .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fZoUa47gE7UrlAoS .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fZoUa47gE7UrlAoS .actorPopupMenu{position:absolute;}#mermaid-svg-fZoUa47gE7UrlAoS .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-fZoUa47gE7UrlAoS .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fZoUa47gE7UrlAoS .actor-man circle,#mermaid-svg-fZoUa47gE7UrlAoS line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-fZoUa47gE7UrlAoS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

对象A

对象B

对象B你好吗?（请求）

对象B的描述

对象A的描述(提示)

我很好(响应)

你真的好吗？

对象A

对象B

标题：复杂UML时序图

稍微复杂一点的时序图示例：

```mermaid

sequenceDiagram

Title: 标题：复杂UML时序图

对象A->>对象B: 对象B你好吗?（请求）

Note right of 对象B: 对象B的描述

Note left of 对象A: 对象A的描述(提示)

对象B-->>对象A: 我很好(响应)

对象B->>小三: 你好吗

小三-->>对象A: 对象B找我了

对象A->>对象B: 你真的好吗？

Note over 小三,对象B: 我们是朋友

participant C

Note right of C: 没人陪我玩

晕```

呈现效果：

#mermaid-svg-g9oqcccC4K6CUaHA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-g9oqcccC4K6CUaHA .error-icon{fill:#552222;}#mermaid-svg-g9oqcccC4K6CUaHA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-g9oqcccC4K6CUaHA .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-g9oqcccC4K6CUaHA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-g9oqcccC4K6CUaHA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-g9oqcccC4K6CUaHA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-g9oqcccC4K6CUaHA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-g9oqcccC4K6CUaHA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-g9oqcccC4K6CUaHA .marker.cross{stroke:#333333;}#mermaid-svg-g9oqcccC4K6CUaHA svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-g9oqcccC4K6CUaHA .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-g9oqcccC4K6CUaHA text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-g9oqcccC4K6CUaHA .actor-line{stroke:grey;}#mermaid-svg-g9oqcccC4K6CUaHA .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-g9oqcccC4K6CUaHA .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-g9oqcccC4K6CUaHA #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-g9oqcccC4K6CUaHA .sequenceNumber{fill:white;}#mermaid-svg-g9oqcccC4K6CUaHA #sequencenumber{fill:#333;}#mermaid-svg-g9oqcccC4K6CUaHA #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-g9oqcccC4K6CUaHA .messageText{fill:#333;stroke:#333;}#mermaid-svg-g9oqcccC4K6CUaHA .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-g9oqcccC4K6CUaHA .labelText,#mermaid-svg-g9oqcccC4K6CUaHA .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-g9oqcccC4K6CUaHA .loopText,#mermaid-svg-g9oqcccC4K6CUaHA .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-g9oqcccC4K6CUaHA .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-g9oqcccC4K6CUaHA .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-g9oqcccC4K6CUaHA .noteText,#mermaid-svg-g9oqcccC4K6CUaHA .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-g9oqcccC4K6CUaHA .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-g9oqcccC4K6CUaHA .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-g9oqcccC4K6CUaHA .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-g9oqcccC4K6CUaHA .actorPopupMenu{position:absolute;}#mermaid-svg-g9oqcccC4K6CUaHA .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-g9oqcccC4K6CUaHA .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-g9oqcccC4K6CUaHA .actor-man circle,#mermaid-svg-g9oqcccC4K6CUaHA line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-g9oqcccC4K6CUaHA :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

对象A

对象B

小三

C

对象B你好吗?（请求）

对象B的描述

对象A的描述(提示)

我很好(响应)

你好吗

对象B找我了

你真的好吗？

我们是朋友

没人陪我玩

对象A

对象B

小三

C

标题：复杂UML时序图

甘特图

示例：

```mermaid

gantt

dateFormat YYYY-MM-DD

title 软件开发甘特图示例

section 设计

需求 :done, des1, 2023-11-06,2023-11-08

原型 :active, des2, 2023-11-09, 3d

UI设计 : des3, after des2, 5d

未来任务 : des4, after des3, 5d

section 开发

学习准备理解需求 :crit, done, 2023-11-06,24h

设计框架 :crit, done, after des2, 2d

开发 :crit, active, 3d

未来任务 :crit, 5d

耍 :2d

section 测试

功能测试 :active, a1, after des3, 3d

压力测试 :after a1 , 20h

测试报告 : 48h

晕```

呈现效果：

#mermaid-svg-e6mEkUMVY9nMzsVS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-e6mEkUMVY9nMzsVS .error-icon{fill:#552222;}#mermaid-svg-e6mEkUMVY9nMzsVS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-e6mEkUMVY9nMzsVS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-e6mEkUMVY9nMzsVS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-e6mEkUMVY9nMzsVS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-e6mEkUMVY9nMzsVS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-e6mEkUMVY9nMzsVS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-e6mEkUMVY9nMzsVS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-e6mEkUMVY9nMzsVS .marker.cross{stroke:#333333;}#mermaid-svg-e6mEkUMVY9nMzsVS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-e6mEkUMVY9nMzsVS .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-e6mEkUMVY9nMzsVS .exclude-range{fill:#eeeeee;}#mermaid-svg-e6mEkUMVY9nMzsVS .section{stroke:none;opacity:0.2;}#mermaid-svg-e6mEkUMVY9nMzsVS .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-e6mEkUMVY9nMzsVS .section2{fill:#fff400;}#mermaid-svg-e6mEkUMVY9nMzsVS .section1,#mermaid-svg-e6mEkUMVY9nMzsVS .section3{fill:white;opacity:0.2;}#mermaid-svg-e6mEkUMVY9nMzsVS .sectionTitle0{fill:#333;}#mermaid-svg-e6mEkUMVY9nMzsVS .sectionTitle1{fill:#333;}#mermaid-svg-e6mEkUMVY9nMzsVS .sectionTitle2{fill:#333;}#mermaid-svg-e6mEkUMVY9nMzsVS .sectionTitle3{fill:#333;}#mermaid-svg-e6mEkUMVY9nMzsVS .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-e6mEkUMVY9nMzsVS .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-e6mEkUMVY9nMzsVS .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-e6mEkUMVY9nMzsVS .grid path{stroke-width:0;}#mermaid-svg-e6mEkUMVY9nMzsVS .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-e6mEkUMVY9nMzsVS .task{stroke-width:2;}#mermaid-svg-e6mEkUMVY9nMzsVS .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-e6mEkUMVY9nMzsVS .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-e6mEkUMVY9nMzsVS .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-e6mEkUMVY9nMzsVS .task.clickable{cursor:pointer;}#mermaid-svg-e6mEkUMVY9nMzsVS .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-e6mEkUMVY9nMzsVS .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-e6mEkUMVY9nMzsVS .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-e6mEkUMVY9nMzsVS .taskText0,#mermaid-svg-e6mEkUMVY9nMzsVS .taskText1,#mermaid-svg-e6mEkUMVY9nMzsVS .taskText2,#mermaid-svg-e6mEkUMVY9nMzsVS .taskText3{fill:white;}#mermaid-svg-e6mEkUMVY9nMzsVS .task0,#mermaid-svg-e6mEkUMVY9nMzsVS .task1,#mermaid-svg-e6mEkUMVY9nMzsVS .task2,#mermaid-svg-e6mEkUMVY9nMzsVS .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-e6mEkUMVY9nMzsVS .taskTextOutside0,#mermaid-svg-e6mEkUMVY9nMzsVS .taskTextOutside2{fill:black;}#mermaid-svg-e6mEkUMVY9nMzsVS .taskTextOutside1,#mermaid-svg-e6mEkUMVY9nMzsVS .taskTextOutside3{fill:black;}#mermaid-svg-e6mEkUMVY9nMzsVS .active0,#mermaid-svg-e6mEkUMVY9nMzsVS .active1,#mermaid-svg-e6mEkUMVY9nMzsVS .active2,#mermaid-svg-e6mEkUMVY9nMzsVS .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-e6mEkUMVY9nMzsVS .activeText0,#mermaid-svg-e6mEkUMVY9nMzsVS .activeText1,#mermaid-svg-e6mEkUMVY9nMzsVS .activeText2,#mermaid-svg-e6mEkUMVY9nMzsVS .activeText3{fill:black!important;}#mermaid-svg-e6mEkUMVY9nMzsVS .done0,#mermaid-svg-e6mEkUMVY9nMzsVS .done1,#mermaid-svg-e6mEkUMVY9nMzsVS .done2,#mermaid-svg-e6mEkUMVY9nMzsVS .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-e6mEkUMVY9nMzsVS .doneText0,#mermaid-svg-e6mEkUMVY9nMzsVS .doneText1,#mermaid-svg-e6mEkUMVY9nMzsVS .doneText2,#mermaid-svg-e6mEkUMVY9nMzsVS .doneText3{fill:black!important;}#mermaid-svg-e6mEkUMVY9nMzsVS .crit0,#mermaid-svg-e6mEkUMVY9nMzsVS .crit1,#mermaid-svg-e6mEkUMVY9nMzsVS .crit2,#mermaid-svg-e6mEkUMVY9nMzsVS .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-e6mEkUMVY9nMzsVS .activeCrit0,#mermaid-svg-e6mEkUMVY9nMzsVS .activeCrit1,#mermaid-svg-e6mEkUMVY9nMzsVS .activeCrit2,#mermaid-svg-e6mEkUMVY9nMzsVS .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-e6mEkUMVY9nMzsVS .doneCrit0,#mermaid-svg-e6mEkUMVY9nMzsVS .doneCrit1,#mermaid-svg-e6mEkUMVY9nMzsVS .doneCrit2,#mermaid-svg-e6mEkUMVY9nMzsVS .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-e6mEkUMVY9nMzsVS .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-e6mEkUMVY9nMzsVS .milestoneText{font-style:italic;}#mermaid-svg-e6mEkUMVY9nMzsVS .doneCritText0,#mermaid-svg-e6mEkUMVY9nMzsVS .doneCritText1,#mermaid-svg-e6mEkUMVY9nMzsVS .doneCritText2,#mermaid-svg-e6mEkUMVY9nMzsVS .doneCritText3{fill:black!important;}#mermaid-svg-e6mEkUMVY9nMzsVS .activeCritText0,#mermaid-svg-e6mEkUMVY9nMzsVS .activeCritText1,#mermaid-svg-e6mEkUMVY9nMzsVS .activeCritText2,#mermaid-svg-e6mEkUMVY9nMzsVS .activeCritText3{fill:black!important;}#mermaid-svg-e6mEkUMVY9nMzsVS .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-e6mEkUMVY9nMzsVS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

2023-11-07

2023-11-09

2023-11-11

2023-11-13

2023-11-15

2023-11-17

2023-11-19

2023-11-21

2023-11-23

需求

学习准备理解需求

原型

UI设计

设计框架

开发

未来任务

未来任务

功能测试

压力测试

测试报告

耍

设计

开发

测试

软件开发甘特图示例

参考

KaTeX-GitHubKaTeXMathJax-GitHubMathJax

相关文章

 您阅读本篇文章共花了：