【目的無しの泥臭調査⑤】mermaid.jsの記法を覚えて、楽しく図を描く。

• ふと気になったことを、淡々と赴くままに調査していく、この上ない自己満足記事第五弾。
• 効率的な学習ぶりの華麗で綺麗な振る舞いの「世の多くの賢人技術者」とは違い、ひたすらに画面遷移と手書き記録を高速回転しながら、心身共に泥まみれの学習ぶりの私。
• 今回は、テキスト形式で簡単に図形を描ける「mermaid.js」の調査をして、汚れ具合に磨きをかけよう。

概要

• Javascriptのチャート生成ライブラリ
• テキスト形式で、図やフローチャートを生成できる。
• 公式サイト

環境

• Windows10
• Visual Studio Code

準備

• Visual Studio Codeをこちらからインストール
• Visual Studio Codeの拡張機能欄を開き、「Markdown Preview Mermaid Support」をインストール
  • 「Ctrl + Shift + X」で拡張機能欄を表示できる。
  • インストール後は、必要に応じて、Visual Studio Codeを再起動
• 準備完了
• あとは、マークダウンファイルを作成して下記の記法のように書いていくと、右にプレビューが表示される。
  ※このサイトでも簡単にプレビューが表示される。

記法

基本

ノード（接続点）

• 各図形の意味は、こちらを参考にする。

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 - 左から右

• 下記は、上から下への流れを示すフローチャート

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

シーケンス図

• 最初に「sequenceDiagram」を指定する。

sequenceDiagram
    クライアント->>サーバー: 要求
    サーバー-->>クライアント: 送信

• ライフライン（参加者）を定義することもできる。
• エイリアス（変数や名前）を指定することもできる。

sequenceDiagram
    participant クライアント
    participant sv as サーバー
    participant db as データベース

    # データ取得コード
    クライアント ->> sv : 要求
    sv ->> db : 発行
    db -->> sv : 結果
    sv -->> クライアント : 結果

    alt 正常終了
        Note over クライアント : 取得データ表示
    else エラー
        Note over クライアント : エラー表示
    end

• 実行仕様（イベント）を追加できる。

sequenceDiagram
    クライアント->>+サーバー: 要求
    サーバー-->>-クライアント: 送信

• ノート（メモ）を追加できる。

sequenceDiagram
    クライアント->>+サーバー: 要求
    Note right of サーバー: これは基本処理です
    サーバー-->>-クライアント: 送信

sequenceDiagram
    クライアント->>+サーバー: 要求
    Note over クライアント,サーバー: きちんと返してくれるかな。
    サーバー-->>-クライアント: 送信

• ループ表現可能

sequenceDiagram
    クライアント->>+サーバー: 要求
    loop ループ処理
        サーバー-->>-クライアント: 送信
    end

• 条件分岐可能

sequenceDiagram
    participant cl as クライアント
    participant sv as サーバー
    cl->>sv: 要求
    alt 正常
        sv->>cl: 送信
    else 異常
        sv->>cl: ダメ
    end

ガントチャート

• 最初に「gant」を指定する。

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

まとめ

• 今回はmermaid.jsの調査ということで、「テキスト形式で簡単に図形が描ける時代になったんだな」という、時代変遷を語る資格のない最初期技術者であることを棚に上げながら、記事を書く。
• 図形描画が苦手な私にとって、簡単に書ける最高の武器を手に入れたので、「需要皆無・無駄作業」の二つが見事に揃っていても、量産していくことにしよう。
• 「便利なJavaScriptライブラリの周期は早すぎるから、長期安定物を誰か開発してほしいな」という、他人依存もいくとこまでいった姿勢に、むしろ自己愛着が高まる。

参考

• https://mermaidjs.github.io/
  →mermaidの公式サイトです。こちらの記事で調査しました。大変お世話になりました。
• https://qiita.com/rana_kualu/items/da394fd33ce019bf0ba7
  →こちらの記事も参考にしました。大変お世話になりました。