Leo的恒河沙

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#

• Description can use quotes to suppress the use of some special characters. eg: d1[“box”]

3. Connections between Nodes#

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#

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

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.