herohoroブログ

Mermaid記法でシフト表を作ってみた



🔄   2022-08-02

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

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

こんな感じの図。

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

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

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

概要

Mermaidで作図するとうれしいこと

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

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

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

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

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

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

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

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

げんなり・・・・・(´;ω;`)

せっかく作っても、

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

😵‍💫
極力メンテナンスの手間を減らしたい。。。。。

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

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

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

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

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

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

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

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

作ってみた1:休憩無しシフト表

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

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

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

休憩なしシフト:図

gantt
    title 2月〇〇日:シフト・ポジション_飲食店
		%% 休憩なしシフト
		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

作ってみた2:休憩有りシフト表

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

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

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

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

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

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

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

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

休憩有りシフト:図

gantt
    title 2月〇〇日:シフト・ポジション_コンビニ
		%% 休憩有りシフト
		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

ブログで活用するとしたら・・・(●´ϖ`●)

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

などなど・・・

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

作ってみた3:研修の関連

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

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

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

あっという間に一人前になってくれちゃう作戦\(^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記法で作れる話

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

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

出だしにmermaid と宣言!

画像が読み込まれない場合はページを更新してみてください。

👇

画像が読み込まれない場合はページを更新してみてください。

😲
Notionで作ったMermaidを貼ったり、、、逆もできる!!!!!

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

地味に便利な「拡大」機能

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

画像が読み込まれない場合はページを更新してみてください。

👇

画像が読み込まれない場合はページを更新してみてください。

見やすい\(^o^)/\(^o^)/\(^o^)/

まとめ

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

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

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

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/