見出し画像

【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の記事にしたいと思います。

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

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

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

この記事が参加している募集

noteの書き方

沼落ちnote

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