This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Basic grammar

Default node

graph TD
Node
Copy the code
graph TD
Node

Nodes with text

Graph TD A[this is A node] B[Special characters ()]
Copy the code
Graph TD A[this is A node] B[" special character ()"]
  • Note:
    • Do not use end as the node of the flowchart. To prevent the flow chart from being broken, capitalize all or any letter, such as “End” or “End”.
    • By putting text inside quotes, you can display more special characters.

Figure the direction of

The statement

  • usegraphKeyword to declare the direction of the entire graph.

towards

  • All the directions are shown in the following table

    • TB – From top to bottom
    • TD – from top to bottom
    • BT – From bottom to top
    • RL – From right to left
    • LR – From left to right

  • From left to right

Graph LR Start --> EndCopy the code
Graph LR Start --> End
  • From top to bottom
Graph TD Start --> EndCopy the code
Graph TD Start --> End

Shape of the node

Round edge node

Graph TD NodeCopy the code
Graph TD Node

Elliptic node

Graph TD Node([ellipse Node])Copy the code
Graph TD Node([ellipse Node])

Subroutine node

Graph TD Node[[subroutine Node]]Copy the code
Graph TD Node[[subroutine Node]]

Cylindrical joint

Graph TD Node[(cylindrical Node)]Copy the code
Graph TD Node[(cylindrical Node)]

Circular node

Graph TD Node(circular Node)Copy the code
Graph TD Node(circular Node)

Asymmetric node

Graph TD Node> asymmetric Node]Copy the code
Graph TD Node> asymmetric Node]

Diamond node

Graph TD Node{diamond Node}Copy the code
Graph TD Node{diamond Node}

Hexagonal nodes

Graph TD Node{{graph TD Node}}Copy the code
Graph TD Node{{graph TD Node}}

Parallelogram nodes

graph TD
Node[/ Parallelogram node /]
Copy the code
Graph TD Node[/ parallelogram Node /]

Contraparallelogram node

Graph TD Node[\ \ \ \ \]Copy the code
Graph TD Node[\ \ \ \ \]

Trapezoidal node

Graph TD Node[/ / ladder Node \]Copy the code
Graph TD Node[/ / ladder Node \]

Anti trapezoidal joint

Graph TD Node[\Copy the code
Graph TD Node[\

Lines between nodes

The line with the arrow

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

Text on lines with arrows

Graph LR A - - > | | B C - text text - > DCopy the code
Graph LR A - - > | | B C - text text - > D

Lines without arrows

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

Text on lines without arrows

Graph LR | -- - | text B C - D - textCopy the code
Graph LR | -- - | text B C - D - text

Dotted line

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

The text on the dotted line

Graph LR A-Copy the code
Graph LR A-

Bold lines

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

Text in bold lines

Graph LR A== text ==>BCopy the code
Graph LR A== text ==>B

The length of the line

  • If the line between some nodes needs to span multiple nodes, then the length of the line needs to be adjusted, as shown in the table below:
The length of the 1 2 3
Regular line --- ---- -----
A common line with an arrow --> ---> ---->
Bold lines = = = = = = = = = = = =
A thick line with an arrow = = > = = = > = = = = >
Dotted line -. - -.. - -... -
Dotted line with arrow -. - > -.. -> -... -> 
Graph LR A-- short line -->B A-- middle line -->C A-- long line ---->DCopy the code
Graph LR A-- short line -->B A-- middle line -->C A-- long line ---->D

subgraph

  • usesubgraph... endKeyword to define
D-->E end A-->C D-->CCopy the code
D-->E end A-->C D-->C

Use %% to add comments to Markdown syntax.

That’s an introduction to the UML flowchart and the associated Markdown syntax 🙂