マーメイド記法について(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 downMy 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

シェアボタン： このページをSNSに投稿するのに便利です。

最近更新されたページ

投票を作成する

1. 作成ページへ移動する(管理人がログイン時に作成設置できます。)下部画像のように、投票作成のページには上部メニューの「ツール」&rarr;「投票の作成」から移動できます。2. 各種設定を変更する作...

2024-08-02 13:39:31

メニュー

Wiki3をはじめよう Wiki3とは？ 新規登録する 管理画面にログインする 追加でWikiを作成する Wikiの作り方（初心者ガイド）Wikiの管理画面の使い方 基本設定 デザイン設定 ライブラリ...

2024-05-02 11:07:00

用途別記述例

wikiモードを使用して編集している際に、「これってどうすればいいんだろう？」の解決策の一例を紹介するページです。編集の一助になれば幸いです。テーブル関連横幅の大きいテーブルをスマホで表示する（画面か...

2024-02-26 13:58:42

amazonプラグインの使い方

基本表記とプラグインの機能について#amazon(商品ID)指定した商品のAmazonリンクを作成するプラグインです。wikiの設定でAmazonアソシエイトIDが設定されている場合、アフィリエイトリ...

2023-08-17 17:08:06

showrssプラグインの使い方

基本表記とプラグインの機能について#showrss(RSSリンク)指定したRSSからリンクを表示するプラグインです。パラメータ一覧パラメータ説明urlRSSのURLを指定しますlinelimit=数字...

2023-07-06 17:21:02

スパム対策設定

スパム対策でできることスパム対策として Wiki編集（ページ新規作成）の禁止ワード（NGワード） Wiki編集（ページ新規作成）の除外ワード（ホワイトワード） コメント投稿の禁止ワード（NGワード） ...

2023-06-05 13:42:26

欲しいプラグインについて

今後Wiki3に実装してほしい このプラグインを改善してほしいなど、Wiki3のプラグインについてご意見やご要望ありましたら、このページのコメント欄にてお気軽にご連絡ください。現在実装されているプラ...

2023-06-05 13:02:55

ゲーム攻略wikiの作り方

&nbsp;ゲーム攻略wiki作成に向いているかどうか？自分自身がターゲットのゲームが好きであること好きでもないゲームを稼ぐためにやるのは無駄な労力で終わるから諦めましょう。理由やっていないゲームだと...

2022-12-20 15:30:34

コメントNGID機能について

コメントNGID機能とは特定IDのコメントを不可視にすることができる機能です。荒らし行為の書き込みを見たくない方は、ぜひご利用ください。※この機能を使用するにはコメントのIDが表示されている必要があり...

2022-12-15 16:23:09

ウィキ内検索（β版）

Wiki3のウィキ内検索（&beta;版）についてWiki3の管理者・メンバーがログインしている場合のみ、ページ本文またはページタイトルに対して完全一致の検索ができる機能です。 単純な単一検索のみ対応...

2022-12-13 13:35:02

プラグインリファレンス

このページでは、ページ作成時に使える各プラグインについて説明します。プラグインの呼び出し方編集画面のプラグインボタンをクリックすると、画面右側にプラグインメニューが開きます。メニューの中から任意のプラ...

2022-12-13 12:10:12

投票結果を確認する

では、投票結果を確認してみましょう。まずは上部メニューから「ツール」&rarr;「投票一覧」へ移動します。1. 投票一覧ページ投票一覧ページではそのwikiで作成した投票を確認することができます。「投...

2022-10-07 17:16:36

投票ページの作成

作成した投票を実際に投票画面にするにはvoteプラグインを使います。下記画像は、「投票機能とは」のページでvoteプラグインを記述している例になります。voteプラグインの利用方法基本表記とプラグイン...

2022-10-07 16:55:57