stackeditでのflow図に関して

StackEditでの図の書き方

StackEditはフローチャート描画用のflowchart.jsとシーケンス図用のjs-sequence-diagrams.jsが用意されているのでテキストで描画することができます。
描画関係でいろいろ調べるとmermaid.jsが良さそうですが、StackEditは対応していないので、残念です。

フローチャート

基本的には、以下の手順。

Step1. “エイリアス名=>図の種類: コメント”という塊をつくる。
コメントの後には:>httpとすることでリンクをつけることもできる。

部品	図の種類
始点端子	start
終了端子	end
処理部品	operation
判断部品	condition
定義済み処理部品	subroutline
入出力部品	inputoutput

Step2. 作成したエイリアスを接続する順番を記載
上記で動作を記載した後、１行開けてエイリアス名を”->”で接続していく。

[矢印の向き]
右から線を出したい場合: (right)、
左から線を出したい場合: (left)
をエイリアス名の後に記載。

[confitionの処理]
エイリアス名の後に(yes),(no)を記載し、その後の処理を->でつないでいく。矢印の向きも合わせて指定

以下に例を示しておきます。

例1.

 ```flow
 st=>start: 処理開始
 e=>end: 処理終了
 op1=>operation: テスト
 op2=>operation: 補習
 io1=>inputoutput: 点数入力
 cond1=>condition: 点数>80
 cond2=>condition: 点数>70
 cond3=>condition: 点数>60
 sub1=>subroutine: 合格
 （※2）:>http://www.google.com
 sub2=>subroutine: 不合格

 st->op1->io1->cond1
 cond1(yes)->sub1
 cond1(no,right)->cond2(no,right)->cond3
 cond2(yes)->op2->sub1
 cond3(yes,right)->op1
 cond3(no)->sub2
 ```

例2.

 ```flow
 io1=>operation: A
 io2=>operation: B
 io3=>operation: C
 io4=>operation: D

 io1(right)->io2->io3(right)->io4
 ```

シーケンス図

以下のコマンドを使って各項目を接続していきます。
コメントで改行したい場合は、\nを入れること。
また、接続は自分自身に接続することも可能です。

内容	コマンド
タイトル	Title:
AからBへ実線三角矢印で接続	A -> B: 説明
AからBへ実線矢印で接続	A ->> B: 説明
AからBへ破線三角矢印で接続	A –> B: 説明
AからBへ破線矢印で接続	A –>> B: 説明
コメント(軸の右側)	Note right of 軸名: コメント
コメント(軸の左側)	Note left of 軸名: コメント
コメント(軸の上)	Note over of 軸名: コメント

 ```sequence
 Title: フローチャート
 Note over Class A: function A1
 Class A->>Class B: アプリ起動
 Note over Class B: function B1
 Class B->Class C: テストA
 Class C-->Class B: OK
 Note over Class A: function A2
 Class A-->>Class D: 
 Class D->Class D:関数D1\nここで実験する。
 Class D->Class D:関数D2\nここで結果。
 ```