マーメイド記法について(Mermaid記法)

マーメイド記法(Mermaid記法)について

ダイアグラムやフローチャート図を作成できるマーメイド記法を使用する方法について記述します。

※Github、notion、VScodeで利用できるものと同じです。

※マーメイドについては以下URLをご参照ください。
https://mermaid-js.github.io/mermaid/#/

マーメイド記法(Mermaid記法)の設定方法（書き方）について

編集画面の表示と編集方法について

まず、エディターのボタンの中から をクリックしてください。

すると、以下のような編集ダイアログが表示されます。

1. テキストボックスにマーメイド記法を記述する
2. OKボタンを押すと編集画面にチャート図を挿入されます

再編集について

チャート図の上で右クリックして編集ボタンを押すと、編集ダイアログが表示されます。
※チャート図の上にカーソルを持っていき、 をクリックしても編集ダイアログが表示されます。

サンプル

フローチャートのマーメイド記法(Mermaid記法)の書き方

※フローチャートの文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/flowchart

シーケンス図のマーメイド記法(Mermaid記法)の書き方

※シーケンス図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/sequenceDiagram

クラス図のマーメイド記法(Mermaid記法)の書き方

※クラス図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/classDiagram

状態遷移図のマーメイド記法(Mermaid記法)の書き方

※状態遷移図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/stateDiagram

ER図のマーメイド記法(Mermaid記法)の書き方

※ER図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram

ジャーニーマップのマーメイド記法(Mermaid記法)の書き方

※ジャーニーマップの文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/user-journey

ガントチャートのマーメイド記法(Mermaid記法)の書き方

※ガントチャートの文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/gantt

円グラフのマーメイド記法(Mermaid記法)の書き方

※円グラフの文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/pie

要求図のマーメイド記法(Mermaid記法)の書き方

※要求図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/requirementDiagram

Gitコミット図のマーメイド記法(Mermaid記法)の書き方

※Gitコミット図の文法及びサンプルは以下URL先もご参照ください。
https://mermaid-js.github.io/mermaid/#/gitgraph