easy-notion-blogでMermaid記法もサポートされました＼(^o^)／

Mermaid記法はNotionでサポートされたのは2021/12/24。

こんな感じの図。

Notion上での作図方法については過去に投稿したのがあります⭐

ブログとしても使えることになったので

今日は普段使いで便利そうなシーンにMermaidを取り入れてみました。

• Mermaidで作図するとうれしいこと
• 作ってみた１：休憩無しシフト表
• 作ってみた２：休憩有りシフト表
• 作ってみた３：研修の関連
• GitHubでもMermaid記法で作れる話

私もNotionでサポートされたと耳にするまで使ったことありませんでした。

「Notionで使えるなら使ってみようかな・・・」

といった軽い気持ちでMermaid記法を学び始め、

フローチャート図を作りながら楽しむ程度です。

ブログを投稿する中で意外と手間のかかる部分の１つが、

【スクショ】の埋め込み。

ただのスクショならいいのですが、

予めkeynoteやパワポなどで作図する必要がある場合には

げんなり・・・・・(´；ω；｀)

せっかく作っても、

後から変更箇所がある度に差し替える必要があり、、、、

といった部分へ見事にフィットしてくるのがMermaidです。

Notion上でコードを修正すれば図も同期されるので、

ブログ上にも反映される！！！！！！！！

というニヤニヤが止まらず前歯がついつい出てしまう事態なのです。(●´ϖ`●)

⭐変化の激しい図ほどMermaidの恩恵を受けれる⭐

「ブログ」で使える部分に絞って紹介するというより、

【変化の激しい】日々の生活、、、、

特にアルバイトなどで使えそうな図を紹介みようと思います。

予約客・周辺でのイベント・スタッフの突然な休み希望・・・・

状況によって変化が生じる頻度の高い飲食店のシフト。

簡単にスタッフと共有できそう(●´ϖ`●)

gantt
    title ２月〇〇日：シフト・ポジション_飲食店
		%% 休憩なしシフト
		dateFormat HH:mm
		axisFormat  %H:%M

    section 田中
    電話・レジ・ホール  :17:00, 3h

    section 山田
		ホール      :17:30  , 3h

		section 井上
		ホール・締め     :17:30,3h
		
		section 金子
		ホール・レジ点検 :18:00,3h

		section 鈴木
		準備・調理      :16:30  , 4h

		section 斎藤
		調理・納品・締め :18:00,3h

▼　作成時に役立ったMermaid記法ドキュメント

https://mermaid-js.github.io/mermaid/#/gantt

6時間以上の勤務は30分休憩、

8時間以上になると１時間休憩、、、、

勤務時間によって休憩をどのタイミングで取るか、、、、

入り時刻が早い順に取ってもらいたいけど、

昼はピークだから稼働スタッフを減らせない、、、

じゃあ、出勤スタッフを追加しようか。。。。

休憩後スタッフが多めだからその時間に忙しい時間帯にできないことをしようか、、、

といったパズルを簡単にできる(●´ϖ`●)(●´ϖ`●)

gantt
    title ２月〇〇日：シフト・ポジション_コンビニ
		%% 休憩有りシフト
		dateFormat HH:mm
		axisFormat  %H:%M
	昼番  :milestone,a1,08:00,1min


    section 伊藤

		レジ・発注  :a2,09:30,210min
		休憩　:a3,after a2,1h
		レジ・掃除:after a3,3h

    section 小山
		レジ      :b1,08:00  , 4h
		休憩　:b2,after b1,1h
		レジ・本棚整理:after b2,3h

		section 渡辺
		レジ・賞味期限切れ確認・納品・前出し   :12:00  , 4h
		
	昼番_終了:milestone,a1,18:00,1min

▼　作成時に役立ったMermaid記法ドキュメント

https://mermaid-js.github.io/mermaid/#/gantt

• １日のスケジュール
• １日の振り返り
• 勉強計画表

などなど・・・

軸を日付に変更すれば長期日程表も作れそう・・・

新人さんが入ってくると「なんでそんなことしないといけないの？」

といった疑問に遭遇します。

「なんで？」を見える化すると納得して取り組むようになる。

あっという間に一人前になってくれちゃう作戦＼(^o^)／

習得スピードによって意識することを追記したり、

研修する内容を書き換えるのも効率的かもしれません。。

graph TB

	subgraph step1
		am01(笑顔で挨拶)--先輩スタッフが親切にしてくれる-->am04
		am02(掃除)-->am04

		am03(報告)
		am04(手順書覚える)-->am03
	end
subgraph step2

		bm02(ピーク時対応)
		am04-->bm01(操作)-->bm02
		bm03(周囲スタッフの動きを気にする)-->bm02
		am02-->bm03
end

	

▼　作成時に役立ったMermaid記法ドキュメント

https://mermaid-js.github.io/mermaid/#/examples?id=larger-flowchart-with-some-styling

GitHubでMermaidが使えるようになったのはつい最近。

３つのバッククウォートで括ってあげると記入できます。

出だしにmermaid と宣言！

👇

今回作成した図もGitHubへ上げてみました。

右端の↔をクリックすると・・・

👇

見やすい＼(^o^)／＼(^o^)／＼(^o^)／

• 変化の激しい図ほどMermaidの恩恵を受けれる
• シフト表を作れる
• 研修項目を関連付けして可視化できる
• GitHubでも使える

せっかくMermaidを使えるNotionとGitHub。

両方をうまく使い分けて効率的な作業環境を整えたいな〜と計画中のへろほろです。