【noteで図が書ける】Mermaid記法（なんだそれ？）

今日はnoteで何を書こうかな？あれにしようかな？

とか考えながらnoteのヘルプセンターに迷い込んだんです。

「Mermaidを使ってダイアグラムを作成する」

という項目が一番上に・・・

何それ？と思った方は多いと思います。

簡単に言うとMemaid記法は図やグラフを書くためのものです。

```mermaid
%%{init: {'theme':'forest'}}%%
flowchart TD
subgraph サブグラフ名1
A-->B
end

subgraph サブグラフ名2
C-->D
end

C-->|お隣にお邪魔することも可能|B
```

こんなのを画像とかを使わずに書けるというもの。

じゃあ、そのMermaid記法ってnoteでどうやって使うの？

---

1. 「コード」を挿入する

2. コード内に「```」で書き始める

3. Mermaid記法で入力する

4. 「```」で書き終わる

---

といった感じで簡単ですね。

ああ、わかります・・・そうじゃなくて

Mermaid記法はどう書くの？

ですよね？上記のグラフだと以下のような感じになります。

```mermaid
%%{init: {'theme':'forest'}}%%
flowchart TD
subgraph サブグラフ名1
A-->B
end
subgraph サブグラフ名2
C-->D
end
C-->|お隣にお邪魔することも可能|B
```

こんな難しそうなの使えるか！！

とエンジニアや関係者以外の方の大半が思ったかもしれません。

でもよく使う形がテンプレート化されていれば使えると思いませんか？

例えば、以下のような形

```mermaid
flowchart LR
A{おぼえて}--> B{しらべて}--> C{理解する}
```

```mermaid
flowchart LR
A{おぼえて}--> B{しらべて}--> C{理解する}
```

「おぼえて」「しらべて」「理解する」の部分を入れ替えるだけOKです。

コピペして文字列を入れ替えればいいだけなので、誰でも使えると思います。

「おぼえて」「しらべて」「りかいする」は『おしりたんてい』の
”すいりのための 3かじょう”

noteでMermaid記法（なんだそれ？）:まとめ

ここまで読んでいただき

今回は、noteでMermaid記法が使えるのを知って慌てて書きました。

Mermaid記法は本来の使い方はもちろんのこと、noteの装飾にも使えるかもしれません。

面白いのや使えるアイデアがあったら、またnoteの記事にしたいと思います。

その際は、是非チェックしてみてください。

それでは最後まで読んでいただいてありがとうございます。

スキ💕コメント😄フォロー💞大歓迎、お気軽に。