9.0 KiB
9.0 KiB
【Mermaid】概要及び基本的な使い方
(参考リンク)
Mermaidが対応していないコンテンツでも公式サイトのエディタを 活用することで図形をリンクさせることが可能です
各図形の基本的な書き方
フローチャート図
```mermaid
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
シーケンス図
- 古いバージョンではactor、participantが対応していない
```mermaid
sequenceDiagram
actor User
participant Front
participant Server
User->>Front: URLをリンクする
Front-->>User: 一覧画面を表示する
User->>Front: 検索する
loop 対象商品
Front->>Server: 商品情報を取得する
Server-->>Front: レスポンス
end
Front-->>User: 検索結果を表示する
Note right of Front: Product Find <br/>sequence
```
APIのサンプル例
sequenceDiagram
App ->> API: request
alt OK
API -->> App: 200
else error
API -->> App: 400
end
クラス図
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Zebra{
+bool is_wild
+run()
}
```
classDiagram
Animal <|-- Duck
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Zebra{
+bool is_wild
+run()
}
ER図(データ概念図 CDMD)
データベースのスキーマを表現したりするのに使われるER図です 「概念データモデル（CDM: Conceptual Data Model）」
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
(リレーション用のsymbol)
||--||: 1対1 (One to One)}o--||: 多対1 (Many to One)o{--||: 1対多 (One to Many)}o--o{: 多対多 (Many to Many)
アーキテクチャ図
古いバージョンではアーキテクチャ図が対応していない
```mermaid
architecture-beta
group public_api(cloud)[Public API]
group private_api(cloud)[Private API] in public_api
service database(database)[Database] in private_api
service server(server)[Server] in private_api
server:R -- L:database
```
ガントチャート
```mermaid
gantt
title work
dateFormat YYYY-MM-DD
section work_A
準備 :a1 ,2023-08-12 ,1d
作業 :a2 ,2023-08-14 ,2d
リリース :a3 ,after a2 ,1d
section work_B
準備 :b1 ,after a2 ,1d
作業_1 :b2 ,after b1 ,3d
作業_2 :b3 ,after b1 ,2d
リリース :b4 ,after b2 ,1d
```
gantt
title work
dateFormat YYYY-MM-DD
section work_A
準備 :a1 ,2023-08-12 ,1d
作業 :a2 ,2023-08-14 ,2d
リリース :a3 ,after a2 ,1d
section work_B
準備 :b1 ,after a2 ,1d
作業_1 :b2 ,after b1 ,3d
作業_2 :b3 ,after b1 ,2d
リリース :b4 ,after b2 ,1d
図形の設定について
テーマの設定
参考記事:
%%{init:{'theme':'base'}}%%
default
設定しない場合もこのスタイルになります
%%{init:{'theme':'default'}}%%
graph LR
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
base
%%{init:{'theme':'base'}}%%
graph LR
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
forest
%%{init:{'theme':'forest'}}%%
graph LR
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
dark
%%{init:{'theme':'dark'}}%%
graph LR
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
neutral
%%{init:{'theme':'neutral'}}%%
graph LR
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
Tips
VSCodeにスぺニットを設定する(シーケンス図)
- [Ctrl] + [Shift] + [P]を入力する
- "Snippets: Configure Snippets"を入力する
- mermaid.jsonというスニペットファイルを作成する
- 使って確かめてみる
- Mermaidをサポートするファイルを開く(.mdまたは.mmd)
- "mermaid:sequence"と入力する
- Tabキーを押下する
{
"Mermaid sequence Diagram": {
"prefix": "mermaid:sequence",
"body": [
"sequenceDiagram",
" actor User",
" participant Front",
" participant Server",
" User->>Front: Click Button",
" Front->>Server: Request Data",
" Server-->>Front: Return Data",
" Front-->>User: Display Data"
],
"description": "Create a sequence diagram"
}
}
でない場合はデフォルトでスニペットが無効に なっている場合があります
markdownでも有効にする場合はmarkdown.jsonに以下を追記する
"Mermaid sequence Diagram": {
"prefix": "mermaid:sequence",
"body": [
"```mermaid",
"sequenceDiagram",
" actor User",
" participant Front",
" participant Server",
" User->>Front: Click Button",
" Front->>Server: Request Data",
" Server-->>Front: Return Data",
" Front-->>User: Display Data",
"```"
],
"description": "Create a sequence diagram"
}