マーメイド記法について(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記法)の書き方

花子太郎JohnAliceこんにちは!元気?Great!See you later!花子太郎JohnAlice

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

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

 
 
 
 
Animal
+int age
+String gender
+isMammal()
+mate()
 
Duck
+String beakColor
+swim()
+quack()
 
Fish
-int sizeInFeet
-canEat()
 
Zebra
+bool is_wild
+run()

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

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

 
 
 
 
 
 
Still
Moving
Crash

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

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

CUSTOMERORDERLINE-ITEMDELIVERY-ADDRESSplacescontainsuses

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

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

CatMe
Go to work
Go to work
Make tea
Make tea
Go upstairs
Go upstairs
Do work
Do work
Go home
Go home
Go downstairs
Go downstairs
Sit down
Sit down
My working day

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

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

2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A task Task in sec another task Another task SectionAnotherA Gantt Diagram

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

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

79%17%3%好きな果物は?みかんりんごぶどう

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

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

<<Requirement>>test_reqId: 1Text: the test text.Risk: HighVerification: Test<<Element>>test_entityType: simulationDoc Ref: None<<satisfies>>

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

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

maindevelop0-00ceb291-64ebc682-cd80f0f3-8e9c9825-46e2ba06-e67d970

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