mermaid

mermaid

flowchart

shapes:

flowchart LR
 	 id1("(  xasx  )")
 	 id2["[textxxxxxxx]"]
     id3(["([stadium-shaped])"])
     id4(("((circle))"))
     id5[["[[subroutine shape]]"]]
     id6[("[(cylindrical shape)]")]
     id7>">shbroutine shape]"]
     id8{"{rhombus}"}
     id9{
  {"{
  {A hexagon node}}"}}
    id10[/"[/Parallelogram/]"/]
    id11[\"\Parallelogram\"\]
    id12[/"/Trapezoid\"\]
    id13[\"\Trapezoid/"/]

Links:

if you want add text: |add_text|

if you want think link - change to =

直线	实线箭头	虚线	虚线箭头	加粗
—	–>	-.-A	-.->	===

flowchart LR
  id1(A)---|This is the text|id2(B)
  id(E)---id2
  id3(C)-->|xxx|id2
  id5(D)-->id2
  id6(F)-.->id2
  id7(H)==>id2
  
  id8(X)--->id9(Y)
  id8-->id10(Z)
  
  id11(X)-->id12(Y) & id13(Z)
  
  id15(Y) & id16(Z) -->id14(X)

sub_diagram:

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

example

sequenceDiagram

1. [Actor][Arrow][Actor]:Message text
2. ->>+ 激活
3. -->- 取消激活
4. Note [ right of | left of | over ] [Actor]: Text in note content
5.
    sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end
6.
opt Describing text
... statements ...
end
7.
par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end
8.
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
9.
break [something happened]
... statements ...
end

10.
rect rgb(0, 255, 0)
... content ...
end
rect rgba(0, 0, 255, .1)
... content ...
end

11.
sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
    John-->>Alice: Great!
12.   
sequenceDiagram
    A->>B: I #9829; you!
    B->>A: I #9829; you #infin; times more!
13.  
autonumber

14.  

mermaid.sequenceConfig = {
   
    diagramMarginX: 50,
    diagramMarginY: 10,
    boxTextMargin: 5,
    noteMargin: 10,
    messageMargin: 35,
    mirrorActors: true
};

类型	描述
->	不带箭头的实线
–>	不带箭头的虚线
->>	带箭头的实线
–>>	带箭头的虚线
-x	末端有十字的实线
–x	末端有十字的虚线。
-)	末端有一个打开箭头的实线（异步）
–)	末尾带有打开箭头的虚线（异步）

1.base

[Actor][Arrow][Actor]:Message text

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice