This article mainly introduces how to quickly start the Mermaid Flow chart, no map upload and no drag and drop drawing, source based real-time rendering flow chart, easy to operate, widely integrated in mainstream editors, including Markdown writing environment.

In this section you will learn the following:

  • Understand what flowchart is as wellMermaidThe flow chart;
  • Know and remember how to drawMermaidThe flow chart;
  • To understandGitbookRelated integration plug-ins for writing environments.

What is a Mermaid Flow chart

keywords

- Project address - Online editing - official documentationCopy the code

A thousand words are not as good as a picture. The graph showing the process of things is called a flow chart.

Mermaid is a javascript-based illustration and drawing tool. It is based on markdown syntax to simplify and speed up the process of generating flowcharts, and not just flowcharts.

The source code

graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]
Copy the code

The effect

  • Project address: github.com/mermaid-js/…
  • Online editing: mermaidjs. Making. IO/mermaid – liv…
  • The official document: mermaid – js. Making. IO/mermaid / # / f…

Avi Flowchart Quick start

The layout direction

keywords

+ TB
+ BT
+ LR
+ RL
Copy the code

Flowchart layout directions are made up of four basic directions: top, bottom,left, and right. The optional values are TB (top to bottom),BT (bottom to top),LR (left to right) and RL (right to left).

Core: supports only four vertical directions. It is the initials of English words.

  • TB

B: I’ve searched it from Top to Bottom

The source code

graph TB
    Start --> Stop
Copy the code

The effect

  • BT

B: I’ve searched it from Bottom to Top

The source code

graph BT
    Start --> Stop
Copy the code

The effect

  • LR

From Left to Right: from Left to Right

The source code

graph LR
    Start --> Stop
Copy the code

The effect

  • RL

From Right to Left: from Right to Left

The source code

graph RL
    Start --> Stop
Copy the code

The effect

The shape of

keywords

- node shape + [rectangular] - [[temporarily does not support]] - [(cylindrical)] - [{temporarily does not support}] - [/ parallelogram] - [\ parallelogram \] - [/ trapezoidal \] - [\ trapezoidal /] + (rounded rectangle) - ((round)) - ([stadium]) Temporary does not support} ({) + {diamond} - {{hexagon}} - {[temporarily does not support]} {(temporarily does not support)} + > asymmetric rectangular]Copy the code

Flowchart node shape, default support rectangle and circle two basic shapes, including simple variations of basic shape, support nested combination form, where [] represents rectangle,() represents arc,{} represents sharp Angle (I think <> is more suitable) and so on.

Core: The outermost layer represents the main shape, and the inner layer supports the modification.

Disposable node

A one-time node, which defaults to a rectangular node whose text content directly displays the value of the ID, is suitable for situations where multiple references do not occur later.

Id is recommended as a meaningful text description rather than as a unique identifier.

The source code

graph TD
    id
Copy the code

The effect

Repeatable node

Repeatable node: specifies the node shape. The text content is not the value of id but the value of

. It is suitable for the situation that the same node is referenced multiple times.

Id represents the unique identifier of the node. The text description of the current node is specified by the value of < Node Shape >. It is recommended that the ID be a meaningful unique identifier.

  • rectangular

General format: [node description],[] parentheses indicate that the node is a rectangular shape,node description is the description text of the node.

The source code

graph LR
    id1[This is the text in the box]
Copy the code

The effect

  • The rounded rectangle

General format: (node description),() parentheses indicate that the node is a rounded rectangle shape,node description is the description text of the node.

The source code

graph LR
    id1(This is the text in the box)
Copy the code

The effect

  • The stadium

General format: ([node description]),() nested parentheses [] parentheses indicate that the node is a large radian rounded rectangle shape, namely the stadium shape,node description is the description text of the node.

The source code

graph LR
    id1([This is the text in the box])
Copy the code

The effect

  • cylindrical

General format: [(node description)],[] parentheses nested () Parentheses indicate that the node is cylindrical, and node description is the description text of the node.

The source code

graph LR
    id1[(Database)]
Copy the code

The effect

  • circular

General format: ((node description)),() parentheses nested () Parentheses indicate that the node is a circular shape, and node description is the description text of the node.

The source code

graph LR
    id1((This is the text in the circle))
Copy the code

The effect

  • Asymmetric rectangle

The general format: >node description], left with right Angle bracket >, right with right middle bracket] represents the asymmetric rectangle shape,node description is the description text of the node.

The source code

graph LR
    id1>This is the text in the box]
Copy the code

The effect

  • The diamond

General format: {node description},{} curly braces represent the diamond shape,node description is the description text of the node.

The source code

graph LR
    id1{This is the text in the box}
Copy the code

The effect

  • hexagonal

General format: {{node description}},{} curly braces {} curly braces denote a hexagonal shape,node description is the description text of a node.

The source code

graph LR
    id1\{\{This is the text in the box\}\}
Copy the code

In Gitbook syntax, double curly braces {} indicate special meaning. The above source code can only be escaped, and does not actually need to be escaped.

The effect

  • parallelogram

General format: [/node description/],[] parentheses nested // / left slash represents the left oblique parallelogram shape,node description is the description text of the node.

The source code

graph TD
    id1[/This is the text in the box/]
Copy the code

The effect

  • parallelogram

General format: [\node description\],[] parentheses nested \\ right slash represents the right oblique parallelogram shape,node description is the description text of the node.

The source code

graph TD
    id1[\This is the text in the box\]
Copy the code

The effect

  • trapezoidal

General format: [/node description\],[] parentheses nested /\ left and right slashes represent the top short bottom long trapezoid shape,node description is the description text of the node.

The source code

graph TD
    A[/Christmas\]
Copy the code

The effect

  • Another trapezoid

General format: [\node description/],[] parentheses nested \/ right left slash represents the top long bottom short trapezoid shape,node description is the description text of the node.

The source code

graph TD
    B[\Go shopping/]
Copy the code

The effect

cable

keywords

+ solid line/dotted line - - - - + arrow/no arrow -- > solid + + description/no description - - description text + | description text + - | - dotted line. Description words + | description words | + bold = = + combinations - > -- -- -- -- -- - - > - - - - has solid line with the arrow + - description text -- -- > + -- - > | description words | - has solid line no arrow text - + + - description | description words | - describe the dotted arrow + -. Description text -. - > + -. - > | description words | - no arrow + - has dotted line. Description text -. - + -. - | description words | - = = > = = = - a description and heavy line have arrows (2) + = = description text + = = = = > > | description script description add heavy line | - no arrow (2) + = = description text + = = = = = = | | description wordsCopy the code

Flowchart connection line style, support solid line and dotted line and arrow style and no arrow style, in addition to support the addition of connection line description text, where — represents the solid line, solid line in the middle a little more -.- represents the dotted line, add arrows with right Angle brackets >, no arrow continue to use a short horizontal line -.

Core: solid line and then dotted line, arrow first and then arrow, the left position to add description needs to distinguish between implementation or dotted line, the right position to add description text format is consistent.

  • Arrow with no description solid line

General format: –>, where — indicates a solid line,> indicates an arrow.

The source code

graph LR
    A-->B
Copy the code

The effect

  • No arrow solid line

General format: –, where — represents a solid line,- represents no arrow.

The source code

graph LR
    A --- B
Copy the code

The effect

  • Arrows with descriptions have solid lines

General format: –connection line description–>, where the left — is added to the left of the solid line, and the right –> represents the solid line with an arrow.

The source code

graph LR
    A-- text -->B
Copy the code

The effect

General format: | connection line description, | the | | to be added to the cable on the right position.

The source code

graph LR
    A-->|text|B
Copy the code

The effect

  • Solid line without arrows with description

General format: — Connection line description, where the left — is added to the left of the solid line, and the right — represents the solid line without the arrow.

The source code

graph LR
    A-- This is the text ---B
Copy the code

The effect

General format: | connection line description, | the | | to be added to the cable on the right position.

The source code

graph LR
    A---|This is the text|B
Copy the code

The effect

  • There are dotted arrow lines

General format: -.connection line description.-> where the left -. Add to the left of the dotted line, and the.-> on the right represents the dotted line with the arrow.

The source code

graph LR
   A-. text .-> B
Copy the code

The effect

  • Arrows with thick solid lines

The general format is ==>, which indicates that thick solid lines are added.

The source code

graph LR
   A ==> B
Copy the code

The effect

  • Arrows with descriptions and bold solid lines

General format: ==connection line description. The left == is added to the left of the bold implementation, and the right ==> is added to the thick solid line.

The source code

graph LR
   A == text ==> B
Copy the code

The effect

  • Arrows with descriptions and bold solid lines

General format: | connection line description, | the | | to be added to the cable on the right position.

The source code

graph LR
   A ==>|text| B
Copy the code

The effect

Advanced usage

keywords

+ -->-->
+ &
+ ""
+ %%
+ subgraph
Copy the code

  • Multi-node chain connection

The source code

Support chain connection,A–>B–>C is equivalent to A–>B and B–>C.

graph LR
   A -- text --> B -- text2 --> C
Copy the code

The effect

  • Multiple nodes are connected

Support common connection mode,A–>B & C is equivalent to A–>B and A–>C forms.

The source code

graph LR
   a --> b & c--> d
Copy the code

The effect

  • Multiple nodes are connected to each other

Variant form of multi-node connect together, A & B – > C & D is equivalent to A — — > C, A – > D, B > C and B — – > D four combinations.

The source code

graph TB
    A & B--> C & D
Copy the code

The effect

  • Double quotation marks enclose special characters

Use double quotation marks (“”) to wrap special characters in the connection line description, for example, [], (), and {}.

The source code

graph LR
    id1["This is the (text) in the box"]
Copy the code

The effect

  • Double quotes wrap escape characters

Supports Html transfer characters

The source code

graph LR
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]
Copy the code

The effect

  • Nested subflow diagrams

define

subgraph title
    graph definition
end
Copy the code

The sample

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
Copy the code

  • Annotation syntax

Comments start with %% and occupy a single line.

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

Quick start flowchart review summary

keywords

- Abbreviations - Geometric shapes - Finite syntaxCopy the code

Mermaid is an open source charting tool that allows you to use Markdown syntax to create flowcharts, change flowchart node shapes, add description text, change line styles, and more.

English Word abbreviations

The values of the four layout directions are in uppercase abbreviations. By default, only the vertical direction is supported.

Chinese English The sample
The illustration graph graphFlowchart type identification
subgraph subgraph subgraphNested subflowchart identification
on top TB 或 BT, the layout direction from top to bottom or bottom to top
Under the bottom BT 或 TB, the layout direction from bottom to top or top to bottom
On the left left LR 或 RL, the layout direction from left to right or right to left
right right RL 或 LR, the layout direction from right to left or left to right

Geometric shape

Keyboard symbols visualize geometric shapes, and the combined form represents the superposition of shapes, in which the outermost symbol is the main shape and the nested symbol is the auxiliary shape.

  • The basic unit
notation meaning type note
[] rectangular Shape of the node support
(a) The rounded rectangle Shape of the node support
{} The diamond Shape of the node support
<> The diamond Shape of the node Does not support
-- The solid line Connecting line style support
-. Dotted line Connecting line style support
= = Add heavy line Connecting line style support
= : The bold dotted line Connecting line style Does not support
> With the arrow Connecting line style support
- No arrow Connecting line style support
Double vertical lines Connect the right line to describe the text Connect line description text support
-- The solid line on the left describes the text Connect line description text support
-. The left dotted line connects the line to describe the text Connect line description text support
= = Add a thick solid line to the left to describe the line text Connect line description text support
= : Bold dotted line on the left connects the line description text Connect line description text Does not support
  • Composition unit
notation meaning type note
[[]] A square Shape of the node Does not support
"()" The cylinder Shape of the node support
({}) prism Shape of the node Does not support
(()) circular Shape of the node support
([]) The stadium Shape of the node support
({}) The circular arc Shape of the node Does not support
Double brace hexagon Shape of the node support
{} [] Regular polygon Shape of the node Does not support
{} () The circular arc Shape of the node Does not support
--> Solid line with arrows Connecting line style support
--- Solid lines have no arrows Connecting line style support
. - > Dotted lines with arrows Connecting line style Does not support
-. - > Dotted lines with arrows Connecting line style support
. - > Dotted lines with arrows Connecting line style support
-. - Dashed lines have no arrows Connecting line style support
. - Dashed lines have no arrows Connecting line style support
= = > Add thick solid line with arrow Connecting line style support
= = = Add thick solid line without arrow Connecting line style support
= : > Bold dotted line with arrows Connecting line style Does not support
= : = > Bold dotted line with arrows Connecting line style Does not support
=. = Bold dotted lines without arrows Connecting line style Does not support
: = Bold dotted lines without arrows Connecting line style Does not support
Double vertical lines Connect the right line to describe the text Connect line description text support
--connection line description--> The solid line on the left with the arrow connector describes the text Connect line description text support
-.connection line description-.-> Left dotted line with arrows connecting line description text Connect line description text support
--connection line description--- Left solid line without arrow connection line description text Connect line description text support
-.connection line description-.- Left dotted line without arrow connection line description text Connect line description text support
==connection line description==> Bold solid line on the left with arrows connecting line description text Connect line description text support
=:connection line description=:=> Bold dotted line on the left with arrows connecting line description text Connect line description text Does not support
==connection line description=== Bold solid line on the left without arrow connection line description text Connect line description text support
=:connection line description=:= Bold dotted line on the left without arrow connection line description text Connect line description text Does not support

Grammar co., LTD.

Syntax support for both node shapes and join line styles is limited and is not a random superposition state, and may be supported more with subsequent updates, all based on official documentation.

In addition to providing the most basic operation nodes, you can also customize the behavior of flow diagrams according to the knowledge of JS and CSS. For details, please refer to the official documents.

The official document: mermaid – js. Making. IO/mermaid / # / f…

  • Interaction Interaction: a mermaid – js. Making. IO/mermaid / # / f…
  • Avi /#/f…
  • S03e04 /#/ S03e04 / s03e04 /#/ S03e04
  • Space-delimited mermaid – js. Making. IO/mermaid / # / f…