ぽよぽよチェス｜画面遷移の流れをMermaidで可視化してみた

こんにちは。今日は、自作アプリ 「ぽよぽよチェス」 の画面遷移フローを整理してみました。

これまでに、画面フローや機能構成の可視化には以下のようなツールを使ってきました：

• XMind Zen
• Visio
• Word
• ProcessOn
• Lucidchart
• draw.io（diagrams.net）
• AutoCAD

まだ試していないツール：

• Whimsical
• PlantUML

今回は Mermaid を使用

今回は Markdown と相性が良い Mermaid を使って、アプリの画面遷移と各機能の構成を図式化しました。

1.簡易フロー

mermaidのコード

flowchart TD
  classDef page fill:#FFFFF,stroke:#1976D2,stroke-width:2px;
  classDef dev fill:#FFFFFF,stroke:#EC407A,stroke-width:2px,stroke-dasharray: 5;

  Start[起動]:::page
  Splash[Splash画面]:::page
  Main[Main画面]:::page

  Start --> Splash --> Main

  %% Main メニュー遷移
  Main --> Play[遊ぶ]:::page
  Main --> History[歴史記録]:::page
  Main --> Tutorial[チュートリアル]:::page
  Main --> Characters[キャラ図鑑]:::page
  Main --> Sounds[音を聞く]:::page
  Main --> LanMatch[LAN対戦]:::page
  Main --> Settings[設定]:::page

  %% Playから戻る（単純フロー）
  Play --> Main

  %% History 遷移
  History --> HistoryDetail[対局履歴ページ]:::page
  HistoryDetail --> Replay[リプレイページ]:::page

  %% Tutorial 遷移
  Tutorial --> PieceIntro[駒の紹介ページ]:::page
  Tutorial --> MoveTutorial[駒の動かし方ページ]:::page
  Tutorial --> CapturePage[駒の取り方ページ]:::page

  %% Characters
  Characters --> CharactersPage[キャラ図鑑ページ]:::page

  %% Sounds
  Sounds --> SoundPage[音を聞くページ]:::page

  %% LAN対戦（開発中）
  LanMatch --> LANPage[LAN対戦設定ページ]:::dev

  %% 設定
  Main --> Settings

2.詳細フロー

Mermaidコードが長すぎてQiitaでは正しくレンダリングされないため、PNG画像に変換して表示しています。

Mermaidのコード全文は以下に掲載しています。

flowchart TD
  classDef page fill:#FFFFFF,stroke:#2196F3,stroke-width:2px;
  classDef feature fill:#FFFFFF,stroke:#FB8C00,stroke-width:1px;
  classDef action fill:#FFFFFF,stroke:#43A047,stroke-width:1px;

  %% 起動 → Splash → Main
  Start[起動]:::page
  Splash[Splash画面]:::page
  Main[Main画面]:::page

  Start --> Splash --> Main

  %% --- Mainページの機能 ---
  subgraph MainMenu[Main画面の機能]
    Play[遊ぶ]:::feature
    LanMatch[LAN対戦]:::feature
    History[歴史記録]:::feature
    Tutorial[チュートリアル]:::feature
    Characters[キャラ図鑑]:::feature
    Sounds[音を聞く]:::feature
    Settings[設定]:::feature
  end

  Main --> Play
  Main --> LanMatch
  Main --> History
  Main --> Tutorial
  Main --> Characters
  Main --> Sounds
  Main --> Settings

  %% --- 遊ぶ（対局） ---
  subgraph GamePage[遊ぶページ]
    Back[戻る]:::action
    Restart[再スタート]:::action
    Resign[投了]:::action
    SaveGame[保存]:::action
    InGameSettings[設定へ]:::action
    ChessOperation[チェス操作]:::action
  end

  Play --> Back --> Main
  Play --> Restart
  Play --> Resign
  Play --> SaveGame
  Play --> InGameSettings
  Play --> ChessOperation

  %% --- LAN対戦設定ページ（開発中） ---
  subgraph LANPage["LAN対戦設定ページ（開発中）"]
    LANBack[戻る]:::action
    DevNote[🔧 実装予定]:::dev
  end

  LanMatch --> LANPage
  LANPage --> LANBack --> Main
  LANPage --> DevNote


  %% --- チュートリアルページ ---
  subgraph TutorialPage[チュートリアルページ]
    TutorialBack[戻る]:::action
    TutorialSettings[設定]:::action
    PieceIntro[駒の紹介]:::feature
    BasicMove[基本の動き方]:::feature
    Capture[駒の取り方]:::feature
  end

  Tutorial --> TutorialPage
  TutorialPage --> TutorialBack --> Main
  TutorialPage --> TutorialSettings
  TutorialPage --> PieceIntro
  TutorialPage --> BasicMove
  TutorialPage --> Capture

  %% --- 駒の紹介ページ ---
  subgraph PieceIntroPage[駒の紹介ページ]
    PieceIntroBack[戻る]:::action
    PieceIntroSettings[設定]:::action
    PiecePrev[前の駒へ]:::action
    PieceNext[次の駒へ]:::action
  end

  PieceIntro --> PieceIntroPage
  PieceIntroPage --> PieceIntroBack --> TutorialPage
  PieceIntroPage --> PieceIntroSettings
  PieceIntroPage --> PiecePrev
  PieceIntroPage --> PieceNext

  %% --- 駒の動かし方ページ（基本の動き方） ---
  subgraph MoveTutorialPage[駒の動かし方ページ]
    MoveBack[戻る]:::action
    MoveSettings[設定]:::action
    MoveStep[駒を動かす操作]:::action
    MoveNext[次へ]:::action
  end

  BasicMove --> MoveTutorialPage
  MoveTutorialPage --> MoveBack --> TutorialPage
  MoveTutorialPage --> MoveSettings
  MoveTutorialPage --> MoveStep
  MoveTutorialPage --> MoveNext

  %% --- 駒の取り方ページ ---
  subgraph CapturePage[駒の取り方ページ]
    CaptureBack[戻る]:::action
    CaptureSettings[設定]:::action
    CapturePrev[← 上一步]:::action
    CaptureNext[次へ →]:::action
  end

  Capture --> CapturePage
  CapturePage --> CaptureBack --> TutorialPage
  CapturePage --> CaptureSettings
  CapturePage --> CapturePrev
  CapturePage --> CaptureNext

  %% --- 設定 ---
  subgraph SettingsPage[設定ページ]
    Rename[名前を変更]:::action
    Language[言語を変更]:::action
    Theme[テーマを選択]:::action
    SoundSetting[サウンド]:::action
    About[製品について]:::action
  end

  Settings --> Rename
  Settings --> Language
  Settings --> Theme
  Settings --> SoundSetting
  Settings --> About

  %% --- 対局履歴 ---
  subgraph HistoryPage[対局履歴ページ]
    HistoryBack[戻る]:::action
    HistorySettings[設定]:::action
    Search[検索]:::action
    Delete[削除]:::action
    ExportPGN[PGNを出力]:::action
    Replay[リプレイページ]:::feature
  end

  History --> HistoryPage
  HistoryPage --> HistoryBack --> Main
  HistoryPage --> HistorySettings
  HistoryPage --> Search
  HistoryPage --> Delete
  HistoryPage --> ExportPGN
  HistoryPage --> Replay

  %% --- リプレイページ ---
  subgraph ReplayPage[リプレイページ]
    ReplaySettings[設定]:::action
    ReplayBack[戻る]:::action
    StepPrev[← 上一步]:::action
    StepNext[下一步 →]:::action
    ReplayAgain[再生し直す]:::action
  end

  Replay --> ReplaySettings
  Replay --> ReplayBack --> HistoryPage
  Replay --> StepPrev
  Replay --> StepNext
  Replay --> ReplayAgain

  %% --- 音を聞くページ ---
  subgraph SoundPage[音を聞くページ]
    SoundBack[戻る]:::action
    SoundSettings[設定]:::action
    SoundList[サウンド一覧表示]:::action
  end

  Sounds --> SoundPage
  SoundPage --> SoundBack --> Main
  SoundPage --> SoundSettings
  SoundPage --> SoundList

  %% --- キャラ図鑑ページ ---
  subgraph CharactersPage[キャラ図鑑ページ]
    CharBack[戻る]:::action
    CharSettings[設定]:::action
    CharList[図鑑リスト]:::action
  end

  Characters --> CharactersPage
  CharactersPage --> CharBack --> Main
  CharactersPage --> CharSettings
  CharactersPage --> CharList

まとめ

Mermaid + Markdown の組み合わせは、開発者にとって非常に相性が良く、

テキストで管理しやすい

Gitで差分が見やすい

ドキュメントとして再利用可能

といった利点があります。

「ぽよぽよチェス」のように画面が多くても、整理された構成を視覚的に表現できるのは非常に便利です。
今後も開発フローに積極的に取り入れていこうと思います！