mermaidとは

マークダウンっぽい言語で図表を表示できる。

mermaid.js.org

シーケンス図やクラス図などを作れる。今回はフローチャート図を作ってみる。

このように書く

sequenceDiagram

    actor player as プレイヤー
    participant main as ゲーム画面
    participant game as ゲーム制御プログラム
    participant enemyData as 敵パラメータ

    player ->> main: ゲーム開始ボタンを押す
    main ->> game: ゲームプログラムロード
    game --) enemyData: AJAXでデータロード
    game ->> main: ゲームロード終了通知
    main ->> player: ゲーム画面提供

このように書くと以下のような表が生成される。

mermaidは人やオブジェクトを宣言するフェーズと人とオブジェクトを矢印で結ぶフェーズで別れる。

最初の部分が人、オブジェクトを宣言するフェーズ

    actor player as プレイヤー
    participant main as ゲーム画面
    participant game as ゲーム制御プログラム
    participant enemyData as 敵パラメータ

これがオブジェクトを結ぶフェーズ

    player ->> main: ゲーム開始ボタンを押す
    main ->> game: ゲームプログラムロード
    game --) enemyData: AJAXでデータロード
    game ->> main: ゲームロード終了通知
    main ->> player: ゲーム画面提供

詳しい書き方はドキュメントを参考にしてください。

mermaid.js.org