Mermaidはテキストでグラフやチャートを描ける記法で、フローチャートやシステム開発で使われるシーケンス図、ガントチャートなどを表示できます。
テキストであれば検索が容易で、かつ修正も手軽に行えます。今回はそんなMermaidで利用できる図や書き方を紹介します。
基本形
NotePMでMermaid記法を使う際には、コードブロックにて mermaid を指定してください。具体的には次のようになります。
```mermaid
// この中にMermaid記法
```
フローチャート
フローチャートは --> で要素同士を結んでいくだけです。
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
この内容は次のようなチャートになります。
シーケンス図
状態遷移を表現するのに使われるシーケンス図は次のようになります。 -->> や ->> で記述するのが特徴です。
sequenceDiagram
participant 太郎
participant 花子
太郎->>花子: こんにちは、花子さん。元気ですか？
loop Healthcheck
花子->>花子: Fight against hypochondria
end
Note right of 花子: Rational thoughts <br/>prevail!
花子-->>太郎: 良いですよ！
花子->>次郎: あなたはどうですか？
次郎-->>花子: とても良いです
上の内容は次のようなシーケンス図として表示されます。
ガントチャート
プロジェクトの進捗管理に使われるガントチャートです。
gantt
dateFormat YYYY-MM-DD
title ガントチャートのサンプル
excludes weekdays 2014-01-10
section A section
完了したタスク :done, des1, 2022-07-06,2022-07-08
アクティブなタスク :active, des2, 2022-07-09, 3d
未来のタスク : des3, after des2, 5d
別な未来のタスク : des4, after des3, 5d
上の図は以下のように表示されます。
クラス図
PlantUMLでも使われるクラス図です。関係性を示す矢印記号が多数あります。
Class diagram
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
Gitグラフ
GitHubなどで見られるGitツリーです。利用用途は限られそうですが、ピンポイントで使える場面がありそうです。
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
ER図
データベースのスキーマを表現したりするのに使われるER図です。システム開発で便利でしょう。
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
ユーザージャーニー図
カスタマージャーニーなどで使われる、ユーザーの活動を可視化したチャートです。アイデア次第で色々な使い道がありそうです。
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
ステータス図
フローチャートに似ていますが、よりシステム的に活用ができます。
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
円グラフ
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
要件図
要件図は、SysMLで使用される図になります。要件と要件の関係であったり、他のモデル要素との関係を示すのに用いられます。
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
Mermaid記法の詳細は、以下の公式サイトを参照ください
https://mermaid-js.github.io/mermaid/#/
まとめ
Mermaid記法を使うことで、NotePMの中でチャートやグラフを特別なソフトウェアなしに描けます。テキストだけでなく、チャートを使うことで、より具体的に伝えられるようになったり、情報共有しやすくなるでしょう。
ぜひNotePMの中でMermaid記法をお試しください。
おすすめの情報共有ツール「NotePM」
NotePM（ノートピーエム） は、Webで簡単にマニュアル作成できて、強力な検索機能でほしい情報をすぐに見つけられるサービスです。さまざまな業界業種に導入されている人気サービスで、大手IT製品レビューサイトでは、とくに『使いやすいさ・導入しやすさ』を高く評価されています。
NotePMの特徴
- マニュアル作成、バージョン管理、社外メンバー共有
- 強力な検索機能。PDFやExcelの中身も全文検索
- 社内FAQ・質問箱・社内ポータルとしても活用できる
- 銀行、大学も導入している高度なセキュリティ。安全に情報共有できる
URL: https://notepm.jp/
NotePMについて詳しく見る ＞