Use typora to draw flow chart, sequence diagram, sequence diagram, Gantt chart, etc. for detailed explanation

Catalog

summary

One 、 flow chart

Two 、UML Sequence diagram

3、 ... and 、 Gantt Chart

Four 、 Class diagram

5、 ... and 、 State diagram

6、 ... and 、 The pie chart

7、 ... and 、 export

8、 ... and 、 summary

---

summary

      Typora It's light and simple Markdown Editor , Support instant rendering technology , It's the same with other Markdown Editor's most significant difference . Instant rendering makes you write Markdown Just want to write Word Documents are as fluid , Unlike other editors, there are edit bar and display bar .

• Typora Deleted preview window , And all the other unnecessary interruptions . Instead, live preview .
• Markdown The syntax of depends on different parsers or editors ,Typora It uses GitHub Flavored Markdown.

Official website link
A big man summarized the learning tutorials ： link
B Station introduction ： link

Typora Built in right Mermaid Support for , Caikuo can draw all kinds of pictures .
Mermaid： link
 

Usage method ：
First, in the Typora in , Input  ```mermaid  Then hit enter , You can initialize a blank graph .
The three above ``` That is to say esc The key corresponds to the following key .
Enter the following source code in the blank space , according to mermaid Syntax format to operate .

One 、 flow chart

1）、 vertical （TD From top to bottom ）

graph TD;
    A-->B;
    A-->C;
    B-->D;
    D-->E;
    D-->F;

       
2）、 The transverse （LR From left to right ）

graph LR;
		A[ square ]-->B( Round corners )
		B-->C{ Conditions a}
		C-->|a=1|D[ result 1]
		C-->|a=2|E[ result 2]

3）、 standard （ vertical ）
         First enter ```flow  Then hit enter , In the input field , Enter the following syntax .

st=>start:  Start box 

op=>operation:  Processing box 

cond=>condition:  Judgment box ( Yes or no ?)

sub1=>subroutine:  Sub process 

io=>inputoutput:  I / O box 

e=>end:  End box 

st->op->cond

cond(yes)->io->e

cond(no)->sub1(right)->op

4）、 standard （ The transverse ）

st=>start:  Start box 

op=>operation:  Processing box 

cond=>condition:  Judgment box ( Yes or no ?)

sub1=>subroutine:  Sub process 

io=>inputoutput:  I / O box 

e=>end:  End box 

st(right)->op(right)->cond

cond(yes)->io(bottom)->e

cond(no)->sub1(right)->op

Two 、UML Sequence diagram
 

• First enter ```mermaid ( or ）sequence
• ->> Represents a solid arrow ,–>> Represents the dashed arrow
• -> A straight line ,–> Dotted line
• Use sequenceDiagram Do not use ``sequence

1）、 Simple

sequenceDiagram 
 Customer ->> Bank counter :  I want to save money   
 Bank counter ->> backstage :  Change the account number   
 backstage ->> Bank counter :  The account number has been changed , Starting tomorrow   
 Bank counter ->> Customer :  Okay , Here is your receipt  , Next person 

sequenceDiagram
		 object A-> object B: object B how are you （ request ）
		Note right of  object B: object B Description of （ Tips ）
		Note left of  object A: Tips 
		 object B-->> object A: I'm fine （ Respond to ）
		 object A->> object B: Are you sure? ？

2）、 complex
 

sequenceDiagram
		title: title ： Complex use 
		 object A->> object B: object B how are you （ request ）
		Note right of  object B: object B Description of （ Tips ）
		Note left of  object A: Tips 
		 object B-->> object A: I'm fine （ Respond to ）
		 object B->> object C: how are you ？
		 object C-->> object A: B I'm here 
		 object A->> object B: Are you sure? ？
		note over  object C, object B: friend 
		participant D
		note right of D: No one to accompany me 

 

sequenceDiagram
		participant A
		participant B
		participant C
		A->>C:hello
		loop health
			C->>C:no 
		end
		Note right of C:you should eat<br/> doctor
		B-->>A:nice
		C->>B:how are you?
		B-->>C:great

sequenceDiagram
		participant A
		participant B
		participant C
		participant D
		title:" Practice sequence diagram "
		A->>B:request
		B->>B:verify sign
		B->>C:123
		C-->>B:321
		B->>C:456
		C->>C:code
		C->>D:789
		D-->>B:987
		alt yes
		Note right of B:yes Result 
		else no
		B-->>D:login
		D-->>B:login success
		end
		B->>B: encryption 
		B-->>A:return 

sequenceDiagram
		title: Sequence diagram example 
		Alice->>Alice: Think aloud 
		Alice-->>John:hello john,
		%% over  Can be used for a single role , It can also be used between two adjacent roles ：
		note over Alice,John:friend
		
		%% loop  Followed by the circular text 
		loop healthcheck
			John-->>John:Fight agaist hypochondra
		end
		
		note right of John: Rational
		
		John-->>Alice:Great!
		John->>Bob:How about you?
		
		%%  Control the focus ： It is used to represent the period of time during which an object performs an operation in a sequence diagram 
		%% activate  The role of ： Indicates that the control focus is activated 
		activate Bob
		Bob-->>John:Jolly good!
		%% deactivate  The role of   Indicates the end of the control focus 
    deactivate Bob
    
    Alice->>+Bob: Hello Bob, how are you?
    
    rect rgb(175, 255, 212)
    alt is sick
    Bob-->>Alice: Not so good :(
    else is well
    Bob-->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob-->>Alice: Thanks for asking
    end
    end
    
    loop communicating
        Alice->>+John: asking some questions
        John-->>-Alice: answer 
    end
    
    par Alice to John
      Alice->>John: Bye
    and Alice to Bob
      Alice->>Bob: Bye
    end
		Alice-xJohn:  This is an asynchronous call 
    Alice--xBob:  This is an asynchronous call 

3）、 standard

%%  Sequence diagram example ,->  A straight line ,--> Dotted line ,->> Solid line arrow 
  sequenceDiagram
    participant  Zhang San 
    participant  Li Si 
     Zhang San -> Wang Wu :  How are you, Wang Wu ？
    loop  health examination 
         Wang Wu -> Wang Wu :  Fighting disease 
    end
    Note right of  Wang Wu :  reasonable   food  <br/> See a doctor ...
     Li Si -->> Zhang San :  very good !
     Wang Wu -> Li Si :  How are you doing? ?
     Li Si --> Wang Wu :  very good !A

 

3、 ... and 、 Gantt Chart
 

%%  Syntax example 
        gantt
        dateFormat  YYYY-MM-DD
        title  Software development Gantt Chart 
        section  Design 
         demand                       :done,    des1, 2014-01-06,2014-01-08
         Prototype                       :active,  des2, 2014-01-09, 3d
        UI Design                      :         des3, after des2, 5d
     Future missions                      :         des4, after des3, 5d
        section  Development 
         Learn to be prepared to understand the needs                       :crit, done, 2014-01-06,24h
         Design framework                              :crit, done, after des2, 2d
         Development                                  :crit, active, 3d
         Future missions                               :crit, 5d
         Play                                    :2d

        section  test 
         A functional test                               :active, a1, after des3, 3d
         Pressure test                                :after a1  , 20h
         Test report                                : 48h

Four 、 Class diagram

Grammar explanation ：<|--  Represents inheritance ,+  Express  public,-  Express  private, Did you learn Java We should all know .
 

classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

5、 ... and 、 State diagram

stateDiagram
    [*] --> s1
    s1 --> [*]

6、 ... and 、 The pie chart

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

7、 ... and 、 export

You can choose the menu for the drawn picture / file / export , Export to image or web page format . The picture in the web page is SVG Format rendered , You can copy SVG Content , Import to SVG In the image editor .
Export to web page type , Then use the browser to open , As shown below ：

Reference article ：

1） Use Typora A picture of the world  
https://blog.csdn.net/fggsgnhz/article/details/114880830?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_v2~rank_aggregation-6-114880830.pc_agg_rank_aggregation&utm_term=Typora%E7%94%BB%E5%9B%BE&spm=1000.2123.3001.4430

2） Fast learning sequence diagram ： brief introduction 、 Drawing method and examples
http://www.woshipm.com/ucd/607593.html
3）UML Sequence diagram (Sequence Diagram) Learning notes https://blog.csdn.net/fly_zxy/article/details/80911942
4） Open source drawing _ Use Typora drawing （ Class diagram 、 flow chart 、 Sequence diagram ）https://blog.csdn.net/weixin_26850069/article/details/112702748

8、 ... and 、 summary

      Okay , That's the end of the introduction , Take a note , With this artifact, it will be much more convenient to draw pictures .