![見出し画像](https://assets.st-note.com/production/uploads/images/132712856/rectangle_large_type_2_b92c2854bdc8d4a766240b50ff746e57.jpeg?width=1200)
【noteで図が書ける】Mermaid記法(なんだそれ?)
今日はnoteで何を書こうかな?あれにしようかな?
とか考えながらnoteのヘルプセンターに迷い込んだんです。
という項目が一番上に・・・
何それ?と思った方は多いと思います。
簡単に言うとMemaid記法は図やグラフを書くためのものです。
```mermaid
%%{init: {'theme':'forest'}}%%
flowchart TD
subgraph サブグラフ名1
A-->B
end
subgraph サブグラフ名2
C-->D
end
C-->|お隣にお邪魔することも可能|B
```
こんなのを画像とかを使わずに書けるというもの。
じゃあ、そのMermaid記法ってnoteでどうやって使うの?
![](https://assets.st-note.com/img/1709390207625-RFT6TP0RYf.jpg?width=1200)
「コード」を挿入する
コード内に「```」で書き始める
Mermaid記法で入力する
「```」で書き終わる
といった感じで簡単ですね。
ああ、わかります・・・そうじゃなくて
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記法(なんだそれ?):まとめ
ここまで読んでいただき
![](https://assets.st-note.com/img/1709390887733-ixKtDHT5Ah.png?width=1200)
今回は、noteでMermaid記法が使えるのを知って慌てて書きました。
Mermaid記法は本来の使い方はもちろんのこと、noteの装飾にも使えるかもしれません。
面白いのや使えるアイデアがあったら、またnoteの記事にしたいと思います。
その際は、是非チェックしてみてください。
それでは最後まで読んでいただいてありがとうございます。
スキ💕コメント😄フォロー💞大歓迎、お気軽に。
この記事が気に入ったらサポートをしてみませんか?