【目的無しの泥臭調査⑤】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 タイプ」で指定

• 指定タイプは、下記。

  • TB - 上から下
  • BT - 下から上
  • RL - 右から左
  • LR - 左から右

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

• 下記は、左から右への流れを示すフローチャート
  ※同じノード（接続点）があれば、自動的に流れを示す。

シーケンス図

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

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

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

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

• ループ表現可能

• 条件分岐可能

ガントチャート

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

まとめ

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

参考

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