Markdown的使用 Markdown的基礎與高級使用
[toc] 生成目錄的方式
文章目錄
- Markdown的使用 Markdown的基礎與高級使用
- 一級標題
- 二級標題
- 段落
- 字體
- 分隔線
- 刪除線
- 下劃線
- 腳注
- 列表
- 區塊
- 代碼
- 鏈接
- 圖片
- 表格
- Markdown 高級技巧
- 轉義
- 數學公式使用$$$$ 進行包裹
- 流程圖
標題
使用 # 號可表示 1-6 級標題,一級標題對應一個 # 號,二級標題對應兩個 # 號,以此類推 # 后面需要一個空格隔開
# 標題內容
一級標題
二級標題
三級標題
四級標題
五級標題
六級標題
段落
段落的換行是使用兩個以上空格加上回車
字體
*斜體文本*
斜體文本
_斜體文本_
斜體文本
**粗體文本**
粗體文本
__粗體文本__
粗體文本
***粗斜體文本***
粗斜體文本
___粗斜體文本___
粗斜體文本
分隔線
你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線,行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線:
***
* * *
*****
- - -
刪除線
使用兩組英文~~包裹要進行刪除的內容
~~ 刪除內容 ~~
Markdown
下劃線
下劃線可以使用html中的代碼
<u>Markdown</u>
Markdown
腳注
書寫格式[^要注明的文本]
Markdown[^test]
列表
Markdown 支持有序列表和無序列表。
無序列表
無序列表使用星號(*)、加號(+)或是減號(-)作為列表標記,這些標記后面要添加一個空格,然后再填寫內容
* test1
* test2
+ test1
+ test2
- test1
- test2
有序列表
有序列表使用數字并加上 . 號來表示,如:
1. test1
2. test2
test1test2
列表嵌套
第一項: 第二項:
區塊
Markdown 區塊引用是在段落開頭使用 > 符號 ,然后后面緊跟一個空格符號:
> test1
test1
test2
代碼
使用```代碼內容```進行包裹代碼 并指定一種語言(也可以不指定)
$(document
).ready(function () {alert('RUNOOB');
});
鏈接
鏈接使用方法如下:
[鏈接名稱](鏈接地址) 或者 <鏈接地址>
百度
https://wwww.baidu.com
聲明變量在引用鏈接的方式
[聲明變量]:鏈接地址 [變量調用]
test
圖片
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-laHZLRNX-1631879211037)(圖片地址)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Zzk5cDSM-1631879211039)(圖片地址 "可選標題")]
聲明變量在引用該圖片
也可以像網址那樣對圖片網址使用變量
[test2]:https://i.loli.net/2021/03/15/yu9YzQwGB4iXlv3.jpg
[test2]
Markdown 還沒有辦法指定圖片的高度與寬度,如果你需要的話,你可以使用普通的 <img> 標簽。
表格
Markdown 制作表格使用 | 來分隔不同的單元格,使用 - 來分隔表頭和其他行。
語法格式如下:
| 表頭 | 表頭 |
| ---- | ---- |
| 單元格 | 單元格 |
| 單元格 | 單元格 |
表格對齊方式
我們可以設置表格的對齊方式:
-: 設置內容和標題欄居右對齊。
:- 設置內容和標題欄居左對齊。
:-: 設置內容和標題欄居中對齊。
實例如下:
| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |
左對齊右對齊居中對齊
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |
Markdown 高級技巧
支持的 HTML 元素
不在 Markdown 涵蓋范圍之內的標簽,都可以直接在文檔里面用 HTML 撰寫。
目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等 ,如:
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重啟電腦
使用 Ctrl+Alt+Del 重啟電腦
轉義
Markdown 使用了很多特殊符號來表示特定的意義,如果需要顯示特定的符號則需要使用轉義字符,Markdown 使用反斜杠轉義特殊字符:
文本加粗
** 正常顯示星號 **
數學公式使用$$$$ 進行包裹
流程圖
橫向流程圖源碼格式:
標記語言為:`mermaid `
graph LR
A[方形] -->B(圓角)B --> C{條件a}C -->|a=1| D[結果1]C -->|a=2| E[結果2]F[橫向流程圖 ]
#mermaid-svg-SBB74lkIKNfULjYD .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-SBB74lkIKNfULjYD .label text{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD .node rect,#mermaid-svg-SBB74lkIKNfULjYD .node circle,#mermaid-svg-SBB74lkIKNfULjYD .node ellipse,#mermaid-svg-SBB74lkIKNfULjYD .node polygon,#mermaid-svg-SBB74lkIKNfULjYD .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-SBB74lkIKNfULjYD .node .label{text-align:center;fill:#333}#mermaid-svg-SBB74lkIKNfULjYD .node.clickable{cursor:pointer}#mermaid-svg-SBB74lkIKNfULjYD .arrowheadPath{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-SBB74lkIKNfULjYD .flowchart-link{stroke:#333;fill:none}#mermaid-svg-SBB74lkIKNfULjYD .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-SBB74lkIKNfULjYD .edgeLabel rect{opacity:0.9}#mermaid-svg-SBB74lkIKNfULjYD .edgeLabel span{color:#333}#mermaid-svg-SBB74lkIKNfULjYD .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-SBB74lkIKNfULjYD .cluster text{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-SBB74lkIKNfULjYD .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-SBB74lkIKNfULjYD text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-SBB74lkIKNfULjYD .actor-line{stroke:grey}#mermaid-svg-SBB74lkIKNfULjYD .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-SBB74lkIKNfULjYD .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-SBB74lkIKNfULjYD #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-SBB74lkIKNfULjYD .sequenceNumber{fill:#fff}#mermaid-svg-SBB74lkIKNfULjYD #sequencenumber{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD #crosshead path{fill:#333;stroke:#333}#mermaid-svg-SBB74lkIKNfULjYD .messageText{fill:#333;stroke:#333}#mermaid-svg-SBB74lkIKNfULjYD .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-SBB74lkIKNfULjYD .labelText,#mermaid-svg-SBB74lkIKNfULjYD .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-SBB74lkIKNfULjYD .loopText,#mermaid-svg-SBB74lkIKNfULjYD .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-SBB74lkIKNfULjYD .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-SBB74lkIKNfULjYD .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-SBB74lkIKNfULjYD .noteText,#mermaid-svg-SBB74lkIKNfULjYD .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-SBB74lkIKNfULjYD .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-SBB74lkIKNfULjYD .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-SBB74lkIKNfULjYD .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-SBB74lkIKNfULjYD .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD .section{stroke:none;opacity:0.2}#mermaid-svg-SBB74lkIKNfULjYD .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-SBB74lkIKNfULjYD .section2{fill:#fff400}#mermaid-svg-SBB74lkIKNfULjYD .section1,#mermaid-svg-SBB74lkIKNfULjYD .section3{fill:#fff;opacity:0.2}#mermaid-svg-SBB74lkIKNfULjYD .sectionTitle0{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD .sectionTitle1{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD .sectionTitle2{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD .sectionTitle3{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-SBB74lkIKNfULjYD .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD .grid path{stroke-width:0}#mermaid-svg-SBB74lkIKNfULjYD .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-SBB74lkIKNfULjYD .task{stroke-width:2}#mermaid-svg-SBB74lkIKNfULjYD .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD .taskText:not([font-size]){font-size:11px}#mermaid-svg-SBB74lkIKNfULjYD .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-SBB74lkIKNfULjYD .task.clickable{cursor:pointer}#mermaid-svg-SBB74lkIKNfULjYD .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-SBB74lkIKNfULjYD .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-SBB74lkIKNfULjYD .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-SBB74lkIKNfULjYD .taskText0,#mermaid-svg-SBB74lkIKNfULjYD .taskText1,#mermaid-svg-SBB74lkIKNfULjYD .taskText2,#mermaid-svg-SBB74lkIKNfULjYD .taskText3{fill:#fff}#mermaid-svg-SBB74lkIKNfULjYD .task0,#mermaid-svg-SBB74lkIKNfULjYD .task1,#mermaid-svg-SBB74lkIKNfULjYD .task2,#mermaid-svg-SBB74lkIKNfULjYD .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-SBB74lkIKNfULjYD .taskTextOutside0,#mermaid-svg-SBB74lkIKNfULjYD .taskTextOutside2{fill:#000}#mermaid-svg-SBB74lkIKNfULjYD .taskTextOutside1,#mermaid-svg-SBB74lkIKNfULjYD .taskTextOutside3{fill:#000}#mermaid-svg-SBB74lkIKNfULjYD .active0,#mermaid-svg-SBB74lkIKNfULjYD .active1,#mermaid-svg-SBB74lkIKNfULjYD .active2,#mermaid-svg-SBB74lkIKNfULjYD .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-SBB74lkIKNfULjYD .activeText0,#mermaid-svg-SBB74lkIKNfULjYD .activeText1,#mermaid-svg-SBB74lkIKNfULjYD .activeText2,#mermaid-svg-SBB74lkIKNfULjYD .activeText3{fill:#000 !important}#mermaid-svg-SBB74lkIKNfULjYD .done0,#mermaid-svg-SBB74lkIKNfULjYD .done1,#mermaid-svg-SBB74lkIKNfULjYD .done2,#mermaid-svg-SBB74lkIKNfULjYD .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-SBB74lkIKNfULjYD .doneText0,#mermaid-svg-SBB74lkIKNfULjYD .doneText1,#mermaid-svg-SBB74lkIKNfULjYD .doneText2,#mermaid-svg-SBB74lkIKNfULjYD .doneText3{fill:#000 !important}#mermaid-svg-SBB74lkIKNfULjYD .crit0,#mermaid-svg-SBB74lkIKNfULjYD .crit1,#mermaid-svg-SBB74lkIKNfULjYD .crit2,#mermaid-svg-SBB74lkIKNfULjYD .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-SBB74lkIKNfULjYD .activeCrit0,#mermaid-svg-SBB74lkIKNfULjYD .activeCrit1,#mermaid-svg-SBB74lkIKNfULjYD .activeCrit2,#mermaid-svg-SBB74lkIKNfULjYD .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-SBB74lkIKNfULjYD .doneCrit0,#mermaid-svg-SBB74lkIKNfULjYD .doneCrit1,#mermaid-svg-SBB74lkIKNfULjYD .doneCrit2,#mermaid-svg-SBB74lkIKNfULjYD .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-SBB74lkIKNfULjYD .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-SBB74lkIKNfULjYD .milestoneText{font-style:italic}#mermaid-svg-SBB74lkIKNfULjYD .doneCritText0,#mermaid-svg-SBB74lkIKNfULjYD .doneCritText1,#mermaid-svg-SBB74lkIKNfULjYD .doneCritText2,#mermaid-svg-SBB74lkIKNfULjYD .doneCritText3{fill:#000 !important}#mermaid-svg-SBB74lkIKNfULjYD .activeCritText0,#mermaid-svg-SBB74lkIKNfULjYD .activeCritText1,#mermaid-svg-SBB74lkIKNfULjYD .activeCritText2,#mermaid-svg-SBB74lkIKNfULjYD .activeCritText3{fill:#000 !important}#mermaid-svg-SBB74lkIKNfULjYD .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-SBB74lkIKNfULjYD g.classGroup text .title{font-weight:bolder}#mermaid-svg-SBB74lkIKNfULjYD g.clickable{cursor:pointer}#mermaid-svg-SBB74lkIKNfULjYD g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-SBB74lkIKNfULjYD g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-SBB74lkIKNfULjYD .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-SBB74lkIKNfULjYD .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-SBB74lkIKNfULjYD .dashed-line{stroke-dasharray:3}#mermaid-svg-SBB74lkIKNfULjYD #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD .commit-id,#mermaid-svg-SBB74lkIKNfULjYD .commit-msg,#mermaid-svg-SBB74lkIKNfULjYD .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-SBB74lkIKNfULjYD g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-SBB74lkIKNfULjYD g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-SBB74lkIKNfULjYD g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-SBB74lkIKNfULjYD .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-SBB74lkIKNfULjYD .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-SBB74lkIKNfULjYD .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-SBB74lkIKNfULjYD .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-SBB74lkIKNfULjYD .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-SBB74lkIKNfULjYD .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-SBB74lkIKNfULjYD .edgeLabel text{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SBB74lkIKNfULjYD .node circle.state-start{fill:black;stroke:black}#mermaid-svg-SBB74lkIKNfULjYD .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-SBB74lkIKNfULjYD #statediagram-barbEnd{fill:#9370db}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-state .divider{stroke:#9370db}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-SBB74lkIKNfULjYD .note-edge{stroke-dasharray:5}#mermaid-svg-SBB74lkIKNfULjYD .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-SBB74lkIKNfULjYD .error-icon{fill:#522}#mermaid-svg-SBB74lkIKNfULjYD .error-text{fill:#522;stroke:#522}#mermaid-svg-SBB74lkIKNfULjYD .edge-thickness-normal{stroke-width:2px}#mermaid-svg-SBB74lkIKNfULjYD .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-SBB74lkIKNfULjYD .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-SBB74lkIKNfULjYD .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-SBB74lkIKNfULjYD .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-SBB74lkIKNfULjYD .marker{fill:#333}#mermaid-svg-SBB74lkIKNfULjYD .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-SBB74lkIKNfULjYD {color: rgba(0, 0, 0, 0.75);font: ;}
a=1a=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-YcGVK3mTCJhK861Y .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-YcGVK3mTCJhK861Y .label text{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y .node rect,#mermaid-svg-YcGVK3mTCJhK861Y .node circle,#mermaid-svg-YcGVK3mTCJhK861Y .node ellipse,#mermaid-svg-YcGVK3mTCJhK861Y .node polygon,#mermaid-svg-YcGVK3mTCJhK861Y .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-YcGVK3mTCJhK861Y .node .label{text-align:center;fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y .node.clickable{cursor:pointer}#mermaid-svg-YcGVK3mTCJhK861Y .arrowheadPath{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-YcGVK3mTCJhK861Y .flowchart-link{stroke:#333;fill:none}#mermaid-svg-YcGVK3mTCJhK861Y .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-YcGVK3mTCJhK861Y .edgeLabel rect{opacity:0.9}#mermaid-svg-YcGVK3mTCJhK861Y .edgeLabel span{color:#333}#mermaid-svg-YcGVK3mTCJhK861Y .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-YcGVK3mTCJhK861Y .cluster text{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-YcGVK3mTCJhK861Y .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-YcGVK3mTCJhK861Y text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-YcGVK3mTCJhK861Y .actor-line{stroke:grey}#mermaid-svg-YcGVK3mTCJhK861Y .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-YcGVK3mTCJhK861Y .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-YcGVK3mTCJhK861Y #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-YcGVK3mTCJhK861Y .sequenceNumber{fill:#fff}#mermaid-svg-YcGVK3mTCJhK861Y #sequencenumber{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y #crosshead path{fill:#333;stroke:#333}#mermaid-svg-YcGVK3mTCJhK861Y .messageText{fill:#333;stroke:#333}#mermaid-svg-YcGVK3mTCJhK861Y .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-YcGVK3mTCJhK861Y .labelText,#mermaid-svg-YcGVK3mTCJhK861Y .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-YcGVK3mTCJhK861Y .loopText,#mermaid-svg-YcGVK3mTCJhK861Y .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-YcGVK3mTCJhK861Y .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-YcGVK3mTCJhK861Y .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-YcGVK3mTCJhK861Y .noteText,#mermaid-svg-YcGVK3mTCJhK861Y .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-YcGVK3mTCJhK861Y .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-YcGVK3mTCJhK861Y .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-YcGVK3mTCJhK861Y .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-YcGVK3mTCJhK861Y .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y .section{stroke:none;opacity:0.2}#mermaid-svg-YcGVK3mTCJhK861Y .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-YcGVK3mTCJhK861Y .section2{fill:#fff400}#mermaid-svg-YcGVK3mTCJhK861Y .section1,#mermaid-svg-YcGVK3mTCJhK861Y .section3{fill:#fff;opacity:0.2}#mermaid-svg-YcGVK3mTCJhK861Y .sectionTitle0{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y .sectionTitle1{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y .sectionTitle2{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y .sectionTitle3{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-YcGVK3mTCJhK861Y .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y .grid path{stroke-width:0}#mermaid-svg-YcGVK3mTCJhK861Y .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-YcGVK3mTCJhK861Y .task{stroke-width:2}#mermaid-svg-YcGVK3mTCJhK861Y .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y .taskText:not([font-size]){font-size:11px}#mermaid-svg-YcGVK3mTCJhK861Y .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-YcGVK3mTCJhK861Y .task.clickable{cursor:pointer}#mermaid-svg-YcGVK3mTCJhK861Y .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-YcGVK3mTCJhK861Y .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-YcGVK3mTCJhK861Y .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-YcGVK3mTCJhK861Y .taskText0,#mermaid-svg-YcGVK3mTCJhK861Y .taskText1,#mermaid-svg-YcGVK3mTCJhK861Y .taskText2,#mermaid-svg-YcGVK3mTCJhK861Y .taskText3{fill:#fff}#mermaid-svg-YcGVK3mTCJhK861Y .task0,#mermaid-svg-YcGVK3mTCJhK861Y .task1,#mermaid-svg-YcGVK3mTCJhK861Y .task2,#mermaid-svg-YcGVK3mTCJhK861Y .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-YcGVK3mTCJhK861Y .taskTextOutside0,#mermaid-svg-YcGVK3mTCJhK861Y .taskTextOutside2{fill:#000}#mermaid-svg-YcGVK3mTCJhK861Y .taskTextOutside1,#mermaid-svg-YcGVK3mTCJhK861Y .taskTextOutside3{fill:#000}#mermaid-svg-YcGVK3mTCJhK861Y .active0,#mermaid-svg-YcGVK3mTCJhK861Y .active1,#mermaid-svg-YcGVK3mTCJhK861Y .active2,#mermaid-svg-YcGVK3mTCJhK861Y .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-YcGVK3mTCJhK861Y .activeText0,#mermaid-svg-YcGVK3mTCJhK861Y .activeText1,#mermaid-svg-YcGVK3mTCJhK861Y .activeText2,#mermaid-svg-YcGVK3mTCJhK861Y .activeText3{fill:#000 !important}#mermaid-svg-YcGVK3mTCJhK861Y .done0,#mermaid-svg-YcGVK3mTCJhK861Y .done1,#mermaid-svg-YcGVK3mTCJhK861Y .done2,#mermaid-svg-YcGVK3mTCJhK861Y .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-YcGVK3mTCJhK861Y .doneText0,#mermaid-svg-YcGVK3mTCJhK861Y .doneText1,#mermaid-svg-YcGVK3mTCJhK861Y .doneText2,#mermaid-svg-YcGVK3mTCJhK861Y .doneText3{fill:#000 !important}#mermaid-svg-YcGVK3mTCJhK861Y .crit0,#mermaid-svg-YcGVK3mTCJhK861Y .crit1,#mermaid-svg-YcGVK3mTCJhK861Y .crit2,#mermaid-svg-YcGVK3mTCJhK861Y .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-YcGVK3mTCJhK861Y .activeCrit0,#mermaid-svg-YcGVK3mTCJhK861Y .activeCrit1,#mermaid-svg-YcGVK3mTCJhK861Y .activeCrit2,#mermaid-svg-YcGVK3mTCJhK861Y .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-YcGVK3mTCJhK861Y .doneCrit0,#mermaid-svg-YcGVK3mTCJhK861Y .doneCrit1,#mermaid-svg-YcGVK3mTCJhK861Y .doneCrit2,#mermaid-svg-YcGVK3mTCJhK861Y .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-YcGVK3mTCJhK861Y .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-YcGVK3mTCJhK861Y .milestoneText{font-style:italic}#mermaid-svg-YcGVK3mTCJhK861Y .doneCritText0,#mermaid-svg-YcGVK3mTCJhK861Y .doneCritText1,#mermaid-svg-YcGVK3mTCJhK861Y .doneCritText2,#mermaid-svg-YcGVK3mTCJhK861Y .doneCritText3{fill:#000 !important}#mermaid-svg-YcGVK3mTCJhK861Y .activeCritText0,#mermaid-svg-YcGVK3mTCJhK861Y .activeCritText1,#mermaid-svg-YcGVK3mTCJhK861Y .activeCritText2,#mermaid-svg-YcGVK3mTCJhK861Y .activeCritText3{fill:#000 !important}#mermaid-svg-YcGVK3mTCJhK861Y .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-YcGVK3mTCJhK861Y g.classGroup text .title{font-weight:bolder}#mermaid-svg-YcGVK3mTCJhK861Y g.clickable{cursor:pointer}#mermaid-svg-YcGVK3mTCJhK861Y g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-YcGVK3mTCJhK861Y g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-YcGVK3mTCJhK861Y .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-YcGVK3mTCJhK861Y .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-YcGVK3mTCJhK861Y .dashed-line{stroke-dasharray:3}#mermaid-svg-YcGVK3mTCJhK861Y #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y .commit-id,#mermaid-svg-YcGVK3mTCJhK861Y .commit-msg,#mermaid-svg-YcGVK3mTCJhK861Y .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-YcGVK3mTCJhK861Y g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-YcGVK3mTCJhK861Y g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-YcGVK3mTCJhK861Y g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-YcGVK3mTCJhK861Y .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-YcGVK3mTCJhK861Y .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-YcGVK3mTCJhK861Y .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-YcGVK3mTCJhK861Y .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-YcGVK3mTCJhK861Y .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-YcGVK3mTCJhK861Y .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-YcGVK3mTCJhK861Y .edgeLabel text{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-YcGVK3mTCJhK861Y .node circle.state-start{fill:black;stroke:black}#mermaid-svg-YcGVK3mTCJhK861Y .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-YcGVK3mTCJhK861Y #statediagram-barbEnd{fill:#9370db}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-state .divider{stroke:#9370db}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-YcGVK3mTCJhK861Y .note-edge{stroke-dasharray:5}#mermaid-svg-YcGVK3mTCJhK861Y .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-YcGVK3mTCJhK861Y .error-icon{fill:#522}#mermaid-svg-YcGVK3mTCJhK861Y .error-text{fill:#522;stroke:#522}#mermaid-svg-YcGVK3mTCJhK861Y .edge-thickness-normal{stroke-width:2px}#mermaid-svg-YcGVK3mTCJhK861Y .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-YcGVK3mTCJhK861Y .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-YcGVK3mTCJhK861Y .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-YcGVK3mTCJhK861Y .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-YcGVK3mTCJhK861Y .marker{fill:#333}#mermaid-svg-YcGVK3mTCJhK861Y .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-YcGVK3mTCJhK861Y {color: rgba(0, 0, 0, 0.75);font: ;}
a=1a=2方形圓角條件a結果1結果2豎向流程圖
標準流程圖源碼格式:
標記語言為:`flow `
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開始框處理框判斷框(是或否?)輸入輸出框結束框子流程yesno
標準流程圖源碼格式(橫向):
flowchat
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
Created with Rapha?l 2.3.0開始框處理框判斷框(是或否?)輸入輸出框結束框子流程yesno
UML時序圖源碼樣例:
標記語言為:`sequence `
sequenceDiagram
對象A->>對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->>對象A: 我很好(響應)
對象A->>對象B: 你真的好嗎?
#mermaid-svg-xC5UGmwlG0TrRMLc .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .label text{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .node rect,#mermaid-svg-xC5UGmwlG0TrRMLc .node circle,#mermaid-svg-xC5UGmwlG0TrRMLc .node ellipse,#mermaid-svg-xC5UGmwlG0TrRMLc .node polygon,#mermaid-svg-xC5UGmwlG0TrRMLc .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-xC5UGmwlG0TrRMLc .node .label{text-align:center;fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .node.clickable{cursor:pointer}#mermaid-svg-xC5UGmwlG0TrRMLc .arrowheadPath{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-xC5UGmwlG0TrRMLc .flowchart-link{stroke:#333;fill:none}#mermaid-svg-xC5UGmwlG0TrRMLc .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-xC5UGmwlG0TrRMLc .edgeLabel rect{opacity:0.9}#mermaid-svg-xC5UGmwlG0TrRMLc .edgeLabel span{color:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-xC5UGmwlG0TrRMLc .cluster text{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-xC5UGmwlG0TrRMLc .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-xC5UGmwlG0TrRMLc text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-xC5UGmwlG0TrRMLc .actor-line{stroke:grey}#mermaid-svg-xC5UGmwlG0TrRMLc .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-xC5UGmwlG0TrRMLc #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .sequenceNumber{fill:#fff}#mermaid-svg-xC5UGmwlG0TrRMLc #sequencenumber{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc #crosshead path{fill:#333;stroke:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .messageText{fill:#333;stroke:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-xC5UGmwlG0TrRMLc .labelText,#mermaid-svg-xC5UGmwlG0TrRMLc .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-xC5UGmwlG0TrRMLc .loopText,#mermaid-svg-xC5UGmwlG0TrRMLc .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-xC5UGmwlG0TrRMLc .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-xC5UGmwlG0TrRMLc .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-xC5UGmwlG0TrRMLc .noteText,#mermaid-svg-xC5UGmwlG0TrRMLc .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-xC5UGmwlG0TrRMLc .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-xC5UGmwlG0TrRMLc .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-xC5UGmwlG0TrRMLc .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-xC5UGmwlG0TrRMLc .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc .section{stroke:none;opacity:0.2}#mermaid-svg-xC5UGmwlG0TrRMLc .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-xC5UGmwlG0TrRMLc .section2{fill:#fff400}#mermaid-svg-xC5UGmwlG0TrRMLc .section1,#mermaid-svg-xC5UGmwlG0TrRMLc .section3{fill:#fff;opacity:0.2}#mermaid-svg-xC5UGmwlG0TrRMLc .sectionTitle0{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .sectionTitle1{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .sectionTitle2{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .sectionTitle3{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-xC5UGmwlG0TrRMLc .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc .grid path{stroke-width:0}#mermaid-svg-xC5UGmwlG0TrRMLc .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-xC5UGmwlG0TrRMLc .task{stroke-width:2}#mermaid-svg-xC5UGmwlG0TrRMLc .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc .taskText:not([font-size]){font-size:11px}#mermaid-svg-xC5UGmwlG0TrRMLc .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-xC5UGmwlG0TrRMLc .task.clickable{cursor:pointer}#mermaid-svg-xC5UGmwlG0TrRMLc .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-xC5UGmwlG0TrRMLc .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-xC5UGmwlG0TrRMLc .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-xC5UGmwlG0TrRMLc .taskText0,#mermaid-svg-xC5UGmwlG0TrRMLc .taskText1,#mermaid-svg-xC5UGmwlG0TrRMLc .taskText2,#mermaid-svg-xC5UGmwlG0TrRMLc .taskText3{fill:#fff}#mermaid-svg-xC5UGmwlG0TrRMLc .task0,#mermaid-svg-xC5UGmwlG0TrRMLc .task1,#mermaid-svg-xC5UGmwlG0TrRMLc .task2,#mermaid-svg-xC5UGmwlG0TrRMLc .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-xC5UGmwlG0TrRMLc .taskTextOutside0,#mermaid-svg-xC5UGmwlG0TrRMLc .taskTextOutside2{fill:#000}#mermaid-svg-xC5UGmwlG0TrRMLc .taskTextOutside1,#mermaid-svg-xC5UGmwlG0TrRMLc .taskTextOutside3{fill:#000}#mermaid-svg-xC5UGmwlG0TrRMLc .active0,#mermaid-svg-xC5UGmwlG0TrRMLc .active1,#mermaid-svg-xC5UGmwlG0TrRMLc .active2,#mermaid-svg-xC5UGmwlG0TrRMLc .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-xC5UGmwlG0TrRMLc .activeText0,#mermaid-svg-xC5UGmwlG0TrRMLc .activeText1,#mermaid-svg-xC5UGmwlG0TrRMLc .activeText2,#mermaid-svg-xC5UGmwlG0TrRMLc .activeText3{fill:#000 !important}#mermaid-svg-xC5UGmwlG0TrRMLc .done0,#mermaid-svg-xC5UGmwlG0TrRMLc .done1,#mermaid-svg-xC5UGmwlG0TrRMLc .done2,#mermaid-svg-xC5UGmwlG0TrRMLc .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-xC5UGmwlG0TrRMLc .doneText0,#mermaid-svg-xC5UGmwlG0TrRMLc .doneText1,#mermaid-svg-xC5UGmwlG0TrRMLc .doneText2,#mermaid-svg-xC5UGmwlG0TrRMLc .doneText3{fill:#000 !important}#mermaid-svg-xC5UGmwlG0TrRMLc .crit0,#mermaid-svg-xC5UGmwlG0TrRMLc .crit1,#mermaid-svg-xC5UGmwlG0TrRMLc .crit2,#mermaid-svg-xC5UGmwlG0TrRMLc .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-xC5UGmwlG0TrRMLc .activeCrit0,#mermaid-svg-xC5UGmwlG0TrRMLc .activeCrit1,#mermaid-svg-xC5UGmwlG0TrRMLc .activeCrit2,#mermaid-svg-xC5UGmwlG0TrRMLc .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-xC5UGmwlG0TrRMLc .doneCrit0,#mermaid-svg-xC5UGmwlG0TrRMLc .doneCrit1,#mermaid-svg-xC5UGmwlG0TrRMLc .doneCrit2,#mermaid-svg-xC5UGmwlG0TrRMLc .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-xC5UGmwlG0TrRMLc .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-xC5UGmwlG0TrRMLc .milestoneText{font-style:italic}#mermaid-svg-xC5UGmwlG0TrRMLc .doneCritText0,#mermaid-svg-xC5UGmwlG0TrRMLc .doneCritText1,#mermaid-svg-xC5UGmwlG0TrRMLc .doneCritText2,#mermaid-svg-xC5UGmwlG0TrRMLc .doneCritText3{fill:#000 !important}#mermaid-svg-xC5UGmwlG0TrRMLc .activeCritText0,#mermaid-svg-xC5UGmwlG0TrRMLc .activeCritText1,#mermaid-svg-xC5UGmwlG0TrRMLc .activeCritText2,#mermaid-svg-xC5UGmwlG0TrRMLc .activeCritText3{fill:#000 !important}#mermaid-svg-xC5UGmwlG0TrRMLc .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-xC5UGmwlG0TrRMLc g.classGroup text .title{font-weight:bolder}#mermaid-svg-xC5UGmwlG0TrRMLc g.clickable{cursor:pointer}#mermaid-svg-xC5UGmwlG0TrRMLc g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-xC5UGmwlG0TrRMLc g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-xC5UGmwlG0TrRMLc .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-xC5UGmwlG0TrRMLc .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-xC5UGmwlG0TrRMLc .dashed-line{stroke-dasharray:3}#mermaid-svg-xC5UGmwlG0TrRMLc #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc .commit-id,#mermaid-svg-xC5UGmwlG0TrRMLc .commit-msg,#mermaid-svg-xC5UGmwlG0TrRMLc .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-xC5UGmwlG0TrRMLc g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-xC5UGmwlG0TrRMLc g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-xC5UGmwlG0TrRMLc g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-xC5UGmwlG0TrRMLc .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-xC5UGmwlG0TrRMLc .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-xC5UGmwlG0TrRMLc .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-xC5UGmwlG0TrRMLc .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-xC5UGmwlG0TrRMLc .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-xC5UGmwlG0TrRMLc .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-xC5UGmwlG0TrRMLc .edgeLabel text{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-xC5UGmwlG0TrRMLc .node circle.state-start{fill:black;stroke:black}#mermaid-svg-xC5UGmwlG0TrRMLc .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-xC5UGmwlG0TrRMLc #statediagram-barbEnd{fill:#9370db}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-state .divider{stroke:#9370db}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-xC5UGmwlG0TrRMLc .note-edge{stroke-dasharray:5}#mermaid-svg-xC5UGmwlG0TrRMLc .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-xC5UGmwlG0TrRMLc .error-icon{fill:#522}#mermaid-svg-xC5UGmwlG0TrRMLc .error-text{fill:#522;stroke:#522}#mermaid-svg-xC5UGmwlG0TrRMLc .edge-thickness-normal{stroke-width:2px}#mermaid-svg-xC5UGmwlG0TrRMLc .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-xC5UGmwlG0TrRMLc .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-xC5UGmwlG0TrRMLc .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-xC5UGmwlG0TrRMLc .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-xC5UGmwlG0TrRMLc .marker{fill:#333}#mermaid-svg-xC5UGmwlG0TrRMLc .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-xC5UGmwlG0TrRMLc {color: rgba(0, 0, 0, 0.75);font: ;}對象A對象B對象B你好嗎?(請求)對象B的描述對象A的描述(提示)我很好(響應)你真的好嗎?對象A對象B標題:復雜使用
UML時序圖源碼復雜樣例:
標記語言為:`mermaid `
sequenceDiagram
Title: 標題:復雜使用
對象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-goKa91OGtI2jh8Fe .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-goKa91OGtI2jh8Fe .label text{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe .node rect,#mermaid-svg-goKa91OGtI2jh8Fe .node circle,#mermaid-svg-goKa91OGtI2jh8Fe .node ellipse,#mermaid-svg-goKa91OGtI2jh8Fe .node polygon,#mermaid-svg-goKa91OGtI2jh8Fe .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-goKa91OGtI2jh8Fe .node .label{text-align:center;fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe .node.clickable{cursor:pointer}#mermaid-svg-goKa91OGtI2jh8Fe .arrowheadPath{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-goKa91OGtI2jh8Fe .flowchart-link{stroke:#333;fill:none}#mermaid-svg-goKa91OGtI2jh8Fe .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-goKa91OGtI2jh8Fe .edgeLabel rect{opacity:0.9}#mermaid-svg-goKa91OGtI2jh8Fe .edgeLabel span{color:#333}#mermaid-svg-goKa91OGtI2jh8Fe .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-goKa91OGtI2jh8Fe .cluster text{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-goKa91OGtI2jh8Fe .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-goKa91OGtI2jh8Fe text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-goKa91OGtI2jh8Fe .actor-line{stroke:grey}#mermaid-svg-goKa91OGtI2jh8Fe .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-goKa91OGtI2jh8Fe .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-goKa91OGtI2jh8Fe #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-goKa91OGtI2jh8Fe .sequenceNumber{fill:#fff}#mermaid-svg-goKa91OGtI2jh8Fe #sequencenumber{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe #crosshead path{fill:#333;stroke:#333}#mermaid-svg-goKa91OGtI2jh8Fe .messageText{fill:#333;stroke:#333}#mermaid-svg-goKa91OGtI2jh8Fe .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-goKa91OGtI2jh8Fe .labelText,#mermaid-svg-goKa91OGtI2jh8Fe .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-goKa91OGtI2jh8Fe .loopText,#mermaid-svg-goKa91OGtI2jh8Fe .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-goKa91OGtI2jh8Fe .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-goKa91OGtI2jh8Fe .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-goKa91OGtI2jh8Fe .noteText,#mermaid-svg-goKa91OGtI2jh8Fe .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-goKa91OGtI2jh8Fe .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-goKa91OGtI2jh8Fe .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-goKa91OGtI2jh8Fe .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-goKa91OGtI2jh8Fe .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe .section{stroke:none;opacity:0.2}#mermaid-svg-goKa91OGtI2jh8Fe .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-goKa91OGtI2jh8Fe .section2{fill:#fff400}#mermaid-svg-goKa91OGtI2jh8Fe .section1,#mermaid-svg-goKa91OGtI2jh8Fe .section3{fill:#fff;opacity:0.2}#mermaid-svg-goKa91OGtI2jh8Fe .sectionTitle0{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe .sectionTitle1{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe .sectionTitle2{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe .sectionTitle3{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-goKa91OGtI2jh8Fe .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe .grid path{stroke-width:0}#mermaid-svg-goKa91OGtI2jh8Fe .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-goKa91OGtI2jh8Fe .task{stroke-width:2}#mermaid-svg-goKa91OGtI2jh8Fe .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe .taskText:not([font-size]){font-size:11px}#mermaid-svg-goKa91OGtI2jh8Fe .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-goKa91OGtI2jh8Fe .task.clickable{cursor:pointer}#mermaid-svg-goKa91OGtI2jh8Fe .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-goKa91OGtI2jh8Fe .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-goKa91OGtI2jh8Fe .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-goKa91OGtI2jh8Fe .taskText0,#mermaid-svg-goKa91OGtI2jh8Fe .taskText1,#mermaid-svg-goKa91OGtI2jh8Fe .taskText2,#mermaid-svg-goKa91OGtI2jh8Fe .taskText3{fill:#fff}#mermaid-svg-goKa91OGtI2jh8Fe .task0,#mermaid-svg-goKa91OGtI2jh8Fe .task1,#mermaid-svg-goKa91OGtI2jh8Fe .task2,#mermaid-svg-goKa91OGtI2jh8Fe .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-goKa91OGtI2jh8Fe .taskTextOutside0,#mermaid-svg-goKa91OGtI2jh8Fe .taskTextOutside2{fill:#000}#mermaid-svg-goKa91OGtI2jh8Fe .taskTextOutside1,#mermaid-svg-goKa91OGtI2jh8Fe .taskTextOutside3{fill:#000}#mermaid-svg-goKa91OGtI2jh8Fe .active0,#mermaid-svg-goKa91OGtI2jh8Fe .active1,#mermaid-svg-goKa91OGtI2jh8Fe .active2,#mermaid-svg-goKa91OGtI2jh8Fe .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-goKa91OGtI2jh8Fe .activeText0,#mermaid-svg-goKa91OGtI2jh8Fe .activeText1,#mermaid-svg-goKa91OGtI2jh8Fe .activeText2,#mermaid-svg-goKa91OGtI2jh8Fe .activeText3{fill:#000 !important}#mermaid-svg-goKa91OGtI2jh8Fe .done0,#mermaid-svg-goKa91OGtI2jh8Fe .done1,#mermaid-svg-goKa91OGtI2jh8Fe .done2,#mermaid-svg-goKa91OGtI2jh8Fe .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-goKa91OGtI2jh8Fe .doneText0,#mermaid-svg-goKa91OGtI2jh8Fe .doneText1,#mermaid-svg-goKa91OGtI2jh8Fe .doneText2,#mermaid-svg-goKa91OGtI2jh8Fe .doneText3{fill:#000 !important}#mermaid-svg-goKa91OGtI2jh8Fe .crit0,#mermaid-svg-goKa91OGtI2jh8Fe .crit1,#mermaid-svg-goKa91OGtI2jh8Fe .crit2,#mermaid-svg-goKa91OGtI2jh8Fe .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-goKa91OGtI2jh8Fe .activeCrit0,#mermaid-svg-goKa91OGtI2jh8Fe .activeCrit1,#mermaid-svg-goKa91OGtI2jh8Fe .activeCrit2,#mermaid-svg-goKa91OGtI2jh8Fe .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-goKa91OGtI2jh8Fe .doneCrit0,#mermaid-svg-goKa91OGtI2jh8Fe .doneCrit1,#mermaid-svg-goKa91OGtI2jh8Fe .doneCrit2,#mermaid-svg-goKa91OGtI2jh8Fe .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-goKa91OGtI2jh8Fe .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-goKa91OGtI2jh8Fe .milestoneText{font-style:italic}#mermaid-svg-goKa91OGtI2jh8Fe .doneCritText0,#mermaid-svg-goKa91OGtI2jh8Fe .doneCritText1,#mermaid-svg-goKa91OGtI2jh8Fe .doneCritText2,#mermaid-svg-goKa91OGtI2jh8Fe .doneCritText3{fill:#000 !important}#mermaid-svg-goKa91OGtI2jh8Fe .activeCritText0,#mermaid-svg-goKa91OGtI2jh8Fe .activeCritText1,#mermaid-svg-goKa91OGtI2jh8Fe .activeCritText2,#mermaid-svg-goKa91OGtI2jh8Fe .activeCritText3{fill:#000 !important}#mermaid-svg-goKa91OGtI2jh8Fe .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-goKa91OGtI2jh8Fe g.classGroup text .title{font-weight:bolder}#mermaid-svg-goKa91OGtI2jh8Fe g.clickable{cursor:pointer}#mermaid-svg-goKa91OGtI2jh8Fe g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-goKa91OGtI2jh8Fe g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-goKa91OGtI2jh8Fe .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-goKa91OGtI2jh8Fe .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-goKa91OGtI2jh8Fe .dashed-line{stroke-dasharray:3}#mermaid-svg-goKa91OGtI2jh8Fe #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe .commit-id,#mermaid-svg-goKa91OGtI2jh8Fe .commit-msg,#mermaid-svg-goKa91OGtI2jh8Fe .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-goKa91OGtI2jh8Fe g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-goKa91OGtI2jh8Fe g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-goKa91OGtI2jh8Fe g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-goKa91OGtI2jh8Fe .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-goKa91OGtI2jh8Fe .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-goKa91OGtI2jh8Fe .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-goKa91OGtI2jh8Fe .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-goKa91OGtI2jh8Fe .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-goKa91OGtI2jh8Fe .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-goKa91OGtI2jh8Fe .edgeLabel text{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-goKa91OGtI2jh8Fe .node circle.state-start{fill:black;stroke:black}#mermaid-svg-goKa91OGtI2jh8Fe .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-goKa91OGtI2jh8Fe #statediagram-barbEnd{fill:#9370db}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-state .divider{stroke:#9370db}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-goKa91OGtI2jh8Fe .note-edge{stroke-dasharray:5}#mermaid-svg-goKa91OGtI2jh8Fe .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-goKa91OGtI2jh8Fe .error-icon{fill:#522}#mermaid-svg-goKa91OGtI2jh8Fe .error-text{fill:#522;stroke:#522}#mermaid-svg-goKa91OGtI2jh8Fe .edge-thickness-normal{stroke-width:2px}#mermaid-svg-goKa91OGtI2jh8Fe .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-goKa91OGtI2jh8Fe .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-goKa91OGtI2jh8Fe .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-goKa91OGtI2jh8Fe .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-goKa91OGtI2jh8Fe .marker{fill:#333}#mermaid-svg-goKa91OGtI2jh8Fe .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-goKa91OGtI2jh8Fe {color: rgba(0, 0, 0, 0.75);font: ;}對象A對象B小三C對象B你好嗎?(請求)對象B的描述對象A的描述(提示)我很好(響應)你好嗎對象B找我了你真的好嗎?我們是朋友沒人陪我玩對象A對象B小三C標題:復雜使用
UML標準時序圖樣例:
標記語言為:`mermaid `
%% 時序圖例子,-> 直線,-->虛線,->>實線箭頭sequenceDiagramparticipant 張三participant 李四張三->王五: 王五你好嗎?loop 健康檢查王五->王五: 與疾病戰斗endNote right of 王五: 合理 食物 <br/>看醫生...李四-->>張三: 很好!王五->李四: 你怎么樣?李四-->王五: 很好!
#mermaid-svg-k5lOl3UikX3ZwS3d .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .label text{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .node rect,#mermaid-svg-k5lOl3UikX3ZwS3d .node circle,#mermaid-svg-k5lOl3UikX3ZwS3d .node ellipse,#mermaid-svg-k5lOl3UikX3ZwS3d .node polygon,#mermaid-svg-k5lOl3UikX3ZwS3d .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-k5lOl3UikX3ZwS3d .node .label{text-align:center;fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .node.clickable{cursor:pointer}#mermaid-svg-k5lOl3UikX3ZwS3d .arrowheadPath{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-k5lOl3UikX3ZwS3d .flowchart-link{stroke:#333;fill:none}#mermaid-svg-k5lOl3UikX3ZwS3d .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-k5lOl3UikX3ZwS3d .edgeLabel rect{opacity:0.9}#mermaid-svg-k5lOl3UikX3ZwS3d .edgeLabel span{color:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-k5lOl3UikX3ZwS3d .cluster text{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-k5lOl3UikX3ZwS3d .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-k5lOl3UikX3ZwS3d text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-k5lOl3UikX3ZwS3d .actor-line{stroke:grey}#mermaid-svg-k5lOl3UikX3ZwS3d .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-k5lOl3UikX3ZwS3d #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .sequenceNumber{fill:#fff}#mermaid-svg-k5lOl3UikX3ZwS3d #sequencenumber{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d #crosshead path{fill:#333;stroke:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .messageText{fill:#333;stroke:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-k5lOl3UikX3ZwS3d .labelText,#mermaid-svg-k5lOl3UikX3ZwS3d .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-k5lOl3UikX3ZwS3d .loopText,#mermaid-svg-k5lOl3UikX3ZwS3d .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-k5lOl3UikX3ZwS3d .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-k5lOl3UikX3ZwS3d .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-k5lOl3UikX3ZwS3d .noteText,#mermaid-svg-k5lOl3UikX3ZwS3d .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-k5lOl3UikX3ZwS3d .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-k5lOl3UikX3ZwS3d .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-k5lOl3UikX3ZwS3d .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-k5lOl3UikX3ZwS3d .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d .section{stroke:none;opacity:0.2}#mermaid-svg-k5lOl3UikX3ZwS3d .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-k5lOl3UikX3ZwS3d .section2{fill:#fff400}#mermaid-svg-k5lOl3UikX3ZwS3d .section1,#mermaid-svg-k5lOl3UikX3ZwS3d .section3{fill:#fff;opacity:0.2}#mermaid-svg-k5lOl3UikX3ZwS3d .sectionTitle0{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .sectionTitle1{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .sectionTitle2{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .sectionTitle3{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-k5lOl3UikX3ZwS3d .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d .grid path{stroke-width:0}#mermaid-svg-k5lOl3UikX3ZwS3d .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-k5lOl3UikX3ZwS3d .task{stroke-width:2}#mermaid-svg-k5lOl3UikX3ZwS3d .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d .taskText:not([font-size]){font-size:11px}#mermaid-svg-k5lOl3UikX3ZwS3d .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-k5lOl3UikX3ZwS3d .task.clickable{cursor:pointer}#mermaid-svg-k5lOl3UikX3ZwS3d .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-k5lOl3UikX3ZwS3d .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-k5lOl3UikX3ZwS3d .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-k5lOl3UikX3ZwS3d .taskText0,#mermaid-svg-k5lOl3UikX3ZwS3d .taskText1,#mermaid-svg-k5lOl3UikX3ZwS3d .taskText2,#mermaid-svg-k5lOl3UikX3ZwS3d .taskText3{fill:#fff}#mermaid-svg-k5lOl3UikX3ZwS3d .task0,#mermaid-svg-k5lOl3UikX3ZwS3d .task1,#mermaid-svg-k5lOl3UikX3ZwS3d .task2,#mermaid-svg-k5lOl3UikX3ZwS3d .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-k5lOl3UikX3ZwS3d .taskTextOutside0,#mermaid-svg-k5lOl3UikX3ZwS3d .taskTextOutside2{fill:#000}#mermaid-svg-k5lOl3UikX3ZwS3d .taskTextOutside1,#mermaid-svg-k5lOl3UikX3ZwS3d .taskTextOutside3{fill:#000}#mermaid-svg-k5lOl3UikX3ZwS3d .active0,#mermaid-svg-k5lOl3UikX3ZwS3d .active1,#mermaid-svg-k5lOl3UikX3ZwS3d .active2,#mermaid-svg-k5lOl3UikX3ZwS3d .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-k5lOl3UikX3ZwS3d .activeText0,#mermaid-svg-k5lOl3UikX3ZwS3d .activeText1,#mermaid-svg-k5lOl3UikX3ZwS3d .activeText2,#mermaid-svg-k5lOl3UikX3ZwS3d .activeText3{fill:#000 !important}#mermaid-svg-k5lOl3UikX3ZwS3d .done0,#mermaid-svg-k5lOl3UikX3ZwS3d .done1,#mermaid-svg-k5lOl3UikX3ZwS3d .done2,#mermaid-svg-k5lOl3UikX3ZwS3d .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-k5lOl3UikX3ZwS3d .doneText0,#mermaid-svg-k5lOl3UikX3ZwS3d .doneText1,#mermaid-svg-k5lOl3UikX3ZwS3d .doneText2,#mermaid-svg-k5lOl3UikX3ZwS3d .doneText3{fill:#000 !important}#mermaid-svg-k5lOl3UikX3ZwS3d .crit0,#mermaid-svg-k5lOl3UikX3ZwS3d .crit1,#mermaid-svg-k5lOl3UikX3ZwS3d .crit2,#mermaid-svg-k5lOl3UikX3ZwS3d .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-k5lOl3UikX3ZwS3d .activeCrit0,#mermaid-svg-k5lOl3UikX3ZwS3d .activeCrit1,#mermaid-svg-k5lOl3UikX3ZwS3d .activeCrit2,#mermaid-svg-k5lOl3UikX3ZwS3d .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-k5lOl3UikX3ZwS3d .doneCrit0,#mermaid-svg-k5lOl3UikX3ZwS3d .doneCrit1,#mermaid-svg-k5lOl3UikX3ZwS3d .doneCrit2,#mermaid-svg-k5lOl3UikX3ZwS3d .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-k5lOl3UikX3ZwS3d .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-k5lOl3UikX3ZwS3d .milestoneText{font-style:italic}#mermaid-svg-k5lOl3UikX3ZwS3d .doneCritText0,#mermaid-svg-k5lOl3UikX3ZwS3d .doneCritText1,#mermaid-svg-k5lOl3UikX3ZwS3d .doneCritText2,#mermaid-svg-k5lOl3UikX3ZwS3d .doneCritText3{fill:#000 !important}#mermaid-svg-k5lOl3UikX3ZwS3d .activeCritText0,#mermaid-svg-k5lOl3UikX3ZwS3d .activeCritText1,#mermaid-svg-k5lOl3UikX3ZwS3d .activeCritText2,#mermaid-svg-k5lOl3UikX3ZwS3d .activeCritText3{fill:#000 !important}#mermaid-svg-k5lOl3UikX3ZwS3d .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-k5lOl3UikX3ZwS3d g.classGroup text .title{font-weight:bolder}#mermaid-svg-k5lOl3UikX3ZwS3d g.clickable{cursor:pointer}#mermaid-svg-k5lOl3UikX3ZwS3d g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-k5lOl3UikX3ZwS3d g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-k5lOl3UikX3ZwS3d .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-k5lOl3UikX3ZwS3d .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-k5lOl3UikX3ZwS3d .dashed-line{stroke-dasharray:3}#mermaid-svg-k5lOl3UikX3ZwS3d #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d .commit-id,#mermaid-svg-k5lOl3UikX3ZwS3d .commit-msg,#mermaid-svg-k5lOl3UikX3ZwS3d .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-k5lOl3UikX3ZwS3d g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-k5lOl3UikX3ZwS3d g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-k5lOl3UikX3ZwS3d g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-k5lOl3UikX3ZwS3d .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-k5lOl3UikX3ZwS3d .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-k5lOl3UikX3ZwS3d .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-k5lOl3UikX3ZwS3d .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-k5lOl3UikX3ZwS3d .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-k5lOl3UikX3ZwS3d .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-k5lOl3UikX3ZwS3d .edgeLabel text{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-k5lOl3UikX3ZwS3d .node circle.state-start{fill:black;stroke:black}#mermaid-svg-k5lOl3UikX3ZwS3d .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-k5lOl3UikX3ZwS3d #statediagram-barbEnd{fill:#9370db}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-state .divider{stroke:#9370db}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-k5lOl3UikX3ZwS3d .note-edge{stroke-dasharray:5}#mermaid-svg-k5lOl3UikX3ZwS3d .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-k5lOl3UikX3ZwS3d .error-icon{fill:#522}#mermaid-svg-k5lOl3UikX3ZwS3d .error-text{fill:#522;stroke:#522}#mermaid-svg-k5lOl3UikX3ZwS3d .edge-thickness-normal{stroke-width:2px}#mermaid-svg-k5lOl3UikX3ZwS3d .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-k5lOl3UikX3ZwS3d .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-k5lOl3UikX3ZwS3d .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-k5lOl3UikX3ZwS3d .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-k5lOl3UikX3ZwS3d .marker{fill:#333}#mermaid-svg-k5lOl3UikX3ZwS3d .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-k5lOl3UikX3ZwS3d {color: rgba(0, 0, 0, 0.75);font: ;}張三李四王五王五你好嗎?與疾病戰斗loop[健康檢查]合理 食物 看醫生...很好!你怎么樣?很好!張三李四王五標題:復雜使用
甘特圖樣例:
標記語言為:`mermaid `
ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidsection 現有任務已完成 :done, des1, 2014-01-06,2014-01-08進行中 :active, des2, 2014-01-09, 3d計劃中 : des3, after des2, 5d
Mon 06Mon 13已完成 進行中 計劃中 現有任務Adding GANTT diagram functionality to mermaid
注意:有部分Markdow語法在網頁上無法正常顯示 ,只適用于筆記中查看
期待你的三連(* ̄︶ ̄)
歡迎訪問我的個人bolg:overwhat
總結
以上是生活随笔為你收集整理的Markdown的使用 Markdown的基础与高级使用的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。