Welcome
自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。
フローチャート flowchart.jsの使い方（基本）
ノード構文
nodeName=>nodeType: nodeText[|flowstate][:>urlLink]
| nodeName | ノード変数名を定義する |
|---|---|
| nodeType | ノードタイプを定義する |
| nodeText | ノードの中に挿入されるテキスト |
基本的には「ノード名=>ノードタイプ: ノードテキスト」というように書いていきます。[]の中はオプションで設定できます。「nodeType:」と「nodeText」の間に半角空白がないとエラーになるので注意が必要です。
ノードタイプ
ノードには以下の種類があります。
start,end,operation,inputoutput,subroutine,condition,parallel
ノード間の接続
ノードとノードの接続は「->」を使います。
nodeVar1->nodeVar2->nodeVar3というようにつなげて書いたり、以下のように分割して書くこともできます。
nodeVar1->nodeVar2
nodeVar2->nodeVar3
矢印の方向
<direction>を設定することで矢印の向きを変えられます。
- top
- right
- bottom
- left
st=>start: start
e=>end: end
op1=>operation: operation1
op2=>operation: operation2
st(right)->op1(right)->op2(right)->e
基本部品の書き方
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="http://flowchart.js.org/flowchart-latest.js"></script>
<script>
$(function(){
// コードをフローチャート化します
$('#canvas').flowChart();
});
</script>
</head>
<body>
<div id="canvas">
<!-- ここにコードを書きます -->
</div>
</body>
</html>
start,end
スタートとエンド（開始・終了）
st=>start: start
e=>end: end
st->e
生成されたSVGコード
<svg width="60" height="137" viewBox="0 0 60 137" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;" preserveAspectRatio="xMidYMid meet"><desc>Created with Raphaël 2.3.0</desc><defs>
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block"></path><marker id="raphael-marker-endblock33-objm40cv" markerHeight="3" markerWidth="3" orient="auto" refX="1.5" refY="1.5"><use xlink:href="#raphael-marker-block" transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none"></use></marker></defs>
<rect x="0" y="0" width="51" height="36" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="" stroke-width="3" class="flowchart" id="st" transform="matrix(1,0,0,1,6,6)"></rect><text style="text-anchor: start; font-family: "Arial"; font-size: 14px;" x="10" y="18" text-anchor="start" font-family=""Arial"" font-size="14px" stroke="none" fill="#000000" id="stt" class="flowchartt" transform="matrix(1,0,0,1,6,6)" stroke-width="1"><tspan dy="5">start</tspan></text>
<rect x="0" y="0" width="47" height="36" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="" stroke-width="3" class="flowchart" id="e" transform="matrix(1,0,0,1,8,98)"></rect><text style="text-anchor: start; font-family: "Arial"; font-size: 14px;" x="10" y="18" text-anchor="start" font-family=""Arial"" font-size="14px" stroke="none" fill="#000000" id="et" class="flowchartt" transform="matrix(1,0,0,1,8,98)" stroke-width="1"><tspan dy="5">end</tspan></text>
<path style="" fill="none" stroke="#000000" d="M31.5,42C31.5,42,31.5,80.20077085494995,31.5,93.50016031763516" stroke-width="3" marker-end="url(#raphael-marker-endblock33-objm40cv)"></path>
</svg>
operation
操作（処理）を示します。
st=>start: 開始
e=>end: 終了
op1=>operation: 処理A
st->op1->e
inputoutput
ファイルの入出力を示します。
st=>start: start
e=>end: end
io=>inputoutput: 入出力
st->io
io->e
subroutine
サブルーティーン（定義済み処理）を表します。
st=>start: start
e=>end: end
sub1=>subroutine: subroutine
st->sub1
sub1->e
condition
「Yes/No」「真/偽」が答えとなる判断を表します。
st=>start: start
e=>end: end
cond=>condition: x=1
op1=>operation: operation1
op2=>operation: operation2
st->cond(yes)->op1->e
cond(no)->op2->e
parallel
複数の処理を同時に発生
st=>start: Start
e=>end
op1=>operation: Operation
sub1=>subroutine: Subroutine
cond=>condition: Yes
or No?
io=>inputoutput: catch something...
para=>parallel: parallel tasks
st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path3, top)->op1