作 ▸ 2024-05-05 07:58

Mermaidの flowchart の練習

#ツール

Mermaidの flowchart の書き方のメモ

Markdown内に書くことを見越して、テキストのままでぎりぎり読める書き方を模索していたりいなかったり (ビューワー使えよと言われたらそれまで)

Mermaid 10.9.0

メモ

自由にインデントしても許される。
リンクとノード名の間を改行しても許される。
& の前後の改行は許されない。
ノード名にマルチバイト文字を使うのは許されない。
文言に改行を入れたい時は改行文字の前後に半角スペースを入れると見やすい。描画時には左右の半角スペースは無視されるので見た目も崩れない。

習作1

よくあるWebAPI。ユーザー情報を更新するやつ。

個人的にはリンク上のテキストは A --> |テキスト| B よりも A -- テキスト --> B の方が好き。

flowchart TD
    Start([開始]) --> CheckToken

    CheckToken[トークンチェック]
        CheckToken -. NG .-> NotAuthorized
        CheckToken -- OK --> CheckAuthorization

    CheckAuthorization[認可チェック]
        CheckAuthorization -. NG .-> Forbidden
        CheckAuthorization -- OK --> Varidation
    
    Varidation[JSON Schema \n バリデーション]
        Varidation -. NG .-> BadRequest
        Varidation -- OK --> OperationStart
    
    subgraph Operation
        OperationStart(開始)
            OperationStart --> FindUserById

        FindUserById[IDで対象のユーザーを取得してロック]
            FindUserById -. 見つからない .-> NotFound
            FindUserById -- 見つかった --> CheckVersion

        CheckVersion[現在のユーザー情報とパラメータとの \n バージョンチェック]
            CheckVersion -. NG .-> Conflict
            CheckVersion -- OK --> UpdateUser

        UpdateUser[パラメータでユーザー情報を更新]
            UpdateUser -- 成功 --> OperationEnd
        
        OperationEnd(終了)
    end

    OperationEnd --> Success
    Operation -. その他のエラー .-> ServerError
    
    Success([200])
    NotAuthorized([401])
    Forbidden([403])
    BadRequest([400])
    NotFound([404])
    Conflict([409])
    ServerError([500])

例2

なんとは言わないが、この記事は実際のところこれの副産物

ここまで入り組んでると画像出力しても意味不明で、むしろテキストのままのほうが分かりやすいという逆転現象が起きている

flowchart TD
    BFPin[B・F－必中のピン \n Lv.1]
    
    CrawlerA[下級クローラーA \n Lv.2]

    CrawlerB[下級クローラーB \n Lv.2]
   
    BFNeedle[B・F－毒針のニードル \n Lv.2]
        BFNeedle -- デッキから1枚手札に加える --> BFPin & BFArbalest

    GokiPole[ゴキポール \n Lv.3]
        GokiPole -- デッキから1枚手札に加える --> GuardMantis & BFArbalest & Suzumushi

    BTScout[騎甲虫スカウト・バギー \n Lv.3]
        BTScout == 手札・デッキ・墓地から1体特殊召喚 ==> BTScout

    BTScaleBomb[騎甲虫スケイル・ボム \n Lv3]

    Feari[円喚士フェアリ \n Lv3]

    Suiminmin[夢蝉スイミンミン \n Lv3]
    
    GuardMantis[ガード・マンティス \n Lv4]

    Suzumushi[共振虫 \n Lv.4]
        Suzumushi -- デッキから1枚手札に加える -->
            Primitive & CrawlerSoma & BTLance & Dozer & Danaus & Beargram
        Suzumushi -- デッキから1枚墓地へ送る -->
            CrawlerA & CrawlerB & GokiPole & Beargram
    
    BFArbalest[B・F－早撃ちのアルバレスト \n Lv.4]
        BFArbalest == 墓地から1体特殊召喚 ==> BFPin & BFNeedle
        BFArbalest == 手札・デッキから1体特殊召喚 ==> BFPin & BFNeedle
    
    Primitive[プリミティブ・バタフライ \n Lv.5]

    CrawlerSoma[クローラー・ソゥマ \n Lv.6]
        CrawlerSoma == 手札・デッキ・墓地から2体まで特殊召喚 ==> CrawlerA & CrawlerB
    
    BTLance[騎甲虫スティンギー・ランス \n Lv.7]

    Dozer[デビルドーザー \n Lv.8]
        Dozer -. 墓地から1体除外 .-> Suzumushi

    Danaus[クイーン・バタフライ　ダナウス \n Lv.8]
        Danaus == 墓地から3体まで特殊召喚 ==>
            BFNeedle & GokiPole & BTScout & BTScaleBomb & GuardMantis & Suzumushi & BFArbalest

    Beargram[樹冠の甲帝ベアグラム \n Lv.9]
        Beargram -. 墓地から1体除外 .-> Suzumushi

    Pico[甲虫装機ピコファレーナ \n Link2]
        Pico -- 昆虫族モンスターに装備 --> GokiPole & Suzumushi

    BTHorn[騎甲虫アームド・ホーン \n Link2]
        BTHorn --> Summon(昆虫族モンスターの召喚権+1)
        BTHorn -. 墓地から1体除外 .-> Suzumushi

    SeraPapi[熾天蝶 \n Link3]
        SeraPapi == 墓地から1体特殊召喚 \n (次ターン以降) ==>
            BFNeedle & GokiPole & BTScout & BTScaleBomb & GuardMantis & Suzumushi & BFArbalest

    BTAtlas[大騎甲虫インヴィンシブル・アトラス \n Link4]
        BTAtlas == デッキから1体特殊召喚 ==> BTScout & BTScaleBomb & BTLance