markdownグラフィック構文

4009 ワード

以下に4種類のフローチャート+3種類のタイミングチャート+2種類のガントチャートを描き,次回必要に応じて直接使用するのに便利である.
1、フローチャート
1,1横フローチャート
a=1
a=2
四角形
フィレット(Fillet)
条件a
結果1
結果2
よこながれず
	```mermaid
	graph LR
	A[  ] -->B(  )
	    B --> C{  a}
	    C -->|a=1| D[  1]
	    C -->|a=2| E[  2]
	    F[     ]
	```

1,2縦方向フローチャート
a=1
a=2
四角形
フィレット(Fillet)
条件a
結果1
結果2
垂直フローチャート
	```mermaid
	graph TD
	A[  ] --> B(  )
	    B --> C{  a}
	    C --a=1-->  D[  1]
	    C --a=2-->  E[  2]
	    F(     )
	```

1,3縦方向標準フローチャート
Created with Rapha澫l 2.2.0開始ボックス処理ボックス判定ボックス(YesまたはNo?)入出力ボックス終了枠サブフローyes no
	```mermaid
	flowchat
	st=>start:    
	op=>operation:    
	cond=>condition:    (   ?)
	sub1=>subroutine:    
	io=>inputoutput:      
	e=>end:    
	st->op->cond
	cond(yes)->io->e
	cond(no)->sub1(right)->op
	```

1,4横方向標準フローチャート
Created with Rapha澫l 2.2.0開始ボックス処理ボックス判定ボックス(YesまたはNo?)入出力ボックス終了枠サブフローyes no
	```mermaid
	flowchat
	st=>start:    
	op=>operation:    
	cond=>condition:    (   ?)
	sub1=>subroutine:    
	io=>inputoutput:      
	e=>end:    
	st(right)->op(right)->cond
	cond(yes)->io(bottom)->e
	cond(no)->sub1(right)->op
	```

2,UMLシーケンス図
2,1 UMLシーケンスパターン例
相手A相手B相手Bはお元気ですか?(リクエスト)オブジェクトBの記述オブジェクトAの記述(ヒント)私は元気です(応答)本当にいいですか?オブジェクトAオブジェクトBタイトル:複雑な使用
	```mermaid
	sequenceDiagram
	  A->>  B:   B   ?(  )
	Note right of   B:   B   
	Note left of   A:   A   (  )
	  B-->>  A:    (  )
	  A->>  B:      ?
	```

2,2 UMLシーケンス図の複雑な例
相手A相手B小三C相手Bはお元気ですか.(リクエスト)オブジェクトBの記述オブジェクトAの記述(ヒント)私は元気です(応答)お元気ですかオブジェクトBは私を探していますあなたは本当に良いですか?私达は友达で谁も私に付き添って相手Aを游ぶことができません
	```mermaid
	sequenceDiagram
	Title:   :    
	  A->>  B:   B   ?(  )
	Note right of   B:   B   
	Note left of   A:   A   (  )
	  B-->>  A:    (  )
	  B->>  :    
	  -->>  A:   B   
	  A->>  B:      ?
	Note over   ,  B:      
	participant C
	Note right of C:      
	```

2,3 UML標準タイミングパターン例
張三李四王五王五君はお元気ですか.病気と戦うloop[健康診断]合理的な食べ物医者に診てもらう...いいですね.あなたはどうですか.いいですね.張三李四王五タイトル:複雑な使用
	```mermaid
	%%      ,->   ,-->  ,->>    
	  sequenceDiagram
	    participant   
	    participant   
	      ->  :      ?
	    loop     
	          ->  :      
	    end
	    Note right of   :       
... -->> : ! -> : ? --> : ! ```

3,ガント図
3,1ガントパターン例
Mon 06 Mon 13進行中計画の既存のタスクタイトルが完了しました
	```mermaid
	gantt
	        dateFormat  YYYY-MM-DD
	        title   
	        section     
	                          :done,    des1, 2014-01-06,2014-01-08
	                          :active,  des2, 2014-01-09, 3d
	                          :         des3, after des2, 5d
	```

3,2ガント図の複雑な例
Mon 06 Mon 13 Mon 20需要原型UI設計未来タスク学習需要設計フレームワーク開発未来タスクプレイ機能テスト圧力テストレポート設計開発テストソフトウェア開発ガント図
	```mermaid
	gantt
	        dateFormat  YYYY-MM-DD
	        title        
	        section   
	                                :done,    des1, 2014-01-06,2014-01-08
	                                :active,  des2, 2014-01-09, 3d
	        UI                       :         des3, after des2, 5d
	                             :         des4, after des3, 5d
	        section   
	                                      :crit, done, 2014-01-06,24h
	                                         :crit, done, after des2, 2d
	                                           :crit, active, 3d
	                                          :crit, 5d
	                                            :2d
	        section   
	                                          :active, a1, after des3, 3d
	                                           :after a1  , 20h
	                                           : 48h
	```