How to get started with writing

Time:2020-11-6

This paper mainly introduces how to start quicklyMermaidFlow chart, no map upload, no drag and drop drawing, real-time rendering flow chart based on source code, easy to operate and widely integrated into mainstream editors, includingmarkdownWriting environment

Through this section, you will learn the following main contents:

  • Understand what a flowchart is andMermaidflow chart;
  • Master and remember how to drawMermaidflow chart;
  • understandGitbookWriting environment related integration plug-ins

How to get started with writing

What is a mermaid flowchart

key word

-Project address
-Online editing
-Official documents

A thousand words is not as good as a picture. The graph that shows the flow of things using graphics is calledflow chart.

MermaidIt is based onJavascriptIt is based onmarkdownSyntax to simplify and speed up the process of generating flowcharts is more than just generating flowcharts

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]

effect

How to get started with writing

Quick start to Mermaid flowchart

Layout direction

key word

+ TB
+ BT
+ LR
+ RL

How to get started with writing

The flow chart layout direction is composed of four basic directions, namely English words:top(I),bottom(b),left(left) andright(right). The optional values are as follows:TBFrom top to bottom,BTFrom bottom to top,LR(from left to right) andRL(from right to left) four kinds

core: only supports up, down, left and right vertical directions. It is an acronym of English words

  • TB

From top to bottomTop to Bottom

Source code

graph TB
    Start --> Stop

effect

How to get started with writing

  • BT

From bottom to topBottom to Top

Source code

graph BT
    Start --> Stop

effect

How to get started with writing

  • LR

From left to rightLeft to Right

Source code

graph LR
    Start --> Stop

effect

How to get started with writing

  • RL

From right to left: fromRight to Left

Source code

graph RL
    Start --> Stop

effect

How to get started with writing

shape

key word

-Node shape
    +[rectangle]
        -[[not supported]]
        -[(cylinder)]
        -[{temporarily not supported}]
        -[/ parallelogram /]
        -[\ \ parallelogram \]
        -[/ trapezoid \]
        -[\ \ trapezoid /]
    +Rounded (rectangular)
        -((round)
        -([stadium])
        -({temporarily not supported})
    +{diamond}
        -{hexagon}}
        -{[not supported]}
        -{(not supported)}
    +> asymmetric rectangle]

How to get started with writing

The node shape of flow chart supports rectangle and circle by default, including simple variants of basic shapes and nested combination form[]Represents a rectangle,()Represents an arc,{}It means sharp corner<>More suitable) etc

core: the outermost layer represents the main shape, and the inner layer is used for auxiliary decoration

One time node

The one-time node is rectangular node by default, and its text content is displayed directlyidThe value of, suitable for the case that multiple references will not occur in the future

idIt is recommended to write a meaningful text description instead of a unique identifier

Source code

graph TD
    id

effect

How to get started with writing

Repeatable node

Repeatable node, specifies the node shape, and its text content is no longeridInstead of<node shape>The value of, suitable for subsequent multiple references to the same node

idRepresents the unique identifier of the node. The text description of the current node is defined by<node shape>Value of the specified, recommendedidWrite a meaningful unique identification

  • rectangle

General format:[node description] ,[]Brackets indicate that the node isrectangleShape,node descriptionIs the description text of the node

Source code

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

effect

How to get started with writing

  • Rounded rectangle

General format:(node description) ,()Parentheses indicate that the node isRounded rectangleShape,node descriptionIs the description text of the node

Source code

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

effect

How to get started with writing

  • stadium

General format:([node description]) ,()Parenthesis nesting[]Brackets indicate that the node is a rounded rectangle with large radian, that isstadiumShape,node descriptionIs the description text of the node

Source code

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

effect

How to get started with writing

  • cylinder

General format:[(node description)] ,[]Bracket nesting()Parentheses indicate that the node iscylinderShape,node descriptionIs the description text of the node

Source code

graph LR
    id1[(Database)]

effect

How to get started with writing

  • circular

General format:((node description)) ,()Parenthesis nesting()Parentheses indicate that the node iscircularShape,node descriptionIs the description text of the node

Source code

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

effect

How to get started with writing

  • Asymmetric rectangle

General format:>node description]On the left is the right angle bracket>On the right is the right bracket]expressAsymmetric rectangleShape,node descriptionIs the description text of the node

Source code

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

effect

How to get started with writing

  • diamond

General format:{node description} ,{}Curly bracketsdiamondShape,node descriptionIs the description text of the node

Source code

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

effect

How to get started with writing

  • hexagon

General format:{{node description}} ,{}Nesting braces{}Curly bracketshexagonShape,node descriptionIs the description text of the node

Source code

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

GitbookDouble brace in grammar{}The above source code can only be escaped for processing, which is not needed\To make an escape

effect

How to get started with writing

  • parallelogram

General format:[/node description/] ,[]Bracket nesting//Left slashLeft oblique parallelogramShape,node descriptionIs the description text of the node

Source code

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

effect

How to get started with writing

  • parallelogram

General format:[\node description\] ,[]Bracket nesting\\Right slashRight oblique parallelogramShape,node descriptionIs the description text of the node

Source code

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

effect

How to get started with writing

  • trapezoid

General format:[/node description\] ,[]Bracket nesting/\Left and right slashesUpper short lower long trapezoidShape,node descriptionIs the description text of the node

Source code

graph TD
    A[/Christmas\]

effect

How to get started with writing

  • Another trapezoid

General format:[\node description/] ,[]Bracket nesting\/Right left slashUpper long lower short trapezoidShape,node descriptionIs the description text of the node

Source code

graph TD
    B[\Go shopping/]

effect

How to get started with writing

Connecting line

key word

+Solid line / dotted line
    - --
    - -.
+Arrow / no arrow
    - >
    - -
+Description / no description
    -Solid line
        +-- descriptive text
        +| descriptive text|
    -Dotted line
        +-. Descriptive text
        +| descriptive text|
+Bold
    - ==
+Combination form
    - -->
    - ---
    - -.->
    - -.-
    -There is a description, a solid line has an arrow
        +-- descriptive text-->
        +-- > | descriptive text|
    -Description solid line without arrow
        +-- descriptive text---
        +--- descriptive text|
    -There are descriptions, dotted lines and arrows
        +-. Descriptive text-.->
        +-. - > | descriptive text|
    -Description dotted line without arrow
        +-. Descriptive text-.-
        +-. - | descriptive text|
    - ==>
    - ===
    -Description bold solid line arrow (2)
        += = description text = = >
        += = > | descriptive text|
    -Bold solid line without arrow (2)
        += = description text===
        += = = | descriptive text|

How to get started with writing

Flow chart connector style supports solid line and dashed line, arrow style and no arrow style. In addition, it also supports adding connector description text, where--For a solid line, a little more in the middle of a solid line-.-For dashed line, add arrow with right angle bracket>With no arrows, continue with the dash-.

core: first solid line and then dotted line, first arrow and then arrow. When adding description text on the left position, it needs to distinguish between implementation and dotted line, and the format of description text added on the right position is consistent

  • Solid line with arrow but no description

General format:-->In which--Represents a solid line,>Indicates arrow

Source code

graph LR
    A-->B

effect

How to get started with writing

  • Solid line without arrow

General format:---In which--Represents a solid line,-Indicates no arrow

Source code

graph LR
    A --- B

effect

How to get started with writing

  • Solid line with arrow with description

General format:--connection line description-->On the left--Add toLeft position of solid lineOn the right-->expressSolid line with arrow.

Source code

graph LR
    A-- text -->B

effect

How to get started with writing

General format:|connection line description|In which||Add toRight position of connecting line.

Source code

graph LR
    A-->|text|B

effect

How to get started with writing

  • Solid line without arrow with description

General format:--connection line descriptionOn the left--Add toLeft position of solid lineOn the right---expressSolid line without arrow.

Source code

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

effect

How to get started with writing

General format:|connection line description|In which||Add toRight position of connecting line.

Source code

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

effect

How to get started with writing

  • Dotted line with arrow

General format:-.connection line description.->On the left-.Add toLeft position of dotted lineOn the right.->expressDashed line with arrow.

Source code

graph LR
   A-. text .-> B

effect

How to get started with writing

  • Bold solid line with arrow

General format:==>, denotes a solid line

Source code

graph LR
   A ==> B

effect

How to get started with writing

  • Bold solid line with arrow with description

General format:==connection line descriptionOn the left==Add to the bold implementation on the left and right==>Stands for bold solid line

Source code

graph LR
   A == text ==> B

effect

How to get started with writing

  • Bold solid line with arrow with description

General format:|connection line description|In which||Add toRight position of connecting line.

Source code

graph LR
   A ==>|text| B

effect

How to get started with writing

Advanced Usage

key word

+ -->-->
+ &
+ ""
+ %%
+ subgraph

How to get started with writing

  • Multi node chain connection

Source code

Support chain connection mode,A-->B-->CEquivalent toA-->BandB-->CForm

graph LR
   A -- text --> B -- text2 --> C

effect

How to get started with writing

  • Multi node joint connection

Support common connection mode,A-->B & CEquivalent toA-->BandA-->CForm

Source code

graph LR
   a --> b & c--> d

effect

How to get started with writing

  • Multi node interconnection

A variant form of joint connection of multiple nodes,A & B --> C & DEquivalent toA-->C ,A-->D,B-->CandB-->DFour combinations

Source code

graph TB
    A & B--> C & D

effect

How to get started with writing

  • Double quotation marks wrap special characters

Double quotation marks are used for special characters in connector description text""Package handling, if encountered[]and()as well as{}Such as special characters

Source code

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

effect

How to get started with writing

  • Double quotation marks wrap escape characters

supportHtmlTransfer character

Source code

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

effect

How to get started with writing

  • Nested sub flow chart

definition

subgraph title
    graph definition
end

Examples

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

How to get started with writing

  • Annotation grammar

Note with%%Start with a single line

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

How to get started with writing

Quick start flowchart review summary

key word

-Abbreviations of English words
-Geometric shape
-Finite grammar

How to get started with writing

MermaidIs an open source mapping tool, can be usedMarkdownSyntax to draw flow chart, support to change the flow chart node shape, add description text, change connector style and so on

Abbreviations of English words

The values of the four layout directions are acronyms of English words. By default, only vertical orientation is supported

chinese english Examples
graphic graph graphFlow chart type identification
Subgraph subgraph subgraphNested sub flow chart identification
upper top TBorBT, from top to bottom or from bottom to top
lower bottom BTorTB, from bottom to top or from top to bottom
Left left LRorRLFrom left to right or from right to left
right right RLorLR, right to left or left to right layout direction

Geometric shape

Keyboard symbols visualize geometric shapes, and combination forms represent the superposition of shapes. The outermost symbol is the main shape, and the nested symbol is the auxiliary shape

  • Basic unit
Representation meaning type remarks
[] rectangle Node shape support
() Rounded rectangle Node shape support
{} diamond Node shape support
<> diamond Node shape I won’t support it
-- Solid line Connector style support
-. Dotted line Connector style support
== Heavy solid line Connector style support
=: Bold dotted line Connector style I won’t support it
> There are arrows Connector style support
- No arrow Connector style support
Double vertical line Right connector description text Connector description text support
-- Left solid line connecting line description text Connector description text support
-. Left dotted line description text Connector description text support
== Bold solid line connector description text on the left Connector description text support
=: Left bold dotted line description text Connector description text I won’t support it
  • Combined unit
Representation meaning type remarks
[[]] square Node shape I won’t support it
[()] cylinder Node shape support
[{}] Prism Node shape I won’t support it
(()) circular Node shape support
([]) stadium Node shape support
({}) arc Node shape I won’t support it
Double brace hexagon Node shape support
{[]} Regular polygon Node shape I won’t support it
{()} arc Node shape I won’t support it
--> Solid line with arrow Connector style support
--- Solid line without arrow Connector style support
-.> Dashed line with arrow Connector style I won’t support it
-.-> Dashed line with arrow Connector style support
.-> Dashed line with arrow Connector style support
-.- Dashed line without arrow Connector style support
.- Dashed line without arrow Connector style support
==> Bold solid with arrow Connector style support
=== Bold solid line without arrow Connector style support
=:> Bold dotted line with arrow Connector style I won’t support it
=:=> Bold dotted line with arrow Connector style I won’t support it
=:= Bold dotted line without arrow Connector style I won’t support it
:= Bold dotted line without arrow Connector style I won’t support it
Double vertical line Right connector description text Connector description text support
--connection line description--> Left solid line with arrow connecting line description text Connector description text support
-.connection line description-.-> Left dotted line with arrow description text Connector description text support
--connection line description--- Left solid line without arrow connecting line description text Connector description text support
-.connection line description-.- Left dotted line without arrow description text Connector description text support
==connection line description==> Bold solid line with arrow on the left, connecting line description text Connector description text support
=:connection line description=:=> Left bold dotted line with arrow connecting line description text Connector description text I won’t support it
==connection line description=== Bold solid line on the left without arrow connecting line description text Connector description text support
=:connection line description=:= Left bold dotted line without arrow connection line description text Connector description text I won’t support it

Finite grammar

No matter the node shape or connector style, the syntax support is limited. It is not a superposition state of random combination. It may also support more with the follow-up update. All are mainly official documents

In addition to the ability to provide the most basic operation nodes, theJSandCSSRelated knowledge highly customized flow chart behavior performance, please refer to the official documents for details

Official documents:https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes

How to get started with writing

Recommended Today

DDD Domain Driven Design: an in-depth interpretation of anemia model and congestion model

Foreword- In order to deeply grasp and understand the core of DDD domain driven design, we can’t get around two abstract concepts – “anemia model” and “congestion model”: The transaction model is the transaction script mode* Congestion model is the domain model pattern. -Anemia model- The anemia model was first widely used in EJB2 and […]