mermaid.js
| repo | |
|---|---|
| https://github.com/mermaid-js/mermaid | |
| 参考 | |
| https://fairplus.github.io/the-fair-cookbook/1/mermaidsetup.html | |
| jekyll-mermaid | |
| https://github.com/jasonbellamy/jekyll-mermaid | |
| usage | |
| https://mermaid-js.github.io/mermaid/#/ |
記法
ノード（接続点）
graph TD
ノード
ノード1[テキスト入りノード]
ノード2(丸括弧形ノード)
ノード3((円形ノード))
ノード4>非対称形ノード]
ノード5{ひし形ノード}リンク（接続）
|矢印付きリンク|| |オープンリンク|| |リンク上テキスト|| |矢印とテキストのリンク|| |点線リンク|| |点線リンク上テキスト|| |太線リンク|| |太線上のテキスト|| |特殊文字コード使用|| |特殊文字詳細は、こちら|| |特殊文字変換ツールはこちら||
graph TD
鈴木-->田中
佐藤---高橋
渡辺---|仲良し|伊藤
中村-->|好き|山本
小林-.->加藤
佐々木-.気になる.->山田graph TD
斉藤==>松本
井上==嫌い==>木村
A["クローバーマーク♣"] -->B["顔文字(/・ω・)/"]サブグラフ
graph TB
神-->従人
神-->部下
subgraph Cクラス
支配者-->従人
end
subgraph Bクラス
リーダー-->部下
end
subgraph Aクラス
神-->信者
end動き
graph LR
A-->Google
click A callback "クリック"
click Google "https://www.google.co.jp/" "リンク指定"スタイル指定
graph LR
start(開始)-->stop(完了)
style start fill:#f9f,stroke:#333,stroke-width:4px
style stop fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5フローチャート
フローチャートを作成の際には、「graph タイプ」で指定 指定タイプは、下記。 TB - 上から下 BT - 下から上 RL - 右から左 LR - 左から右 下記は、上から下への流れを示すフローチャート <div class="mermaid"> graph TB A–>B A–>C A–>D B–>E B–>F C–>F C–>G D–>G D–>H </div>
graph TB
A-->B
A-->C
A-->D
B-->E
B-->F
C-->F
C-->G
D-->G
D-->H下記は、左から右への流れを示すフローチャート ※同じノード（接続点）があれば、自動的に流れを示す。 graph LR A–>B B–>C C–>D D–>E E–>F F–>G G–>H H–>I I–>A image.png
シーケンス図
最初に「sequenceDiagram」を指定する。
sequenceDiagram クライアント-»サーバー: 要求 サーバー–»クライアント: 送信 image.png
ライフライン（参加者）を定義することもできる。
エイリアス（変数や名前）を指定することもできる。
sequenceDiagram participant クライアント participant sv as サーバー participant db as データベース # データ取得コード クライアント -» sv : 要求 sv -» db : 発行 db –» sv : 結果 sv –» クライアント : 結果 alt 正常終了 Note over クライアント : 取得データ表示 else エラー Note over クライアント : エラー表示 end image.png 実行仕様（イベント）を追加できる。 sequenceDiagram クライアント-»+サーバー: 要求 サーバー–»-クライアント: 送信 image.png ノート（メモ）を追加できる。 sequenceDiagram クライアント-»+サーバー: 要求 Note right of サーバー: これは基本処理です サーバー–»-クライアント: 送信 image.png sequenceDiagram クライアント-»+サーバー: 要求 Note over クライアント,サーバー: きちんと返してくれるかな。 サーバー–»-クライアント: 送信 image.png
ループ表現可能
sequenceDiagram
クライアント->>+サーバー: 要求
loop ループ処理
サーバー-->>-クライアント: 送信
end条件分岐可能
sequenceDiagram
participant cl as クライアント
participant sv as サーバー
cl->>sv: 要求
alt 正常
sv->>cl: 送信
else 異常
sv->>cl: ダメ
endガントチャート
最初に「gant」を指定する。 <div class="mermaid"> gantt dateFormat YYYY-MM-DD title タスク管理 section 田中 完了タスク :done, des1, 2019-01-06,2019-01-08 作業中タスク :active, des2, 2019-01-09, 3d 予定タスク : des3, after des2, 5d 予定タスク2 : des4, after des3, 5d section 鈴木 完了タスク :done, des1, 2019-01-06,2019-01-10 作業中タスク :active, des2, 2019-01-11, 5d 予定タスク : des3, after des2, 6d 予定タスク2 : des4, after des3, 6d </div>
gantt
dateFormat YYYY-MM-DD
title タスク管理
section 田中
完了タスク :done, des1, 2019-01-06,2019-01-08
作業中タスク :active, des2, 2019-01-09, 3d
予定タスク : des3, after des2, 5d
予定タスク2 : des4, after des3, 5d
section 鈴木
完了タスク :done, des1, 2019-01-06,2019-01-10
作業中タスク :active, des2, 2019-01-11, 5d
予定タスク : des3, after des2, 6d
予定タスク2 : des4, after des3, 6dフローチャート
graph TB
Macの選び方 --> 持ち歩く
持ち歩く -->|はい| スペック
持ち歩く -->|いいえ| 予算
スペック -->|必要| R1[MacBook Pro]
スペック -->|低くても良い| R2[MacBook Air]
予算 --> |いくらでもある| R3[Mac Pro]
予算 --> |できれば抑えたい| R4[Mac mini / iMac]クラス図・エンティティ図
classDiagram
class ジョブ{
-int HP
-int MP
-たたかう()
-どうぐ(item)
}
class 黒魔術師{
-ファイア()
}
class 黒魔道師{
-ファイガ()
-メテオ()
}
class 白魔術師{
-ケアル()
}
class 白魔道師{
-ケアルガ()
-レイズ()
}
黒魔術師 <|-- 黒魔道師
白魔術師 <|-- 白魔道師
ジョブ <|-- 黒魔術師
ジョブ <|-- 白魔術師###状態遷移図 <div class="mermaid"> stateDiagram [] –> 待機 待機 –> [] 待機 –> 索敵 索敵 –> 待機 索敵 –> 威嚇射撃 威嚇射撃 –> [*] </div>
stateDiagram
[*] --> 待機
待機 --> [*]
待機 --> 索敵
索敵 --> 待機
索敵 --> 威嚇射撃
威嚇射撃 --> [*]ガントチャート
gantt
title PHPのライフサイクル
section PHP 7.2
アクティブサポート : done, 2017-11-30, 2019-11-30
セキュリティサポート : crit, 2020-11-30
section PHP7.3
アクティブサポート : 2018-12-06, 2020-12-06
セキュリティサポート : crit, 2021-12-06
section PHP7.4
アクティブサポート : 2019-11-28, 2021-11-28
セキュリティサポート : crit, 2022-11-28円グラフ
pie
"iOS": 45.2
"iPhone": 17.2
"PHP": 8.6
"Objective-C": 6.5
"Swift": 6.5
"Xcode": 4
"Laravel": 3
"Realm": 3
"Android": 3
"Others": 2