【目的無しの泥臭調査⑤】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{ひし形ノード}

image.png


リンク(接続)


  • 例のチャートは、下記の順番で指定。


    • 矢印付きリンク

    • オープンリンク

    • リンク上テキスト

    • 矢印とテキストのリンク

    • 点線リンク

    • 点線リンク上テキスト

    • 太線リンク

    • 太線上のテキスト

    • 特殊文字コード使用





graph TD

鈴木-->田中
佐藤---高橋
渡辺---|仲良し|伊藤
中村-->|好き|山本
小林-.->加藤
佐々木-.気になる.->山田

image.png

graph TD

斉藤==>松本
井上==嫌い==>木村
A["クローバーマーク♣"] -->B["顔文字(/・ω・)/"]

image.png


サブグラフ

graph TB

神-->従人
神-->部下
subgraph Cクラス
支配者-->従人
end
subgraph Bクラス
リーダー-->部下
end
subgraph Aクラス
神-->信者
end

image.png


動き

graph LR

A-->Google
click A callback "クリック"
click Google "https://www.google.co.jp/" "リンク指定"

image.png


スタイル指定

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

image.png


フローチャート


  • フローチャートを作成の際には、「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

image.png


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

    ※同じノード(接続点)があれば、自動的に流れを示す。

graph LR

A-->B
B-->C
C-->D
D-->E
E-->F
F-->G
G-->H
H-->I

I-->A

image.png


シーケンス図


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

sequenceDiagram

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

image.png


  • ライフライン(参加者)を定義することもできる。

  • エイリアス(変数や名前)を指定することもできる。

sequenceDiagram

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

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

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

image.png


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

sequenceDiagram

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

image.png


  • ノート(メモ)を追加できる。

sequenceDiagram

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

image.png

sequenceDiagram

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

image.png


  • ループ表現可能

sequenceDiagram

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

image.png


  • 条件分岐可能

sequenceDiagram

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

image.png


ガントチャート


  • 最初に「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

image.png


まとめ


  • 今回はmermaid.jsの調査ということで、「テキスト形式で簡単に図形が描ける時代になったんだな」という、時代変遷を語る資格のない最初期技術者であることを棚に上げながら、記事を書く。

  • 図形描画が苦手な私にとって、簡単に書ける最高の武器を手に入れたので、「需要皆無・無駄作業」の二つが見事に揃っていても、量産していくことにしよう。

  • 「便利なJavaScriptライブラリの周期は早すぎるから、長期安定物を誰か開発してほしいな」という、他人依存もいくとこまでいった姿勢に、むしろ自己愛着が高まる。


参考