微博撰写-流程图-序列图-甘特图-mermaid流程图-效果不错

文章目录

- 1.流程图
- - 1.1节点的形状
  - 1.2连线
  - 1.3子图
- 2.序列图
- - 2.1连线
- 3.甘特图
- - 3.1关键字

1.流程图

节点名不能与关键字同名，使用引号可以避免一些不必要的麻烦，如避免与关键字同名。关键字graph表示一个流程图的开始，同时需要指定该图的方向。T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN。

TB，从上到下 TD，从上到下 BT，从下到上 RL，从右到左 LR，从左到右

graph LR
    A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]

#mermaid-svg-AXFop8kbVd8vOooj {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-AXFop8kbVd8vOooj .error-icon{fill:#552222;}#mermaid-svg-AXFop8kbVd8vOooj .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-AXFop8kbVd8vOooj .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-AXFop8kbVd8vOooj .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-AXFop8kbVd8vOooj .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-AXFop8kbVd8vOooj .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-AXFop8kbVd8vOooj .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-AXFop8kbVd8vOooj .marker{fill:#333333;stroke:#333333;}#mermaid-svg-AXFop8kbVd8vOooj .marker.cross{stroke:#333333;}#mermaid-svg-AXFop8kbVd8vOooj svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-AXFop8kbVd8vOooj .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-AXFop8kbVd8vOooj .cluster-label text{fill:#333;}#mermaid-svg-AXFop8kbVd8vOooj .cluster-label span{color:#333;}#mermaid-svg-AXFop8kbVd8vOooj .label text,#mermaid-svg-AXFop8kbVd8vOooj span{fill:#333;color:#333;}#mermaid-svg-AXFop8kbVd8vOooj .node rect,#mermaid-svg-AXFop8kbVd8vOooj .node circle,#mermaid-svg-AXFop8kbVd8vOooj .node ellipse,#mermaid-svg-AXFop8kbVd8vOooj .node polygon,#mermaid-svg-AXFop8kbVd8vOooj .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-AXFop8kbVd8vOooj .node .label{text-align:center;}#mermaid-svg-AXFop8kbVd8vOooj .node.clickable{cursor:pointer;}#mermaid-svg-AXFop8kbVd8vOooj .arrowheadPath{fill:#333333;}#mermaid-svg-AXFop8kbVd8vOooj .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-AXFop8kbVd8vOooj .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-AXFop8kbVd8vOooj .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-AXFop8kbVd8vOooj .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-AXFop8kbVd8vOooj .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-AXFop8kbVd8vOooj .cluster text{fill:#333;}#mermaid-svg-AXFop8kbVd8vOooj .cluster span{color:#333;}#mermaid-svg-AXFop8kbVd8vOooj 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-AXFop8kbVd8vOooj :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

a=1

a=2

方形

圆角

条件a

结果1

结果2

横向流程图

1.1节点的形状

默认节点 A 文本节点 B[bname] 圆角节点 C(cname) 圆形节点 D((dname)) 非对称节点 E>ename] 菱形节点 F{fname} A~F 是当前节点名字，类似于变量名，画图时便于引用

graph TB
    A
    B[bname]
    C(cname)
    D((dname))
    E>ename]
    F{fname}

#mermaid-svg-flEIgFwdzmFjHSRl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-flEIgFwdzmFjHSRl .error-icon{fill:#552222;}#mermaid-svg-flEIgFwdzmFjHSRl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-flEIgFwdzmFjHSRl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-flEIgFwdzmFjHSRl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-flEIgFwdzmFjHSRl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-flEIgFwdzmFjHSRl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-flEIgFwdzmFjHSRl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-flEIgFwdzmFjHSRl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-flEIgFwdzmFjHSRl .marker.cross{stroke:#333333;}#mermaid-svg-flEIgFwdzmFjHSRl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-flEIgFwdzmFjHSRl .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-flEIgFwdzmFjHSRl .cluster-label text{fill:#333;}#mermaid-svg-flEIgFwdzmFjHSRl .cluster-label span{color:#333;}#mermaid-svg-flEIgFwdzmFjHSRl .label text,#mermaid-svg-flEIgFwdzmFjHSRl span{fill:#333;color:#333;}#mermaid-svg-flEIgFwdzmFjHSRl .node rect,#mermaid-svg-flEIgFwdzmFjHSRl .node circle,#mermaid-svg-flEIgFwdzmFjHSRl .node ellipse,#mermaid-svg-flEIgFwdzmFjHSRl .node polygon,#mermaid-svg-flEIgFwdzmFjHSRl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-flEIgFwdzmFjHSRl .node .label{text-align:center;}#mermaid-svg-flEIgFwdzmFjHSRl .node.clickable{cursor:pointer;}#mermaid-svg-flEIgFwdzmFjHSRl .arrowheadPath{fill:#333333;}#mermaid-svg-flEIgFwdzmFjHSRl .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-flEIgFwdzmFjHSRl .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-flEIgFwdzmFjHSRl .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-flEIgFwdzmFjHSRl .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-flEIgFwdzmFjHSRl .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-flEIgFwdzmFjHSRl .cluster text{fill:#333;}#mermaid-svg-flEIgFwdzmFjHSRl .cluster span{color:#333;}#mermaid-svg-flEIgFwdzmFjHSRl 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-flEIgFwdzmFjHSRl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

bname

cname

dname

ename

fname

1.2连线

节点间的连接线有多种形状，可以在连接线中加入标签：

箭头连接 A1–->B1 开放连接 A2—B2 标签连接 A3–text—B3 箭头标签连接 A4–text–>B4 虚线开放连接 A5.-B5 虚线箭头连接 A6-.->B6 标签虚线连接 A7-.text.-B7 标签虚线箭头连接 A8-.text.->B8 粗线开放连接 A9 = = =B9 粗线箭头连接 A10==>B10 标签粗线开放连接 A11= =text= = =B11 标签粗线箭头连接 A12 = = text = =>B12

graph TB
  A1-->B1
  A2---B2
  A3--text---B3
  A4--text-->B4
  A5-.-B5
  A6-.->B6
  A7-.text.-B7
  A8-.text.->B8
  A9===B9
  A10==>B10
  A11==text===B11
  A12==text==>B12

#mermaid-svg-nGIWZOJdcSuIZdB6 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-nGIWZOJdcSuIZdB6 .error-icon{fill:#552222;}#mermaid-svg-nGIWZOJdcSuIZdB6 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-nGIWZOJdcSuIZdB6 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-nGIWZOJdcSuIZdB6 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-nGIWZOJdcSuIZdB6 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-nGIWZOJdcSuIZdB6 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-nGIWZOJdcSuIZdB6 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-nGIWZOJdcSuIZdB6 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-nGIWZOJdcSuIZdB6 .marker.cross{stroke:#333333;}#mermaid-svg-nGIWZOJdcSuIZdB6 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-nGIWZOJdcSuIZdB6 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-nGIWZOJdcSuIZdB6 .cluster-label text{fill:#333;}#mermaid-svg-nGIWZOJdcSuIZdB6 .cluster-label span{color:#333;}#mermaid-svg-nGIWZOJdcSuIZdB6 .label text,#mermaid-svg-nGIWZOJdcSuIZdB6 span{fill:#333;color:#333;}#mermaid-svg-nGIWZOJdcSuIZdB6 .node rect,#mermaid-svg-nGIWZOJdcSuIZdB6 .node circle,#mermaid-svg-nGIWZOJdcSuIZdB6 .node ellipse,#mermaid-svg-nGIWZOJdcSuIZdB6 .node polygon,#mermaid-svg-nGIWZOJdcSuIZdB6 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-nGIWZOJdcSuIZdB6 .node .label{text-align:center;}#mermaid-svg-nGIWZOJdcSuIZdB6 .node.clickable{cursor:pointer;}#mermaid-svg-nGIWZOJdcSuIZdB6 .arrowheadPath{fill:#333333;}#mermaid-svg-nGIWZOJdcSuIZdB6 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-nGIWZOJdcSuIZdB6 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-nGIWZOJdcSuIZdB6 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-nGIWZOJdcSuIZdB6 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-nGIWZOJdcSuIZdB6 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-nGIWZOJdcSuIZdB6 .cluster text{fill:#333;}#mermaid-svg-nGIWZOJdcSuIZdB6 .cluster span{color:#333;}#mermaid-svg-nGIWZOJdcSuIZdB6 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-nGIWZOJdcSuIZdB6 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

text

A10

B10

A11

B11

A12

B12

1.3子图

graph LR
    subgraph g1
        a1-->b1
    end
    subgraph g2
        a2-->b2
    end
    subgraph g3
        a3-->b3
    end
  a3-->a2

#mermaid-svg-PqPTnsqLtUb4L4rB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-PqPTnsqLtUb4L4rB .error-icon{fill:#552222;}#mermaid-svg-PqPTnsqLtUb4L4rB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-PqPTnsqLtUb4L4rB .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-PqPTnsqLtUb4L4rB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-PqPTnsqLtUb4L4rB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-PqPTnsqLtUb4L4rB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-PqPTnsqLtUb4L4rB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-PqPTnsqLtUb4L4rB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-PqPTnsqLtUb4L4rB .marker.cross{stroke:#333333;}#mermaid-svg-PqPTnsqLtUb4L4rB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-PqPTnsqLtUb4L4rB .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-PqPTnsqLtUb4L4rB .cluster-label text{fill:#333;}#mermaid-svg-PqPTnsqLtUb4L4rB .cluster-label span{color:#333;}#mermaid-svg-PqPTnsqLtUb4L4rB .label text,#mermaid-svg-PqPTnsqLtUb4L4rB span{fill:#333;color:#333;}#mermaid-svg-PqPTnsqLtUb4L4rB .node rect,#mermaid-svg-PqPTnsqLtUb4L4rB .node circle,#mermaid-svg-PqPTnsqLtUb4L4rB .node ellipse,#mermaid-svg-PqPTnsqLtUb4L4rB .node polygon,#mermaid-svg-PqPTnsqLtUb4L4rB .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-PqPTnsqLtUb4L4rB .node .label{text-align:center;}#mermaid-svg-PqPTnsqLtUb4L4rB .node.clickable{cursor:pointer;}#mermaid-svg-PqPTnsqLtUb4L4rB .arrowheadPath{fill:#333333;}#mermaid-svg-PqPTnsqLtUb4L4rB .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-PqPTnsqLtUb4L4rB .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-PqPTnsqLtUb4L4rB .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-PqPTnsqLtUb4L4rB .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-PqPTnsqLtUb4L4rB .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-PqPTnsqLtUb4L4rB .cluster text{fill:#333;}#mermaid-svg-PqPTnsqLtUb4L4rB .cluster span{color:#333;}#mermaid-svg-PqPTnsqLtUb4L4rB 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-PqPTnsqLtUb4L4rB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

2.序列图

关键词，participant（参与者），note（便签），循环，选择

note [right of | left of][Actor]:Text 给多个模块做标签, 通过逗号分割 note over [Actor1, Actor2…]:Text

loop Loop_text … statements… end

alt Describing_text …statements… else …statements… end

//推荐在没有else的情况下使用 opt(option,选择) opt Describing_text …statements… end

示例

graph LR
    subgraph g1
        a1-->b1
    end
    subgraph g2
        a2-->b2
    end
    subgraph g3
        a3-->b3
    end
  a3-->a2

#mermaid-svg-N7JfKTkAdcIGHcCL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-N7JfKTkAdcIGHcCL .error-icon{fill:#552222;}#mermaid-svg-N7JfKTkAdcIGHcCL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-N7JfKTkAdcIGHcCL .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-N7JfKTkAdcIGHcCL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-N7JfKTkAdcIGHcCL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-N7JfKTkAdcIGHcCL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-N7JfKTkAdcIGHcCL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-N7JfKTkAdcIGHcCL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-N7JfKTkAdcIGHcCL .marker.cross{stroke:#333333;}#mermaid-svg-N7JfKTkAdcIGHcCL svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-N7JfKTkAdcIGHcCL .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-N7JfKTkAdcIGHcCL text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-N7JfKTkAdcIGHcCL .actor-line{stroke:grey;}#mermaid-svg-N7JfKTkAdcIGHcCL .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-N7JfKTkAdcIGHcCL .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-N7JfKTkAdcIGHcCL #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-N7JfKTkAdcIGHcCL .sequenceNumber{fill:white;}#mermaid-svg-N7JfKTkAdcIGHcCL #sequencenumber{fill:#333;}#mermaid-svg-N7JfKTkAdcIGHcCL #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-N7JfKTkAdcIGHcCL .messageText{fill:#333;stroke:#333;}#mermaid-svg-N7JfKTkAdcIGHcCL .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-N7JfKTkAdcIGHcCL .labelText,#mermaid-svg-N7JfKTkAdcIGHcCL .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-N7JfKTkAdcIGHcCL .loopText,#mermaid-svg-N7JfKTkAdcIGHcCL .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-N7JfKTkAdcIGHcCL .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-N7JfKTkAdcIGHcCL .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-N7JfKTkAdcIGHcCL .noteText,#mermaid-svg-N7JfKTkAdcIGHcCL .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-N7JfKTkAdcIGHcCL .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-N7JfKTkAdcIGHcCL .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-N7JfKTkAdcIGHcCL .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-N7JfKTkAdcIGHcCL .actorPopupMenu{position:absolute;}#mermaid-svg-N7JfKTkAdcIGHcCL .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-N7JfKTkAdcIGHcCL .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-N7JfKTkAdcIGHcCL .actor-man circle,#mermaid-svg-N7JfKTkAdcIGHcCL line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-N7JfKTkAdcIGHcCL :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Alice Bob Hello Bob, how are you? not so good :( good alt [is sick] [is well] Thanks for asking opt [Extra response] Alice Bob

2.1连线

无箭头实线 -> 有箭头实线 ->> 无箭头虚线 –> 有箭头虚线 –>> 带x实线 -x 带x虚线 –x

sequenceDiagram
    Note right of A: 倒霉, 碰到B了
    A->B:   Hello B, how are you ?
    note left of B: 倒霉,碰到A了
    B-->A:  Fine, thx, and you?
    note over A,B: 快点溜，太麻烦了
    A->>B:  I'm fine too.
    note left of B: 快点打发了A
    B-->>A: Great!
    note right of A: 溜之大吉
    A-xB:   Wait a moment
    loop Look B every minute
        A->>B: look B, go?
        B->>A: let me go?
    end
    B--xA: I'm off, byte 　
    note right of A: 太好了, 他走了

#mermaid-svg-WI5fsnPcbxnQ1yly {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WI5fsnPcbxnQ1yly .error-icon{fill:#552222;}#mermaid-svg-WI5fsnPcbxnQ1yly .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WI5fsnPcbxnQ1yly .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WI5fsnPcbxnQ1yly .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WI5fsnPcbxnQ1yly .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WI5fsnPcbxnQ1yly .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WI5fsnPcbxnQ1yly .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WI5fsnPcbxnQ1yly .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WI5fsnPcbxnQ1yly .marker.cross{stroke:#333333;}#mermaid-svg-WI5fsnPcbxnQ1yly svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WI5fsnPcbxnQ1yly .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-WI5fsnPcbxnQ1yly text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-WI5fsnPcbxnQ1yly .actor-line{stroke:grey;}#mermaid-svg-WI5fsnPcbxnQ1yly .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-WI5fsnPcbxnQ1yly .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-WI5fsnPcbxnQ1yly #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-WI5fsnPcbxnQ1yly .sequenceNumber{fill:white;}#mermaid-svg-WI5fsnPcbxnQ1yly #sequencenumber{fill:#333;}#mermaid-svg-WI5fsnPcbxnQ1yly #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-WI5fsnPcbxnQ1yly .messageText{fill:#333;stroke:#333;}#mermaid-svg-WI5fsnPcbxnQ1yly .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-WI5fsnPcbxnQ1yly .labelText,#mermaid-svg-WI5fsnPcbxnQ1yly .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-WI5fsnPcbxnQ1yly .loopText,#mermaid-svg-WI5fsnPcbxnQ1yly .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-WI5fsnPcbxnQ1yly .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-WI5fsnPcbxnQ1yly .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-WI5fsnPcbxnQ1yly .noteText,#mermaid-svg-WI5fsnPcbxnQ1yly .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-WI5fsnPcbxnQ1yly .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-WI5fsnPcbxnQ1yly .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-WI5fsnPcbxnQ1yly .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-WI5fsnPcbxnQ1yly .actorPopupMenu{position:absolute;}#mermaid-svg-WI5fsnPcbxnQ1yly .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-WI5fsnPcbxnQ1yly .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-WI5fsnPcbxnQ1yly .actor-man circle,#mermaid-svg-WI5fsnPcbxnQ1yly line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-WI5fsnPcbxnQ1yly :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A B 倒霉, 碰到B了 Hello B, how are you ? 倒霉,碰到A了 Fine, thx, and you? 快点溜，太麻烦了 I'm fine too. 快点打发了A Great! 溜之大吉 Wait a moment look B, go? let me go? loop [Look B every minute] I'm off, byte 太好了, 他走了 A B

改变AB顺序

#mermaid-svg-aNPDXAiGVpJYT7Cy {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-aNPDXAiGVpJYT7Cy .error-icon{fill:#552222;}#mermaid-svg-aNPDXAiGVpJYT7Cy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-aNPDXAiGVpJYT7Cy .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-aNPDXAiGVpJYT7Cy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-aNPDXAiGVpJYT7Cy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-aNPDXAiGVpJYT7Cy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-aNPDXAiGVpJYT7Cy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-aNPDXAiGVpJYT7Cy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-aNPDXAiGVpJYT7Cy .marker.cross{stroke:#333333;}#mermaid-svg-aNPDXAiGVpJYT7Cy svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-aNPDXAiGVpJYT7Cy .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-aNPDXAiGVpJYT7Cy text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-aNPDXAiGVpJYT7Cy .actor-line{stroke:grey;}#mermaid-svg-aNPDXAiGVpJYT7Cy .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-aNPDXAiGVpJYT7Cy .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-aNPDXAiGVpJYT7Cy #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-aNPDXAiGVpJYT7Cy .sequenceNumber{fill:white;}#mermaid-svg-aNPDXAiGVpJYT7Cy #sequencenumber{fill:#333;}#mermaid-svg-aNPDXAiGVpJYT7Cy #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-aNPDXAiGVpJYT7Cy .messageText{fill:#333;stroke:#333;}#mermaid-svg-aNPDXAiGVpJYT7Cy .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-aNPDXAiGVpJYT7Cy .labelText,#mermaid-svg-aNPDXAiGVpJYT7Cy .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-aNPDXAiGVpJYT7Cy .loopText,#mermaid-svg-aNPDXAiGVpJYT7Cy .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-aNPDXAiGVpJYT7Cy .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-aNPDXAiGVpJYT7Cy .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-aNPDXAiGVpJYT7Cy .noteText,#mermaid-svg-aNPDXAiGVpJYT7Cy .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-aNPDXAiGVpJYT7Cy .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-aNPDXAiGVpJYT7Cy .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-aNPDXAiGVpJYT7Cy .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-aNPDXAiGVpJYT7Cy .actorPopupMenu{position:absolute;}#mermaid-svg-aNPDXAiGVpJYT7Cy .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-aNPDXAiGVpJYT7Cy .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-aNPDXAiGVpJYT7Cy .actor-man circle,#mermaid-svg-aNPDXAiGVpJYT7Cy line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-aNPDXAiGVpJYT7Cy :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} B A 倒霉, 碰到B了 Hello B, how are you ? 倒霉,碰到A了 Fine, thx, and you? 快点溜，太麻烦了。。。 I'm fine too. 快点打发了A Great! 溜之大吉 Wait a moment look B, go? let me go? loop [Look B every minute] I'm off, byte 太好了, 他走了 B A

sequenceDiagram
  # 通过设定参与者(participants)的顺序控制展示模块顺序
  participant Alice
　participant Bob
　participant John
　Alice->John:Hello John, how are you?
　loop Healthcheck
　  John->John:Fight against hypochondria
　end
　Note right of John:Rational thoughts prevail...
　John-->Alice:Great!
　John->Bob: How about you?
　Bob-->John: good!

#mermaid-svg-4hVG1oxf7onCj1Vk {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-4hVG1oxf7onCj1Vk .error-icon{fill:#552222;}#mermaid-svg-4hVG1oxf7onCj1Vk .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-4hVG1oxf7onCj1Vk .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-4hVG1oxf7onCj1Vk .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-4hVG1oxf7onCj1Vk .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-4hVG1oxf7onCj1Vk .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-4hVG1oxf7onCj1Vk .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-4hVG1oxf7onCj1Vk .marker{fill:#333333;stroke:#333333;}#mermaid-svg-4hVG1oxf7onCj1Vk .marker.cross{stroke:#333333;}#mermaid-svg-4hVG1oxf7onCj1Vk svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-4hVG1oxf7onCj1Vk .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-4hVG1oxf7onCj1Vk text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-4hVG1oxf7onCj1Vk .actor-line{stroke:grey;}#mermaid-svg-4hVG1oxf7onCj1Vk .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-4hVG1oxf7onCj1Vk .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-4hVG1oxf7onCj1Vk #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-4hVG1oxf7onCj1Vk .sequenceNumber{fill:white;}#mermaid-svg-4hVG1oxf7onCj1Vk #sequencenumber{fill:#333;}#mermaid-svg-4hVG1oxf7onCj1Vk #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-4hVG1oxf7onCj1Vk .messageText{fill:#333;stroke:#333;}#mermaid-svg-4hVG1oxf7onCj1Vk .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-4hVG1oxf7onCj1Vk .labelText,#mermaid-svg-4hVG1oxf7onCj1Vk .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-4hVG1oxf7onCj1Vk .loopText,#mermaid-svg-4hVG1oxf7onCj1Vk .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-4hVG1oxf7onCj1Vk .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-4hVG1oxf7onCj1Vk .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-4hVG1oxf7onCj1Vk .noteText,#mermaid-svg-4hVG1oxf7onCj1Vk .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-4hVG1oxf7onCj1Vk .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-4hVG1oxf7onCj1Vk .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-4hVG1oxf7onCj1Vk .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-4hVG1oxf7onCj1Vk .actorPopupMenu{position:absolute;}#mermaid-svg-4hVG1oxf7onCj1Vk .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-4hVG1oxf7onCj1Vk .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-4hVG1oxf7onCj1Vk .actor-man circle,#mermaid-svg-4hVG1oxf7onCj1Vk line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-4hVG1oxf7onCj1Vk :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail... Great! How about you? good! Alice Bob John

3.甘特图

甘特图是一类条形图，通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。

3.1关键字 title标题dateFormat日期格式section模块Completed已经完成Active当前正在进行Future后续待处理crit关键阶段日期缺失默认从上一项完成后

例如：

gantt
    dateFormat YYYY-MM-DD
    section S1
        T1: 2014-01-01, 9d
    section S2
        T2: 2014-01-11, 9d
    section S3
        T3: 2014-01-02, 9d

Mon 06 Mon 13 Mon 20 T1 T2 T3 S1 S2 S3

gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :        des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      : 20h
    Add another diagram to demo page    : 48h

Mon 06 Mon 13 Mon 20 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid

合理的脚本代码可以有效的提高工作效率，减少重复劳动。

微博撰写-流程图-序列图-甘特图-mermaid流程图-效果不错

最近更新

热门博客

[ 申请 ]友情链接：