东莞做网站 汇卓,商标设计网标志设计,cms建站,品牌网站建设制作概述
最多可设置6级标题
技巧
列表
有序列表
MD语法#xff1a;
1. 你好
2. 我也好呈现效果#xff1a;
你好我也好
无序列表
MD语法#xff1a;
- a
- b
* aa
* bbaaabbb效果#xff1a;
ab
aabb
aaabbb
结论#xff0c;支持三种方式#xff1a;-、*、
T…概述
最多可设置6级标题
技巧
列表
有序列表
MD语法
1. 你好
2. 我也好呈现效果
你好我也好
无序列表
MD语法
- a
- b
* aa
* bbaaabbb效果
ab
aabb
aaabbb
结论支持三种方式-、*、
TODO列表
MD语法
- [x] 后端接口开发
- [ ] 与前端联调呈现效果 后端接口开发 与前端联调
加粗斜体与删除线
MD语法
*斜体*_斜体1_**加粗**__加粗1__***粗斜体*****_粗斜体1_**~~删除线~~ 效果 斜体斜体1加粗加粗1粗斜体粗斜体1删除线
结论一个*或_表示斜体两个*或_表示加粗三个*或_表示加粗斜体。
分割线
单独一行里输入3个或以上的短横线-、星号*或下划线_。
引用、嵌套引用
一个表示引用两个表示嵌套引用 效果 鲁迅我不见他已是三十多年今天见了精神分外爽快。才知道以前的三十多年全是发昏然而须十分小心。不然那赵家的狗何以看我两眼呢 嵌套引用 超链接
支持类HTML方式 a hrefhttp_url alt提示文本超链接1/a 效果超链接1
[超链接2](http_url alt 提示) 效果超链接2
表格
设置表格内容对齐
MD语法
| 左对齐标题 | 右对齐标题 | 居中对齐标题 | 居中对齐标题
| :------| ------: | :------: | --
| 短文本 | 中等长度文本 | 稍微长一点的文本 | 稍微长一点的文本
| 稍微长一点的文本 | 短文本 | 中等文本 | 中等文本效果
左对齐标题右对齐标题居中对齐标题居中对齐标题短文本中等长度文本稍微长一点的文本稍微长一点的文本稍微长一点的文本短文本中等文本中等文本
也就是说两个横杠--即可代表一个列默认是居中故两侧的冒号:可以省略。冒号:加在左边即表示左对齐冒号加在右边即表示右对齐。
设置表格内容换行
MD语法
标题 | 我想要这个注释居中
:--|--
我想要这个标题左对齐 | 第一行br第二行效果
标题我想要这个注释居中我想要这个标题左对齐第一行第二行
结论br可以实现换行
设置表格内容合并
MD语法
标题左对齐 | 我想要这个右对齐
:--|--:
合并的标题|第一行hr第二行效果
标题左对齐我想要这个居中对齐我想要这个右对齐合并的标题第一行第一列 第二行第一列第一行第二列 有很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多第二行第二列
结论hr可以实现其他列合并
但是比较丑尤其是在表格内容长度不一的情况下。
表格里含有特殊字符
表格以|作为分隔符那如果我想要在表格单元格里面添加|如何实现加上转义字符\即可。其他特殊字符也是一样的处理方式。
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}{1x^2}arctanxC$呈现效果 ∫ d x 1 x 2 a r c t a n x C \int\frac{dx}{1x^2}arctanxC ∫1x2dxarctanxC 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 (1x)^a (1x)a
方程组
起始、结束处以{cases}声明
示例
$$\begin{cases}
a_1xb_1yc_1zd_1\\
a_2xb_2yc_2zd_2\\
a_3xb_3yc_3zd_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_1xb_1yc_1zd_1\\ a_2xb_2yc_2zd_2\\ a_3xb_3yc_3zd_3\\ \end{cases} ⎩ ⎨ ⎧a1xb1yc1zd1a2xb2yc2zd2a3xb3yc3zd3
矩阵
基础
矩阵MD语法规则
数学公式包括矩阵放在$$之间起始标记\begin{matrix}结束标记\end{matrix}行尾标记\\行间元素用分隔
示例语法
$$\begin{matrix}
0.80.2\\
0.40.6\\
\end{matrix}$$呈现效果 0.8 0.2 0.4 0.6 \begin{matrix} 0.80.2\\ 0.40.6\\ \end{matrix} 0.80.40.20.6
矩阵边框
上面的预览没有边框。在起始、结束标记用下列词替换matrix
pmatrix小括号边框bmatrix中括号边框Bmatrix大括号边框vmatrix单竖线边框Vmatrix双竖线边框
呈现效果 [ 0.8 0.2 0.4 0.6 ] \begin{bmatrix} 0.80.2\\ 0.40.6\\ \end{bmatrix} [0.80.40.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⎩ ⎨ ⎧a11a21⋮am1a12a22⋮am2⋯⋯⋱⋯a1na2n⋮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} ↓R1R2acbbbccac
流程图
横向流程图
复制下面代码时去掉【晕】字下同
mermaid
graph LR
A[方形] --B(圆角)
B -- C{条件a}
C --|a1| D[结果1]
C --|a2| 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;} a1 a2 方形 圆角 条件a 结果1 结果2 横向流程图 竖向流程图
mermaid
graph TD
A[方形] -- B(圆角)
B -- C{条件a}
C -- |a1| D[结果1]
C -- |a2| 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;} a1 a2 方形 圆角 条件a 结果1 结果2 竖向流程图 标准流程图
示例
mermaid
flowchat
ststart: 开始框
opoperation: 处理框
condcondition: 判断框(是或否?)
sub1subroutine: 子流程
ioinputoutput: 输入输出框
eend: 结束框
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.actortspan{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 .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-fZoUa47gE7UrlAoS .loopText,#mermaid-svg-fZoUa47gE7UrlAoS .loopTexttspan{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 .noteTexttspan{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.actortspan{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 .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-g9oqcccC4K6CUaHA .loopText,#mermaid-svg-g9oqcccC4K6CUaHA .loopTexttspan{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 .noteTexttspan{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
ganttdateFormat YYYY-MM-DDtitle 软件开发甘特图示例section 设计需求 :done, des1, 2023-11-06,2023-11-08原型 :active, des2, 2023-11-09, 3dUI设计 : des3, after des2, 5d未来任务 : des4, after des3, 5dsection 开发学习准备理解需求 :crit, done, 2023-11-06,24h设计框架 :crit, done, after des2, 2d开发 :crit, active, 3d未来任务 :crit, 5d耍 :2dsection 测试功能测试 :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
