ひとりマーメイド6日目
フローチャートの実用例
概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。
この記事ではマーメイドで記述するフローチャートの実用例を紹介します！
↓↓前回の記事はこちら
フローチャートかきかき
前回、前々回はフローチャートの記述について紹介しました！
今日は実際にマーメイドを使って実用的なフローチャートを記述します！
基本のフローチャート
フローチャートはアルゴリズムやプロセスの流れを表す図です。
mermaid
flowchart TB
A([start]) --> B{true?}
B --Yes--> C[process]
B --No--> D[exception]
C & D --> E([end])
技術スタック
技術スタックをまとめる際にも使えますが、個人的には微妙です。
mermaid
flowchart LR
subgraph client
a(React) --- b(typescript)
end
subgraph API_server
c(Go)
end
client --> API_server --> e[DeepL_API]
API_server --> f[FatSecret_API]
API_server --> g[(Database)]
API_server --auth--> h[firebase]
コンポーネント設計図
コンポーネントの設計図としても使えます。
コンポーネント指向のプロジェクトを進める際に、README に記述しておくと非常に便利です。コードページへのリンクを埋め込んでおくと完璧です！！！
mermaid
flowchart LR
a[Home] --> b[Header]
a --> c[Table]
a --> d[Data]
c --> g[TableHead]
c --> e[Columun]
subgraph 6 times
e --> h[Times]
subgraph 5 times
f[Square]
end
e --> f
end
click a "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/Home.tsx"
click b "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/header/Header.tsx"
click c "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/Table.tsx"
click d "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/data/Data.tsx"
click e "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/column/Column.tsx"
click f "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/column/square/Square.tsx"
click g "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/table_head/TableHead.tsx"
click h "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/column/square/Times.tsx"
画面遷移図
こちらも個人的には微妙です。
mermaid
flowchart LR
a[店舗一覧]
b[店舗詳細]
c[商品詳細]
d[マップ情報]
subgraph Home[ホーム画面]
a
end
a --- b
subgraph Shop[店舗詳細画面]
b --- c & d
end
人物相関図
いつ使うんですか。
mermaid
flowchart
a[まめ太郎]
b[まめ太郎]
c[まめ太郎]
d[まめ太郎]
e[まめ太郎]
a & d <--高校の同級生---> b
a <--高校の同級生---> d
a <--幼稚園の同級生---> c
c <--初対面---> b & d
e <--初対面---> a & b & c & d
まーめいど！ふろーちゃーと！
特に意味のない記述をしている時が一番楽しいですね！
mermaid
flowchart LR
a((a)) --- b((b)) --- c((c)) --- d((d)) --- e((e)) --- f((f)) --- g((g)) --- h((h))
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
a --- b --- c --- d --- e --- f --- g --- h
mermaid
flowchart
no1(( )) --- no2(( )) & no3(( )) --- no4(( ))
no5(( )) --- no3 & no6(( )) --- no7(( ))
no8(( )) --- no6 & no9(( )) --- no10(( ))
no11(( )) --- no9 & no12(( )) --- no13(( ))
no4 --- no14(( )) & no15(( )) --- no16(( ))
no7 --- no15 & no17(( )) --- no18(( ))
no10 --- no17 & no19(( )) --- no20(( ))
no13 --- no19 & no21(( )) --- no22(( ))
no16 --- no23(( )) & no24(( )) --- no25(( ))
no18 --- no24 & no26(( )) --- no27(( ))
no20 --- no26 & no28(( )) --- no29(( ))
no22 --- no28 & no30(( )) --- no31(( ))
no32(( )) --- no12 & no33(( )) --- no34(( ))
no35(( )) --- no33 & no36(( )) --- no37(( ))
no38(( )) --- no36 & no39(( )) --- no40(( ))
no41(( )) --- no39 & no42(( )) --- no43(( ))
no34 --- no21 & no44(( )) --- no45(( ))
no37 --- no44 & no46(( )) --- no47(( ))
no40 --- no46 & no48(( )) --- no49(( ))
no43 --- no48 & no50(( )) --- no51(( ))
no45 --- no30 & no52(( )) --- no53(( ))
no47 --- no52 & no54(( )) --- no55(( ))
no49 --- no54 & no56(( )) --- no57(( ))
no51 --- no56 & no58(( )) --- no59(( ))
まとめ
フローチャート楽しいですねぇ
↓↓次回の記事はこちら！！
参考