320 lines
9.0 KiB
Markdown
320 lines
9.0 KiB
Markdown
# 【Mermaid】概要及び基本的な使い方
|
||
|
||
- [【Mermaid】概要及び基本的な使い方](#mermaid概要及び基本的な使い方)
|
||
- [各図形の基本的な書き方](#各図形の基本的な書き方)
|
||
- [フローチャート図](#フローチャート図)
|
||
- [シーケンス図](#シーケンス図)
|
||
- [クラス図](#クラス図)
|
||
- [ER図(データ概念図 CDMD)](#er図データ概念図-cdmd)
|
||
- [アーキテクチャ図](#アーキテクチャ図)
|
||
- [ガントチャート](#ガントチャート)
|
||
- [図形の設定について](#図形の設定について)
|
||
- [テーマの設定](#テーマの設定)
|
||
- [Tips](#tips)
|
||
- [VSCodeにスぺニットを設定する(シーケンス図)](#vscodeにスぺニットを設定するシーケンス図)
|
||
|
||
|
||
**(参考リンク)**
|
||
* [公式サイト](https://mermaid.js.org/intro/)
|
||
* [公式 WEB Editor](https://mermaid.live/edit#p)
|
||
* [notepm-Mermaid記法の書き方](https://help.notepm.jp/hc/ja/articles/17267311368729-Mermaid%E8%A8%98%E6%B3%95%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9-Markdown%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%A7%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88-%E3%82%B0%E3%83%A9%E3%83%95%E3%81%8C%E6%8F%8F%E3%81%91%E3%82%8B-
|
||
)
|
||
|
||
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]
|
||
```
|
||
````
|
||
|
||
```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]
|
||
```
|
||
|
||
### シーケンス図
|
||
|
||
* **古いバージョンでは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
|
||
```
|
||
````
|
||
|
||
[](https://mermaid.live/edit#pako:eNptkU9LwzAYxr9KyHnFe5GexJOKOHaRXmKTbYU1qVkiyBi4Fr14UPyLsIkbQ0WEMVRwCvsysev8FqatpYi7Je_7e9734X1a0GGYQBM2ya4k1CErLqpx5NncpgAgRzAOKk3Cs7-PuHAd10dUgFXOqPhfLhO-l-GJzLCslDNBZWtNBWcqfFLhiwpGqnOjguMES_uGBhPeBF_vB_P7h_ji87s30IJ5_zEefhT036GzYTd-HRTdBmM-iEbT-bgfXR5F551igWVlzkyQdWbhYXQ31huik6toel3MyDCjWKLCZxVMVNhLnU8ShlC8wHrmJn47nd12F1jfYIIA7tbqArAq-B2-yRmWjr6mSzFY3uFLVh5EIoEl6BHuIRfrhFrJqW0o6sQjNjT1E5Mqkg1hQ5u2NYqkYOV96kBTcElKUPoYiTxQaFZRo6mrBLs61PUs9TT8EuRM1uq5TMe4zVguaP8AZJXvtw)
|
||
|
||
APIのサンプル例
|
||
|
||
```mermaid
|
||
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()
|
||
}
|
||
```
|
||
````
|
||
|
||
```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()
|
||
}
|
||
```
|
||
|
||
### ER図(データ概念図 CDMD)
|
||
|
||
データベースのスキーマを表現したりするのに使われるER図です
|
||
「概念データモデル（CDM: Conceptual Data Model）」
|
||
|
||
````
|
||
```mermaid
|
||
erDiagram
|
||
CUSTOMER ||--o{ ORDER : places
|
||
ORDER ||--|{ LINE-ITEM : contains
|
||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||
```
|
||
````
|
||
|
||
```mermaid
|
||
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
|
||
```
|
||
````
|
||
|
||
[](https://mermaid.live/edit#pako:eNptkMFqwzAQRH9F7MkG-wd0K-RSaCE0t1qlrKWNLbAlsZYCJeTfK9sVTUN12WH1ZhbmCtobAgnIerSRdExMbU8RFSsn8hvYpyBC6ierPzHYSk8-mbo7bhvxdHz-eEDZXjDSH3ZfbbCw7i6tWBfii9UkDEbscaGqiLo7_Kjd-Rv-aF0ncbWPujtt8z_TvZFYvom2FS-yHFx_oYGZeEZrcjPXlVYQR5pJgczS0BnTFBUod8sopuhPX06DjJyogRRyFh0sDoxzWZKx0fPrXvbWeQO5rmEsQED37n3mzzgtdPsG-VmP1Q)
|
||
|
||
### ガントチャート
|
||
|
||
````
|
||
```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
|
||
```
|
||
````
|
||
|
||
|
||
```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
|
||
```
|
||
|
||
## 図形の設定について
|
||
|
||
### テーマの設定
|
||
|
||
**参考記事:**
|
||
* [zenn-Mermaid のテーマ・スタイルの変更方法](https://zenn.dev/junkawa/articles/zenn-mermaidjs-theme-config)
|
||
|
||
|
||
|
||
```sh
|
||
%%{init:{'theme':'base'}}%%
|
||
```
|
||
|
||
**default**
|
||
|
||
設定しない場合もこのスタイルになります
|
||
|
||
```mermaid
|
||
%%{init:{'theme':'default'}}%%
|
||
graph LR
|
||
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
|
||
```
|
||
|
||
**base**
|
||
|
||
```mermaid
|
||
%%{init:{'theme':'base'}}%%
|
||
graph LR
|
||
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
|
||
```
|
||
|
||
**forest**
|
||
|
||
```mermaid
|
||
%%{init:{'theme':'forest'}}%%
|
||
graph LR
|
||
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
|
||
```
|
||
|
||
**dark**
|
||
|
||
```mermaid
|
||
%%{init:{'theme':'dark'}}%%
|
||
graph LR
|
||
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
|
||
```
|
||
|
||
**neutral**
|
||
|
||
```mermaid
|
||
%%{init:{'theme':'neutral'}}%%
|
||
graph LR
|
||
q(QEMU) --> qemu-boot-shim --> physboot --> zircon
|
||
```
|
||
|
||
## Tips
|
||
|
||
### VSCodeにスぺニットを設定する(シーケンス図)
|
||
|
||
1. [Ctrl] + [Shift] + [P]を入力する
|
||
2. "Snippets: Configure Snippets"を入力する
|
||
3. mermaid.jsonというスニペットファイルを作成する
|
||
4. 使って確かめてみる
|
||
1. Mermaidをサポートするファイルを開く(.mdまたは.mmd)
|
||
2. "mermaid:sequence"と入力する
|
||
3. Tabキーを押下する
|
||
|
||
```json
|
||
{
|
||
"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`に以下を追記する
|
||
|
||
```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"
|
||
}
|
||
```
|