plunkerでmermaid

概要

plunkerでmermaidやってみた。

参考にしたページ。

サンプルコード

<h3>sequence</h3>
<div class="mermaid">
sequenceDiagram
  ユーザ    ->> +Vue         : ログインボタンクリック
  Vue      ->> +Laravel     : ログインAPI
  Laravel  ->> +Database    : SQL
    Note right of Database  : 認証テーブル参照
  Database ->> -Laravel     : Result
  alt ログイン成功
    Laravel ->> Vue         : success
  else 失敗
    Laravel ->> -Vue        : failure
  end
  Vue       ->> -ユーザ      : 結果表示
</div>
<h3>graph tb diagram</h3>
<div class="mermaid">
graph TB
  Macの選び方 --> 持ち歩く
  持ち歩く -->|はい| スペック
  持ち歩く -->|いいえ| 予算
  スペック -->|必要| R1[MacBook Pro]
  スペック -->|低くても良い| R2[MacBook Air]
  予算 --> |いくらでもある| R3[Mac Pro]
  予算 --> |できれば抑えたい| R4[Mac mini / iMac]
</div>
<h3>class diagram</h3>
<div class="mermaid">
classDiagram
  class ジョブ {
    -int HP
    -int MP
    -たたかう()
    -どうぐ(item)
  }
  class 黒魔術師 {
    -ファイア()
  }
  class 黒魔道師 {
    -ファイガ()
    -メテオ()
  }
  class 白魔術師 {
    -ケアル()
  }
  class 白魔道師 {
    -ケアルガ()
    -レイズ()
  }
  黒魔術師 <|-- 黒魔道師
  白魔術師 <|-- 白魔道師
  ジョブ <|-- 黒魔術師
  ジョブ <|-- 白魔術師
</div>

<h3>Gantt diagram</h3>
<div class="mermaid">
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
</div>
<h3>pie</h3>
<div class="mermaid">
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    
</div>

<h3>state diagram</h3>
<div class="mermaid">
stateDiagram
  [*] --> 待機
  待機 --> [*]
  待機 --> 索敵
  索敵 --> 待機
  索敵 --> 威嚇射撃
  威嚇射撃 --> [*]
</div>

成果物

以上。