id: e657aec3-0e0d-4da7-8fae-1eb3de068a89
Using Typora Tool to Draw Flowcharts_Participant as Using Typro_When Clear Blog-CSDN Blog#
Omnivore#
Using Typora Tool to Draw Flowcharts#
Copyright statement: This article is the original article of the blogger, following the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this statement when reprinting.
Using Typora Tool to Draw Flowcharts#
- Introduction to Typora Editor
- Using Mermaid Syntax to Draw Flowcharts
- 1. Flowchart Direction
- 2. Node Shapes
- 3. Connections between Nodes
- 4. Subgraphs
- 5. Sequence Diagrams
- 6. Participants
- 7. Message Lines
- 8. Activation
- 9. Annotations
- 10. Loops
- 11. Conditions
- Using Flow Syntax to Draw Standard Flowcharts
- 1. Standard Flowchart
- 2. Standard Flowchart (Horizontal)
Introduction to Typora Editor#
Typora Editor allows people to write text using Markdown language more easily, solving the pain points of using traditional Markdown editors to write documents. It has a clean and beautiful interface and supports real-time preview and other functions.
Typora Official Website: https://typora.io/.
Windows version download link: https://typora.io/#windows.
Using Mermaid Syntax to Draw Flowcharts#
Mermaid allows you to create charts and visualizations using text and code. It is a JavaScript-based chart and diagram tool that can dynamically create and modify charts based on Markdown-inspired text definitions.
Official Website: https://mermaidjs.github.io/.
Github Project Address: https://github.com/knsv/mermaid.
1. Flowchart Direction#
2. Node Shapes#
Rectangle Node | Rounded Rectangle Node | Circle Node | Right Flag Node/Asymmetric Shape | Diamond Node |
---|---|---|---|---|
A[Description] | B(Description) | C((Description)) | D>Description] | E{Description} |
- Description can use quotes to suppress the use of some special characters. eg: d1[“box”]
3. Connections between Nodes#
Single Line | Single Line with Text | Bold Line | Bold Line with Text | Dotted Line | Dotted Line with Text |
---|---|---|---|---|---|
—(3 dashes-) or -->(2 dashes-) | –text—(2 dashes before and 3 dashes after) or --text–>(2 dashes before and 2 dashes after) | === or ==> | ==text=== or ==text==> | -.- or -.-> | -.text.- or -.text.-> |
4. Subgraphs#
subgraph Subgraph Name Statements in the subgraph... end
- 1
- 2
- 3
Example:
- Code
graph TB id1(Rounded Rectangle)--Normal Line-->id2[Rectangle] subgraph Subgraph Name id2==Bold Line==>id3{Diamond} id3-.Dotted Line.->id4>Right Flag] id3--No Arrow---id5((Circle)) end
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
Code Result
Subgraph Name
Single Line with Text
Bold Line with Text
Dotted Line with Text
No Arrow
Diamond
Rectangle
Right Flag
Circle
Rounded Rectangle
5. Sequence Diagrams#
sequenceDiagram [Participant 1][Message Line][Participant 2]: Message Body ...
- 1
- 2
- 3
Example:
- Code
sequenceDiagram Participant1->>+Participant2: Are you there? Participant2->>-Participant1: Yes, I am here.
-
1
-
2
-
3
-
Code Result
Participant1 Participant2 Are you there? Yes, I am here. Participant1 Participant2
*The + - symbols in the code are used to represent temporal blocks.
6. Participants#
In the previous example, both "Participant1" and "Participant2" are participants. The syntax used in the previous example is the simplest, but participants can also be clearly indicated.
sequenceDiagram participant Participant1 participant Participant2 ... participant Alias as Participant3 # This syntax can be used to replace Participant 3 with the alias in the following description
- 1
- 2
- 3
- 4
- 5
Example:
- Code
sequenceDiagram participant Participant1 as A participant Participant2 as B A->>B: Are you there? B->>A: Yes, I am here.
-
1
-
2
-
3
-
4
-
5
-
Code Result
Participant1 Participant2 Are you there? Yes, I am here. Participant1 Participant2
7. Message Lines#
Type | Description |
---|---|
-> | Solid line without arrowhead |
–>(2 dashes) | Dotted line without arrowhead |
->> | Solid line with arrowhead |
–>>(2 dashes) | Dotted line with arrowhead |
-x | Solid line with forked arrowhead (asynchronous) |
–x(2 dashes) | Dotted line with forked arrowhead (asynchronous) |
8. Activation#
Adding + at the end of a message line means that the message receiver enters the "activation" state for the current message;
Adding - at the end of a message line means that the message receiver leaves the "activation" state for the current message;
Or directly indicate that a participant enters the "activation" state using the following syntax.
activate Participant
- 1
9. Annotations#
Note Position Description Participant: Annotation Text
-
1
-
Position Description
Right | Left | Center (can span multiple participants) |
---|---|---|
right of | left of | over |
10. Loops#
loop Loop Condition Loop Body Description Statements end
- 1
- 2
- 3
11. Conditions#
alt Condition 1 Description Branch 1 Description Statements else Condition 2 Description # else branch is optional Branch 2 Description Statements else ... ... end
- 1
- 2
- 3
- 4
- 5
- 6
- 7
opt Condition Description Branch Description Statements end
- 1
- 2
- 3
Example
- Code
sequenceDiagramDiagram participant gg as Participant1 participant hh as Participant2 loop Daily Greetings gg->>hh: Is the work done? hh-->>gg: Yes, it's done. How about you? activate gg Note left of gg: Think about it alt Not done yet gg-xhh: Not done yet, working overtime else Done gg-xhh: Done, let's play King of Glory together! end opt Happy Holidays hh-->gg: Happy Birthday~ hh-->gg: Happy Labor Day~ hh-->gg: Happy Children's Day~ end end
- Code Result
Participant1 Participant2 Is the work done? Yes, it's done. How about you? Think about it Not done yet, working overtime Done, let's play King of Glory together! alt [Not done yet] [Done] Happy Birthday~ Happy Labor Day~ Happy Children's Day~ opt [Happy Holidays] loop [Daily Greetings] Participant1 Participant2
Using Flow Syntax to Draw Standard Flowcharts#
1. Standard Flowchart#
Example
- Code
flowchat st=>start: Start op=>operation: Process cond=>condition: Decision (Yes or No?) sub1=>subroutine: Subprocess io=>inputoutput: Input/Output e=>end: End st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
*Simply type "flow" in Typora editor, CSDN automatically converts the keyword "flow" to the mermaid syntax "flowchat", so the first line of code will display "flowchat".
- Code Result
Created with Raphaël 2.2.0 Start Process Decision (Yes or No?) Input/Output End Subprocess yes no
2. Standard Flowchart (Horizontal)#
Example
- Code
flowchatchat st=>start: Start op=>operation: Process cond=>condition: Decision (Yes or No?) sub1=>subroutine: Subprocess io=>inputoutput: Input/Output e=>end: End st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
Code Result
Created with Raphaël 2.2.0 Start Process Decision (Yes or No?) Input/Output End Subprocess yes no
The knowledge points in the article match the official knowledge archive and can be further studied for related knowledge.