mermaid

admin管理员组

文章数量:1597417

文章目录

• • • mermaid
    • • flowchart
      • • shapes:
        • Links:
        • sub_diagram:
        • example
      • sequenceDiagram
      • • 1.base
        • 2,3 active or no active
        • 4.note
        • 5. loop
        • 6.alt
        • 7. Parallel
        • 8.Critical Region
        • 9. Break
        • 10.Background Highlighting
        • 11.Comments
        • 12.Entity codes to escape characters
        • 13.sequenceNumbers
        • 14.Actor Menus
      • class diagram
      • • 1.base
      • State diagrams
      • • 1.base
        • choice
        • notes
        • comments
      • ER
      • • 一般的er(实体-属性-联系)
        • er
      • gantt
      • pie chart
      • requirementDiagram
      • C4C

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/"/]

( xasx ) [textxxxxxxx] ([stadium-shaped]) ((circle)) [[subroutine shape]] [(cylindrical shape)] >shbroutine shape] {rhombus} { {A hexagon node}} [/Parallelogram/] \Parallelogram\ /Trapezoid\ \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)

This is the text xxx A B E C D F H X Y Z X Y Z Y Z X

sub_diagram:

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

one a2 a1 c1

example

yes no start techer send task to student student deal it deal end? end

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

本文标签： Mermaid