This is the fourth day of my participation in Gwen Challenge

origin

seeMermaidIt is because I started to write articles using the Gold digger editor. I will use XMind or flow chart to record daily. I even drew XMind freehand. Use the structure chart to comb out the content, more intuitive, clear and have to think more of their own, as the saying goes, good tens of millions of words worth a picture. I immediately fell in love with Mermaid. Creating a structure diagram with code is a process similar to writing notes by hand. This article was born

What do you get

  1. You can code whatever you wantThe flow chart,State diagram,Gantt chart,Sequence diagram,The pie chart,The class diagram,The diagram,The journey of figure
  2. No matter in reading, learning knowledge, meeting minutes, brainstorming, time management, it is absolutely a powerful tool to improve learning efficiency, sorting out learning ideas, in the process of drawing knowledge to deepen, say goodbye to dot and dot, all the way coding, all the way cool
  3. History code traceable because this is code wow

What is the Mermaid

Mermaid is a three-way library of JS implementations

The simple understanding is that the “Markdown syntax” for generating charts is to write charts in plain text format

Where can I use Mermaid

  • NPM repository address is introduced as a tripartite library in js file
  • CDN form is introduced
<body>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>
Copy the code
  • An editor that supports Markdown syntax, for exampleGold digger editor Language finches Impression of notes Typora Avi Online editor
  • Markdown Preview Avi Support

Chart type

  • Flowchart diagram

  • Sequence diagram

  • Gantt chart

  • The class diagram

  • State diagram

  • The diagram

  • The journey of figure

  • The pie chart

Avi – Flowchart

The basic structure

  1. Rounded rectangles represent the beginning and the end
  2. Rectangle represents action plan and common work link
  3. A diamond represents a problem judgment or judgment (review/approval/review) phase
  4. Parallelograms represent inputs and outputs
  5. Arrows represent workflow directions

Flowchart and node creation

The significance of THE existence of ID When there are many characters in a node and the relationship between nodes is complex, id can be used to refer to the current node

  • Flowchart statement:
    • Key words:graph
    • The source code 
      ' 's03E01 [s03e02] [s03e02] [S03e02] [S03e02] [S03e02] [S03e02] [S03e02] [S03e02] [S03e02] [S03e02Copy the code
    • Generate results
  • Node content:
    • The node content is plain text:

      • Syntax: ID (plain text)

      • The source code

        ' 'avi graph s(nodes are plain text with no special characters)Copy the code

      • Generate results

    • The content contains special characters

      • Syntax: id(” content + special character “)

      • The source code

        ' 'avi graph s(" START ")' 'Copy the code

      • Generate results

    • Content contains escape characters
      • Syntax: id(“: escape character;” )
      • The source code 
        ' 'avi graph s(" avi :#9829;" ) ` ` `Copy the code
      • Generate results

Flowchart layout

The default layout of the flowchart is top to bottom

' 'avi [start]--> e[end]Copy the code
  • Since the down

    • Grammar:

      • graph BT
      • graph TD

    • The source code:

      ' 'avi graph TD s --> eCopy the code
      ' 'avi graph TB s --> eCopy the code

    • Generate results

  • From bottom to top
    • Grammar:
      • graph BT
    • The source code: 
      ' 'avi graph BT s --> ECopy the code
    • Generate results
  • From left to right

    • Grammar:

      • graph LR

    • The source code

      ' 'avi graph LR s --> eCopy the code

    • Generate results:

  • From right to left
    • Grammar:
      • graph RL
    • The source code 
      ' 'avi graph RL s --> eCopy the code
    • Generate results:

Flowchart node shape

  • rectangular
    • Syntax: id[node content]
    • The source code 
      ` ` ` mermaid graph s [to] [over] e ` ` `Copy the code
    • Generate results:
  • Rounded rectangular node

    • Syntax: ID (node content)

    • The source code

      ' 'avi graph s(Start) E (End)id()' 'Copy the code

    • Generate results:

  • Stadium shape
    • Syntax: id([content])
    • The source code 
      ` ` ` mermaid graph s (figure] [start - stadium) -- - > e (figure] [end - stadium) ` ` `Copy the code
    • Generate results:
  • cylindrical
    • Syntax: id[(content)]
    • The source code 
      ` ` ` mermaid graph s [(start - cylindrical)] - > [cylinder (over -)] e ` ` `Copy the code
    • Generate results:
  • circular

    • Syntax: id((content))

    • The source code

      ` ` ` mermaid graph s (cylinder (start)) - > e (cylinder (over -)) ` ` `Copy the code

    • Generate results:

  • The diamond

    • Syntax: id{content}

    • The source code

      ' 'avi graph S {start - rhomboid} --> E {end - rhomboid}' 'Copy the code

    • Generate results:

  • hexagonal
    • Syntax: id{{content}}
    • The source code 
      ` ` ` mermaid graph s {{began - hexagonal}} - > {{end - hexagonal}} e ` ` `Copy the code
    • Generate results:
  • asymmetric

    • Syntax: id> content]

    • The source code

      ` ` ` mermaid graph s > start - end of asymmetric] -- > > E - asymmetric] ` ` `Copy the code

    • Generate results:

  • parallelogram

    • Grammar:

      • Right id[/ content /]
      • Left ID [\ contents \]

    • The source code

      ' 'avi graph s[\ Start \] --> E[/ end /]' 'Copy the code

    • Generate results:

  • trapezoidal

    • Syntax: id[/ content]

    • The source code

      ' 'avi graph s[/ Start \] --> E[/ end \]' 'Copy the code

    • Generate results:

Links between nodes

  • The solid line

    • Grammar: –
    • The source code: 
      ' 'avi graph LR s[Start] -- e[End]' 'Copy the code
    • Generation effect 
      Graph LR s[start] -- e[end]

  • Dotted line

    • Grammar – –
    • The source code 
      ' 'avi graph LR s[Start] -. -e [End]Copy the code
    • Generation effect 
      Graph LR s[start] -. -e [end]

  • Coarse link line

    • = = =
    • The source code 
      ' 'avi graph LR s[start] === e[end]'Copy the code
    • Generation effect 
      Graph LR s[start] === e[end]

  • Solid arrows

    • Grammar – >

    • The source code

      ' 'avi graph LR s[Start] --> E [End]Copy the code

    • Generated effect:

      Graph LR s[start] --> e[end]

  • Dotted arrow

    • Grammar -. – >
    • The source code 
      ' 'avi graph LR s[Start] -.-> E [End]' 'Copy the code
    • Generated effect: 
      Graph LR s[start] -.-> e[end]

  • Bold lines arrow

    • Grammar = = >
    • The source code 
      ' 'avi graph LR s[start] ==> E [end]Copy the code
    • Generation effect 
      Graph LR s[start] ==> e[end]

  • Link line with text - solid line

    • Grammar – content – or – > | | content

    • The source code

      ' 'avi graph LR s[Start] process -- e[End]Copy the code

      or

      ` ` ` mermaid graph LR s [to] - > | e | process [over] ` ` `Copy the code

    • Generated effect:

      Graph LR s[start] -- process -- e[end]

  • Link line with text - dotted line

    • Syntax -. Content.->

    • The source code

      ' 'avi graph LR s[Start] -. Process.-> e[End]Copy the code

    • Generated effect:

      Graph LR s[start] -. Process.-> e[end]

  • Link line with text - solid line thick line

    • Syntax == content ==>

    • The source code

      ' 'avi graph LR s[Start] == Process ==> e[end]Copy the code

    • Generated effect:

      Graph LR s[start] == process ==> e[end]

The chain

1. Horizontal and vertical process relationship

A single

  • The source code

    ` ` ` mermaid graph LR s walk [shopping] -- -- -- > P pay [market] -- -- -- > e end [shopping] ` ` `Copy the code

  • Generation effect

    Graph LR s[buy vegetables]-- walk -->P[market]-- pay --> e[finish buying vegetables]

Multiple lines

  • The source code

    ` ` ` mermaid graph LR s walk [shopping] -- -- -- > P pay [market] -- -- -- > e end [shopping] s walk -- - > o pay [] yong hui supermarket -- -- -- > e ` ` `Copy the code

  • Generation effect

    Graph LR s walk [shopping] -- -- -- > P pay [market] -- -- -- > e end [shopping] s walk -- - > o pay [] yong hui supermarket -- -- -- > e
2. Closure
  • Source code (single loop) :
` ` ` mermaid graph LR s walk [home] -- -- -- > P [market] - walk -- > L [fruit shop] - walk -- - > j] [supermarket -- -- > s ` ` `Copy the code
  • Generation effect 
    Graph LR s walk [home] -- -- -- > P [market] - walk -- > L [fruit shop] - walk -- - > j] [supermarket -- -- > s
  • Source code (multi-loop) :
` ` ` mermaid graph LR s walk [shopping] -- -- -- > P pay [market] -- -- -- > s s - online - > o pay [] yong hui supermarket -- -- -- > s ` ` `Copy the code
  • Generation effect 
    Graph LR s walk [shopping] -- -- -- > P [market] - pay -- -- > s s - online > o pay [] yong hui supermarket -- -- -- > s
3. Parallel and cross relations

Every three and four will roll and lie flat

Graph Z [Zhang SAN]-->C[inner scroll] & D[lie flat]
Graph L[Li Si]-->C[inner scroll] & D[lie flat]

merge

  • The source code
` ` ` mermaid graph z [John] - [in] z - > C > D/lie flat L [bill] -- > C [in] the L - > D ` ` `Copy the code
Graph Z -->C Z -->D L li Si -->C L-->D

The easier way to write it is just one line

  • The source code
` ` ` mermaid graph z [John] & L [bill] [in] -- > C & D/lie flat ` ` `Copy the code
  • Generation effect
Graph Z [Zhang SAN] & L[Li Si]-->C[Inner roll] & D[lie flat]
4. Control the connection length
  • The source code
` ` ` mermaid graph z [John] -- > X {choose to lie flat or volume} in volume within X - - - > [to] Y Y -- how to [to rethink] -- > R R > X X -- - > | lie flat | N [happy water] ` ` `Copy the code
Graph z [John] -- > X {choose to lie flat or volume} in volume within X - - - > [to] Y Y -- how to [to rethink] -- > R R > X X -- - > | lie flat | N/happy to drink water

The figure above shows that the logic of the character choosing the length of the lie is correct if the choice is adjusted to increase the length of the lie

  • The source code
` ` ` mermaid graph z [John] -- > X {choose to lie flat or volume} in volume within X - - - > [to] Y Y -- how to [to rethink] -- > R R -- -- -- -- -- > > X X | lie flat | N [happy water] / / increase lengthCopy the code
Graph z [John] -- > X {choose to lie flat or volume} in volume within X - - - > [to] Y Y -- how to [to rethink] -- > R R -- -- -- -- -- > > X X | lie flat | N/happy to drink water

Logically reclining and rethinking are not parallel. Ideally, selecting a reclining length greater than selecting an inner coil is available at —-> the link line increases the length by 2 levels

  • The source code: 
    ` ` ` mermaid graph z [John] -- > X {choose to lie flat or volume} in volume within X - - - > [to] Y Y -- how to [to rethink] -- > R R - > X X - lie flat -- -- -- -- > N/happy drinking water ` ` `Copy the code
Graph z [John] -- > X {choose to lie flat or volume} in volume within X - - - > [to] Y Y -- how to [to rethink] -- > R R - > X X - lie flat -- -- -- -- > N/happy to drink water

You can use —-> to increase the length of the link line by 3 levels

Increasing the level length 1 2 3
The solid line — —- —–
Solid line with arrow –> —> —->
Heavy line = = = = = = = = = = = =
Thick solid line with arrow = = > = = = > = = = = >
Dotted line -. – -.. – -… –
Dashed line with arrow -. – > -.. -> -… ->

Subchart subgraph

  • The basic grammar
Subgraph title // Subgraph name // Subgraph node relationship end // Subgraph end flagCopy the code
  • The source code
` ` ` mermaid graph TB c1 > a2 subgraph table 1 a1 -- - > a2 end subgraph table 2 b1 - > b2 end subgraph table 3 c1 - > c2 end ` ` `Copy the code
  • Generation effect
Graph TB -->a2 subgraph table 1 a1--> A2 end subgraph table 2 B1 --> B2 end subgraph table 3 C1 -->c2 end

interaction

Adding events to the node and clicking on the jump is not very useful right now

  • Grammar: 
     var callback = function(){
      alert('A callback was triggered');
  }
Copy the code
  • The source code: 
    ```mermaid graph LR; A-->B; B -->C; C-->D; click A callback "Tooltip for a callback" click B "http://www.baidu.com" "This is a tooltip for a link" click A call callback() "Tooltip for a callback" click B href "http://www.github.com" "This is a tooltip for a link" ```Copy the code
  • Generation effect 
    graph LR; A-->B; B -->C; C-->D; click A callback "Tooltip for a callback" click B "http://www.baidu.com" "This is a tooltip for a link" click A call callback() "Tooltip for a callback" click B href "http://www.github.com" "This is a tooltip for a link"

annotation

  • Syntax % %

  • The source code

        ```mermaid
    graph LR
    %% this is a comment A -- text --> B{node}
       A -- text --> B -- text2 --> C
    ```
Copy the code

  • Generation effect

    graph LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

Add the style

Method 1

We need to style the beginning and the end

  • Syntax: style id key:value,key:value
  • The source code: 
    ` ` ` mermaid graph LR s [" start (solid line border, 4 px, border color: # 007 FFF Denver is blue, the background color: red) "] [" e end (the dotted border, 4 px, border color: red, the background color: "] style s fill:red,stroke-width: #007fff, 4px style e fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff ```Copy the code
  • Generation effect 
    Graph LR s[" Start (solid border, 4px, border color: #007fff, background color: red)"] e[" End (dashed border, 4px, border color: red, background color: "] style s fill:red,stroke-width: #007fff, 4px style e fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff

Way 2 class

    1. Define style class
    • Syntax: classDef className Style definition
    1. Application: : : the classname
    • The source code: 
      ' 'avi graph LR S [start]:: ownStyle -->e[end] classDef ownStyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff ```Copy the code
    • Generation effect 
      Graph LR s[start]:: ownstyle-->e[end] classDef ownstyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff

Method 3 Add styles in CSS class

  • define

       <style>
        .cssClass > rect{
            fill:red;
            stroke:#FFFF00;
            stroke-width:4px;
        }
    </style>
Copy the code

  • Example: source code

    ```mermaid graph LR; A-->B[AAA<span>BBB</span>]; B-->D; class A cssClass; ` ` `Copy the code

    Generated effect:

          graph LR;
      A-->B[AAA<span>BBB</span>];
      B-->D;
      class A cssClass;

S03e04 – S03E04 S03E04 – S03E04

Sequence diagrams, also known as sequence diagrams, are a kind of UML interaction diagrams used to represent the chronological order of messages sent between objectsCopy the code

The basic structure

  1. roleActors can be people or other system subsystems
  2. objectThe role played by an Object during an interaction is usually at the top of the sequence diagram
  3. The lifelineLifeline Represents the existence of an object in a sequence diagram over a period of time
  4. Control the focusThe Activation control focus represents the period during which an activity is performed by an object in the sequence diagram
  5. The messageMessage defines a class for exchanging information in interactions and collaborations

I can understand it a little bit when I’m learning flow diagrams, but when IT comes to sequence diagrams, it’s like I’ve never heard of words before. Don’t panic. Let’s just go through it and see what it means

Creation of sequence diagrams

  • Sequence diagram declaration
    • Key words:sequenceDiagram
    • The source code: 
          ```mermaid
        sequenceDiagram
    ```
Copy the code
    • Generated effect: 
          sequenceDiagram
  • participants
    • The keyword:participant
    • Basic object declaration:

      • Syntax: Participant Name

      • The source code

        ` ` ` mermaid sequenceDiagram participant zhang SAN participant li si ` ` `Copy the code

      • Generated effect:

        SequenceDiagram Participant If The participant is Zhang 3, Li 4 is Participant
    • Object declaration - Alias Aliases ：

      • Syntax: Participant Alias AS Participant name

      • The source code

        ` ` ` mermaid sequenceDiagram participant Z as zhang SAN participant L as li si ` ` `Copy the code

      • Generated effect:

        SequenceDiagram Participant Z as Participant L as Participant L

The Message the Message

  • Syntax: participant1 arrow participant2: message content

  • The source code:

    The dialogue between Tom and Tom is connected by different wires

    Z->L: I am a solid line with no arrow L-->Z: I am a dashed line with no arrow Z->>L: a solid line with arrow L-->>Z: dashed line with arrow Z-xL: solid line with x arrow L-)Z: solid line with arrow at end Z--)L: dashed line with arrow at endCopy the code

  • Generated effect:

    SequenceDiagram Participant Z as Participant L AS L Z->L: I am a solid line without arrows L-->Z: I am a dashed line without arrows Z->>L: Solid line with arrows L-->>Z: Dotted line with arrows Z-xl: solid line with an X arrow L-)Z: solid line with an arrow at the end Z--)L: dashed line with an arrow at the end

  • Linear comparison table

    The linear meaning
    -> Solid line without arrows
    –> Dashed lines without arrows
    ->> Solid line with arrow
    –>> Solid line with arrow
    -x Solid line with x arrow
    –x End x arrow solid line
    -) End solid line with arrow
    -) End dotted line with arrow

Control focus Activations

  • Grammar: 
    Activate Participant // Activate message deactivate Participant // Release the activationCopy the code

There’s a little bit of abstraction here that we can understand with a scenario

  • Scenario 1:

    I can hear you. I'm fine. Don't worry. // When the session ends, there will be no more activities with JoeCopy the code
    • The source code: 
      ` ` ` mermaid sequenceDiagram participant as li si Z Z as zhang SAN participant L - > > m: are you ok? Hi, dick, and harry activate L L - > > Z: hi zhang SAN I can hear you, I'm fine, don't worry about it. deactivate L ```Copy the code
    • Generated effect:
    Activate L->>Z: Hi, I can hear you. I'm fine. Don't worry. deactivate L

  • Scenario 2:

    Joe: Hi Joe, are you ok Joe: can you hear me? // Joe: I can hear you. Joe: Don't worry about meCopy the code
    • The source code: 
      ` ` ` mermaid sequenceDiagram participant as li si Z Z as zhang SAN participant L - > > m: are you ok? Hi, dick, and harry activate L Z - > > m: can you hear me speak activate L L->>Z: Hi Zhang SAN I can hear you deactivate L->>Z: I'm fine, don't worry. deactivate L ```Copy the code
    • Generated effect:
    SequenceDiagram Participant Z as Participant L Z->>L: Hi, How are you? Activate L Z->>L: Can you hear me L->>Z: Hi Zhang SAN I can hear you deactivate L->>Z: I'm fine, don't worry. deactivate L

Sequence diagram – Notes Note

  • Grammar:

    • Single object:

      Note Position of Participant: Indicates the annotated content

    • To an object:

      Note Position Role name 1, role name 2: indicates the annotation content

  • To the left of the object:
    • The source code 
      ` ` ` mermaid sequenceDiagram participant zhang Note left of zhang SAN: I am zhang SAN ` ` `Copy the code
    • Generation effect 
      Note left of... Note left of
  • To the right of the object:
    • The source code 
      Note right of s03E05 I am s03e05Copy the code
    • Generation effect 
      Note right of... Note right of
  • Above the object (requires two objects) :
    • The source code 
      Note over of S03E04 I'm S03e04Copy the code
    • Generation effect 
      How are you, Li Si? They are talking

Sequence diagram – Logic Loop

The part of an interaction that represents some loop

  • Grammar: 
    Loop Description Loop content End // End flagCopy the code
  • Scene:

Li Si and Zhang SAN are good friends Li Si is sick, Zhang SAN is very concerned about him every hour in order not to let Zhang SAN so worried about Li Si agreed to send messages to Zhang SAN every hour

  • The source code:

    S03e04 how are you S03e04 Loop S03e04 send message to S03e04 --> S03E04: I'm fineCopy the code

  • Generated effect:

    Loop Every hour Li Si sends a message to Li Si --> Zhang SAN: I'm fine end

Sequence Diagram Selection (Alt) & Option (Opt)

Composite fragments are used to address the conditions and modes of interactive execution. It allows the direct representation of logical components in sequence diagrams, used to define special conditions and subprocesses for any part of any lifeline by specifying the application area of conditions or subprocesses.

Altchoice

Used to indicate the choice of mutual exclusion between two or more sequences of messages, equivalent to the classic if.. else.. Only one thing can happen

  • Grammar:
Alt the first case describes the action that took place else the rest of the case describes the action that took place EndCopy the code
  • Scene: 
    Scene: Zhang SAN: Li Si are you ok if Li Si is ill he will say: I am not ok if Li Si is well he will say: I am ok another good dayCopy the code
    • The source code: 
      S03e04 are you ill? S03e04 S03e04 Are you ill? S03e04 S03e04 Are you ill? Li Si -->> Zhang SAN: I'm not sick. I'm fineCopy the code
    • Generated effect: 
      Alt: Yes, I am very sick. Else: I am not sick. A good end

optSelect the”

Having a sequence that may or may not happen is a scenario that may or may not happen

  • Grammar:

    Opt Indicates the possible action endCopy the code

  • Scene:

    Scene: Joe: Are you ok, Joe? Joe may say thank you for asking or he may not. It's unpredictableCopy the code
    • The source code: 
      ` ` ` mermaid sequenceDiagram participant threes participant li si threes - > > li si: are you ok? Opt possible answer Li si - > > zhang SAN: thank you for your greetings end ` ` `Copy the code
    • Generated effect: 
      Li Si -->> Li Si: Are you ok opt possible answer Li Si -->> Zhang SAN: Thank you for your greetings end

Sequence diagram parallelism par

Parallel processing. The simultaneous interaction of an object

  • Basic syntax: 
    Par participant1 ->> participant2: and 2 participant1 ->> participant3: endCopy the code
    • Scene: 
      The participants had a message for Li and Wang at 5 p.m. : Did they eat itCopy the code
      • The source code 
        ` ` ` mermaid sequenceDiagram autonumber participant zhang SAN participant li si the participant fifty and par [] to Li Sifa messages, zhang SAN - > > li si: And [Wang Wu send a message] Zhang SAN: did you eat li Si ->> Zhang SAN: did not eat Wang Wu ->> Zhang SAN: yesCopy the code
      • Generation effect 
        SequenceDiagram Autonumber Participant [send a message to Li Si] [Wang Wu send a message] Zhang SAN: did you eat? Li Si ->> Zhang SAN: no, I did
  • Nested syntax: 
    Participant1 ->> participant2: participant1 ->> participant3: Participant3 ->> participant4: A8 participant3 ->> participant5: A8 participant3 ->> participant5: endCopy the code
    • Scene: 
      A8 Wang Invited Li to dinner tomorrow. Zhang SAN sent a message to ask if Li Would go tomorrow and wang Wu also sent a message to ask who would attend the meeting next day. Wang Wu also sent a message to Zhao Liu: Have dinner together tomorrowCopy the code
      • The source code 
        The participant ` ` ` mermaid sequenceDiagram participant zhang SAN participant, dick, and harry fifty and participant six participant A8 par threes participant zhao Tomorrow, Wang 5 is going to have a dinner party. Wang 5 is going to have a dinner party. A8: Bring your friends and come to the dinner party tomorrowCopy the code
      • Generation effect 
        SequenceDiagram Participant Zhang 3-Participant LI 4-Participant Wang 5-Participant Zhao 6-Participant A8 PAR Zhang 3-Participant sends a message to Li 4-Participant Zhang SAN -->> Li Si: Wang 5 will have a dinner tomorrow. A8: Bring your partner to the dinner party tomorrow

    Background highlighting

    • Grammar:

      The rect rgba (0213123).Copy the code

    • The source code:

      The participant ` ` ` mermaid sequenceDiagram participant zhang SAN participant, dick, and harry fifty and participant six participant A8 par threes participant zhao Rect rgba(0,113,133) rect rgba(0,113,133) rect rgba(0,113,133) End end and wang wu send a message to A8 rect rgba(0,213,123) ->>A8: Bring your partner and come tomorrowCopy the code

    • Generated effect:

      SequenceDiagram Participant Zhang 3-Participant LI 4-Participant Wang 5-Participant Zhao 6-Participant A8 PAR Zhang 3-Participant sends a message to Li 4-Participant Rect rgba(0,113,133) zhang SAN -->> wang wu: End end and wang wu send a message to A8 rect rgba(0,213,123) ->>A8: Bring your partner and come tomorrow
    Copy the code