12月24日にNotionに追加された「Mermaid」。

CodeBlockで「Mermaid」を選択すると

リアルタイムで確認しながら記述できてしまう優れものです。

でも、

はじめ機能追加の情報を目にした時、

書くのが難しそうな気がしました。

今まで触ったことなかったし。。。。(´・ω・｀)

でも公式Mermaidサイトに分かりやすい取説があり、

英語が苦手でも

何となく理解できて

何となく使えました。

今日は

• Mermaidを簡単に使う方法
• Mermaidを改造する時に最低限必要な記述法
• Mermaidを使うと得すること
• 私のブログ作業pageに追加したMermaid

の４本立てで紹介していきます(´ε｀ )⭐

Mermaidの開き方までの流れを念の為確認！！

１、半角スラッシュからブロックの装飾欄を表示させる

２、【Code】を選ぶ(これが「CodeBlock」と呼ばれる装飾)

３、左上の言語をクリック

４、頭文字の「m」と打つと候補上部に出てくるので選択

４、左から２番目のタブは【Split】になっているかを確認する

***　準備完了＼(^o^)／ ***

公式Mermaidのサイトに

カタログかのように図とコードとが紹介されているので、

選び放題(*´∀｀*)♫

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

【Flowchart】をクリックすると詳細ページになります。

https://mermaid-js.github.io/mermaid/#/./flowchart?id=flowcharts-basic-syntax

下へ行けばいくほど複雑で作りがいのありそうなデザインが揃ってます。

図の上の文字がサンプルコードなのでコピー。

Notionに戻ってMermaidモードにしたCodeBlockに貼り付ける。

• 文字を変更しながらどの部分に反映されているのかを見て学ぶ。

【気づいたこと】

💡　枠に囲まれた文字と囲まれていない文字がある

💡　２つで改行していたり３つで改行していたりがある

• 新たな文字枠ではなくサンプルに登場している文字枠を使って追加する

【気づいたこと】

💡　四角の文字枠は角括弧で囲まれている

💡　文字枠にすると３つ連続で記述できない

💡　１度枠内の文字を書けば２度目以降は記号のみでいい

• サンプルで使われている文字枠を複製して必要な要素を追加して仕上げる

こんな感じでサンプルコードにある要素を複製すれば

自分の作りたいフローチャートを簡単に作れてしまいます＼(^o^)／

必要な記法は２つでOK

• 作図の向き
• 文字枠の種類

https://mermaid-js.github.io/mermaid/#/./flowchart?id=flowchart-orientation

頭文字の意味を思い浮かべられればOK

「T」👉Top(上)

「B」👉Bottom(下)

「R」👉Right(右)

「L」👉Left(左)

例えば・・・

「TB」👉上から下へ作図する

ってこと。

よく使う枠をピックアップして４つくらい覚えればOK

https://mermaid-js.github.io/mermaid/#/./flowchart?id=node-shapes

私はこの４つが好き＼(^o^)／

▼ 導入前

1. 作図するためだけに専用アプリを開く
2. 作図する
3. 書き出して保存
4. 保存したデータを貼り付ける
5. 必要な修正が発生したら再度専用アプリを開く・・・
6. 修正する
7. 書き出して保存
8. 保存したデータと差し替える

といった工程が、、、、

▼導入後

1. Notionで作図する
2. previewに切り替える
3. 必要な修正が発生したらpreviewをsplitに戻す
4. 修正する
5. previewに切り替える

Notionでブログ作業をしていると保存する必要すらない。(゜o゜;

普段何気なくやっている行動を見える化すると「自分頑張ってる!」ってなった。(*´ڡ`●)

料理するのが億劫でも見える化すると急に「なんだ簡単じゃん」ってなって珍しくやる気が出た。(*´ڡ`●)

Flowchertの他にもいろんなデザインがあるので、

取り入れれば入れるほど幅が広がります(๑´ڡ`๑)

参考ページ：

Theming　https://mermaid-js.github.io/mermaid/#/theming

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

たまに現在地が分からなくなる時があるので

Mermaidで見える化してみました。

これをNotionのブログ作業用Pageに貼り付けたことで、

タスク管理表や記事作成リストとにらめっこしながら

キビキビ動けそうです＼(^o^)／

Mermaidって今まで存在すら知らなかったけど、

公式サイトがすごく分かりやすいので、

エラーに詰まること無く

楽しく作れて、

しかも学べて一石二鳥でした(-ω☆)ｷﾗﾘ

2022/02/15

GitHubにもマーメイド機能が追加されたよ！

2022/02/18

easy-notion-blogでも対応されました⭐

2022/02/22

easy-notion-blogで作成すると便利な図を紹介してみました。