📈

【mermaid.js】よく使うグラフまとめ(自分用)

2023/03/24に公開

グラフの結果(上)とグラフを作るためのコード(下)を載せています

```mermaid
flowchart LR
    id1[UnrealEngineでゲームを作って公開できる<br/>UnrealEngineはゲーム制作実績多数<br/>UnrealEngine5になった事でゲーム開発の利便性が向上した]
```
```mermaid
flowchart TD
    subgraph ゲームを作る流れ
    A[1.ゲーム素材を用意] --> B[2.ワールドにアイテムを配置]
    B --> C[3.プログラミングで動かす]
    C --> D[4.ゲームをプレイする]
    D --> F[5.ゲームを完成させる]
    F --> H[6.公開,販売する]
    end
```
```mermaid
flowchart LR
    Start --> Stop
``` 
```mermaid
flowchart TB
    subgraph ノード基本構造
    A[イベントノード<br/>- どのタイミングで -] --> B[関数ノード<br/>- 何の機能を実行するのか-]
    end
```
```mermaid
    graph TB
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
``` 

```mermaid
flowchart TD
    Start --> Stop
```
```mermaid
flowchart LR
    id1(This is the text in the box)
```
```mermaid
flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```
```mermaid
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
```
```mermaid
graph TB
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```
```mermaid
graph TB
    A[どっちでゲームを開発するのか]
    A -->| | B[自身のゲーム開発経験値と作るゲームに合わせて選択する事がおすすめ]
	B -->| | C[初心者の方またはブループリント使える方]	
	B -->| | D[C++も使える方]
    C -->| | F[ブループリントメインでゲーム開発がおすすめ]	
	D -->| | G[1.遅延を許容できないオンラインゲーム<br/>2.会社として作るような大規模なゲーム<br/>3.C++について充分な知識がある方]
	G -->| 該当しない | F
	G -->| どれかに該当する | H[C++メインで開発がおすすめ]
```
```mermaid
    graph TB
    A[メッシュ]
    A -->|スケルトンがあり変形アニメーション可能| B[スケルタルメッシュ]
    A -->|スケルトンがなく変形アニメーション不可| C[スタティックメッシュ]
    B --> D[人,モンスター,動物など]
    C --> F[岩,草,椅子,壁,装飾品など]
``` 
```mermaid
flowchart TB
    subgraph クラス
    親クラス-->|継承|子クラス
    end
```
```mermaid
flowchart TD
    subgraph クラス
    親クラス-->| |子クラス
    end
```
```mermaid
flowchart TD
    subgraph ノードを作る場所
    B[ゲーム全体の機能など]
    C[それぞれのアクタの機能など]
    B -->| | D[レベルブループリント]
    B -->| | H[ゲームモード]
    C -->| | F[ブループリントクラス]
    F -->| | G[例1:プレイヤーならCharacter</br>例2:動くステージならActor</br>例3:変数をセーブするならSaveGame]
    end
```
```mermaid
    graph TB
    A[1.スケルトンを入れたメッシュ,例えばマリオを用意する] --> B[2.歩くアニメーションを用意する]
    B --> C[3.アニメーションをマリオのメッシュで再生できるようにする]
    C --> D[4.アニメーションブループリントでアニメーションを編集,管理する]
    D --> F[5.ブループリントからマリオの歩くアニメーションを再生する]
``` 

改行

<br/>

を入れる

グラフ構成

TD,TB,LR

参考になるサイト

https://zenn.dev/okazuki/articles/learning-mermaid

公式サイト↓
https://mermaid-js.github.io/mermaid/#/

Discussion