Mermaid記法の書き方(Markdownテキストでチャート・グラフが描ける)

,

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の無料トライアル をお試しください。

NotePMサービス紹介資料はこちら >