見出し画像

NotionでMermaid!2022年使ってみたいツールを試してみる#1

2022年はもっとライトに記事を書いてみようかなと思っています。本来なら目標や豊富を語ることが最初の記事っぽいけど、まぁいいですね。

2022年使ってみたいツール

 Notion
2021年から継続してうまい使い方を模索したい

Scrapbox
同僚が使っていたので気になっている

Obshidan
正体不明だけどグラフビューがすごそう…語彙力

Canva
カバー画像とかサムネールを作りたい

NotionでMermaidチャレンジ

Notionとは

情報整理・管理ツールで最近日本でも本腰を入れられているツールです。私も現在は読書管理などに使い始めています。MacのNumbersにも似ている気がしますが、もっと直感的にレイアウトなどができます。

Mermaidとは?

Javascriptのライブラリで、テキストで様々な図を書くことができます。

公式リファレンス

Noteの記事内で何か図を書きたいなと思った時にGoogleスライドで書いてもいいのですが、簡単なものならMermaidで書いた方がいいかもと思い練習しようと思った次第です。

実際に使ってみる

実際にやってみました。noteで使い勝手が良さそうなのはフローチャートと

フローチャート

こんな感じのものが書けます👇

Mermaid記法でフローチャート(TB)

上記の図は以下のようなテキストで書くことができます。

flowchart TB
    id1(マグマ) -- 地下深くでゆっくり冷える --> id2[深成岩]
    id1(マグマ) -- 地表付近で急に冷える --> id4[火山岩]
    style id1 fill:#F77,stroke:#000,stroke-width:2px

TBあtopとbottomの略なので、LRとかRLもあってTBにすると上下変わります。これが快適です✨

Mermaid記法でフローチャート(BT)

パイチャート(円グラフ)

これもスプレッドシートとかで書いてもいいのですが、簡単なものなら使い勝手が良さそうです。

こんな感じのものが描けます👇

Mermaid記法でPieChart

上記の図は以下のようなテキストで書くことができます。

pie
    title 三大洋の面積割合
    "太平洋" : 1.65
    "大西洋" : 0.82
    "インド洋" : 0.73

いかがでししょう?結構使い勝手がいいと思うので、活用していこうと思います。


この記事が気に入ったらサポートをしてみませんか?