MENU

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

flowchart-ui

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

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

かんたんMarkdown

f:id:min0124:20171015004534p:plain

遷移図

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

<div class="flow">

スプラッシュ=>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)->入力エラー

</div>

横バージョン

遷移図2

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

スプラッシュ(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