【flowchart】フローチャートでUI遷移図を作成する方法

flowchart-ui

プログラムの設計のフローチャート(flowchart.js)にURLリンク先に飛ばすことができる機能がついているので、UIの遷移図にも使えないか試してみました。

結果は無理やり、やりたい条件を満たせたという感じです。

かんたんMarkdown

f:id:min0124:20171015004534p:plain

Markdownエディタ「かんたんMarkdown」でフローチャート(flowchart.js)が使えるので、そちらで作成しています。

スプラッシュ=>start: スプラッシュ:>http://www.cg-method.com/[blank] ホーム=>end: ホーム:>http://www.cg-method.com/[blank] トップ=>condition: トップ:>http://www.cg-method.com/[blank] データ引き継ぎ=>condition: データ引き継ぎ:>http://www.cg-method.com/[blank] データ引き継ぎ確認=>condition: データ引き継ぎ確認:>http://www.cg-method.com/[blank] キャッシュクリア=>condition: キャッシュクリア:>http://www.cg-method.com/[blank] キャッシュクリア確認=>condition: キャッシュクリア確認:>http://www.cg-method.com/[blank] 規約の同意=>condition: 規約の同意:>http://www.cg-method.com/[blank] 利用規約=>condition: 利用規約:>http://www.cg-method.com/[blank] プライバシーポリシー=>condition: プライバシーポリシー:>http://www.cg-method.com/[blank] 名前登録=>condition: 名前登録:>http://www.cg-method.com/[blank] 入力エラー=>condition: 入力エラー:>http://www.cg-method.com/[blank] 名前確認=>operation: 名前確認:>http://www.cg-method.com/[blank] ダウンロード確認=>operation: ダウンロード確認:>http://www.cg-method.com/[blank] ダウンロード中=>operation: ダウンロード中:>http://www.cg-method.com/[blank] チュートリアル=>operation: チュートリアル:>http://www.cg-method.com/[blank] スプラッシュ->トップ(yes)->規約の同意-> トップ(no)->データ引き継ぎ(no)->キャッシュクリア(no) データ引き継ぎ(yes)->データ引き継ぎ確認 キャッシュクリア(yes)->キャッシュクリア確認 規約の同意(yes)->名前登録(yes)->名前確認->ダウンロード確認->ダウンロード中->チュートリアル->ホーム 規約の同意(no)->利用規約(no)->プライバシーポリシー(no) 名前登録(no)->入力エラー

横バージョン

流れの向きを指定すると横型にもできます

スプラッシュ(right)->トップ(yes,right)->規約の同意->
トップ(no)->データ引き継ぎ(no,under)->キャッシュクリア(no)
データ引き継ぎ(yes,right)->データ引き継ぎ確認
キャッシュクリア(yes,right)->キャッシュクリア確認(right)
規約の同意(yes,right)->名前登録(yes,right)->名前確認(right)->ダウンロード確認(right)->ダウンロード中(right)->チュートリアル(right)->ホーム
規約の同意(no)->利用規約(no)->プライバシーポリシー(no)
名前登録(no)->入力エラー

カスタマイズ

表示領域(CSS)

.previewMode #previewer {
width: 980px;
}
.previewMode #previewer {
width: 1920px;
}

下線追加(CSS)

text {
text-decoration: underline;
}

文字・ベース色調整(HTML)

"font-color":"black",

"font-color":"blue",

fill:"white",

fill:"yellow",

余計な文字の削除(HTML)

"yes-text":"yes","no-text":"no",

"yes-text":"","no-text":"",

参考

qiita.com

関連

www.cg-method.com