Markdown may be used in situations that need chart expression. Mermaid can provide support in most cases. It is suggested to use Typoa for hands-on experience.

Based on the avi official document, I summarized the flow chart and sequence diagram, and other information may be added later.

Please refer to the most complete syntax for Markdown.

Mermaid related reference: Mermaid practical tutorial, Mermaid official documentation

Mermaid is listed in Markdown as follows, and the rest is based on that

' 'avi // Used in Markdown
Copy the code

The flow chart

Flowcharts are made up of nodes, geometric shapes, arrows, or lines, and S03E09 defines the syntax. The first thing is to declare, passgraphorflowchart 。
` ` ` mermaid graph other statements in the specified direction chart... ` ` `
Copy the code

  • Chart direction (arrow flow direction)

    statements instructions
    TB; TD From top to bottom; top-down
    BT From down to up
    RL From right to left
    LR From left to right

  • Node definition

    Each geometry node in the flowchart can be set directlyidDefault corresponding rectangle, ID description text, can also be customized textId [write container description].
    statements instructions
    Id [text] rectangular
    Id (text) The rounded rectangle
    Id ([text]) Stadium shape (rectangular with round head)
    Id [[text]] Rectangle on top of rectangle (long rectangle on top of shorter rectangle, similar)
    Id "(text)" cylindrical
    Id ((text)) circular
    Id > text] Flag to the right
    Text id {} The diamond
    Id {{literal}} hexagon
    Id [/ words /] parallelogram
    Id text [\ \] Parallelogram Alt
    Id [/ literal \] trapezoidal
    Id [\ text /] Trapezoidal Alt

  • Node link

    statements instructions
    --> The arrow
    --- The solid line
    -- -- -- -- textOr ` – The text
    -- -- -- > textOr ` — — > The text
    -. - > Dotted line
    -. Text. - > Dashed lines with text
    = = > Coarse arrow
    Text = = = = > Thick arrow with text 
    Graph LR A[(test)] --.text. --> B --> C
    Multiple links can be declared on the same line, or can be passed&To express node dependencies and reduce code.instructions
    == comment == can pass% %At the beginning, the comment is written, and the contents of the comment will not be parsed.
    Graph LR - A - > B > D A -- -- > C > D % % written below and above equivalent A - > B & C - > DCopy the code
    Graph LR - A - > B > D A -- -- > C > D % % written below and above equivalent A - > B & C - > D

    • New arrow and multidirectional arrow (test) instructions

      Flowchart flowchart is supported; graph diagrams are not

  • Link Length Setting

    The link length is set by default, but you can control the link length by adding link symbols. Solid lines:-: the dotted line.The thick line:= 。
    graph TD
A[Start] --> B{Is it? }; B -. Yes .-> C[OK]; C -.-> D[Rethink]; D ==> B; B -- No ----> E[End];Copy the code
    graph TD A[Start] --> B{Is it? }; B -. Yes .-> C[OK]; C -.-> D[Rethink]; D ==> B; B -- No ----> E[End];

  • Special charactersinstructions

    through"Text"Added special characters and escape characters for breaking syntax# Escape character encoding;Support.

  • subgraphinstructions

    Subgraph subname [container description, alternate subname displayed]A relational description statement can be understood similarly to a module containerCopy the code
    graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
    • Subgraph associate with subgraph and set the direction of subgraphflowchartSupport.instructions

  • interactiveinstructions

    Call up the callback or link by clicking on the event bound to the node.

    Node ID click Specifies the node ID addressCopy the code
    graph LR;
    B;
    click B "http://www.github.com" "This is a tooltip for a link"

  • The style and classinstructions

    • Link to the style

      Links can be styled, and since links do not have ids like nodes, the serial number of the link is calculated starting at 0. LinkStyle serial number style styles support stroke: line color,stroke-width: line width,color: line text color;

      graph LR
   A --> B & C --> D;
   linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

    • Node style

      You can apply a specific style to the node either by id or by setting the class name.

      • With id, you can directly set the style ID name style. The style supports fill: text background color,stroke: line color,stroke-width: line width,color: text color,stroke-dasharray: solid line length, dashed line length

      • Define a class style, classDef class name style, append the class name to the node class node ID class name; You can also define a class name for multiple nodes. Another way to set this is by attaching it to a node with the ::: operator. Node ID ::: Class name –> B

        graph LR
    A:::someclass --> B;
    class B someclass;
    classDef someclass fill:#f96;

Sequence diagraminstructions

A sequence diagram is an interaction diagram that shows how processes interoperate with each other in what order, usingsequenceDiagramThe statement.
sequenceDiagram
Actor 1 Link statement Actor 2: message textCopy the code

Be careful to avoid using end, which might break the chart, because it is useful in scripting. If unavoidable use must be enclosed by () or “” or [] or {}.

  • participantsinstructions

    withparticipantDeclare participants. The default implicit definition is not declared. Participants are displayed in the order of statements. If you need to customize the participant order, you can set the participant order by declaration.
    Writing:Participant Participant AS Displays the text; throughasSets the display text, which will be used for display.
    SequenceDiagram Participant John as John; Participant Alice as Alice Alice->>John: Hello John, how are you? John-->>Alice: Great!

  • Link to the statement

    statements instructions
    -> Solid lines have no arrows
    –> Dashed lines without arrows
    ->> Solid line with arrow
    –>> Dashed line with arrow
    – x Solid line with a cross at the end
    — x A dotted line with a cross at the end
    -) Solid line with an open arrow at the end (asynchronous)
    -) Dashed line with open arrow (asynchronous)

  • In the processing

    You can activate a participant and deactivate a participant. You can also add a + or – after a link statement using a shortcut symbol. The same patient can also be set multiple times, stack display.

    sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

  • Note Noteinstructions

    Add notes to the sequence diagram to illustrate.Note location Participant: Note description
    statements instructions
    right of On the right side
    left of On the left side of the
    over In it, you can span multiple participants 
    sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
  • The Loop cycle
    Loop Indicates the loop condition descriptionEnd of the statement that needs to loopCopy the code
    SequenceDiagram loop If there is no answer to Alice->John: Hello John, how are you? end John-->Alice: Great!

  • judge

    Can be used to express different situations in different scenarios.
    Alt condition Description 1Feedback in this condition else condition description 2... else ... . End opt Condition Description Branch description statement endCopy the code