Gonjitti Mega Hit Blog
Published on

【ライフハック】使い捨て図をコードで自動生成する(Mermaid)

mermaid-service-image


ざっくり言うと

  1. あー、またpxがずれているよ！Powerpointの悲哀。社内ミーティングくらいかんたんな図でいいじゃない。
  2. 図を自動生成できるMermaid。システム用だが、広い用途で使えるよ。
  3. 図をコードで保存するメリットとは。ずっとメンテナンスできること。変更管理と保守がしやすい。


PowerPointで人生を消費する人たち


人間はPowerpointを作成するために生まれてきたわけではない。


だが世の中の人間どうしのコミュニケーションで現状最も便利なものは、図を駆使したスライドコミュニケーションだ。


故に、世界中の人間は図を作成し、コピペし、図の位置ずれを上司に怒られて生活している。


いっそ自動化してはどうか。だが完全に自分の意図を読み取って思うがままに図やグラフを作成してくれるAIはまだ時間がかかりそうだ。


もっとかんたんな方法として、コードを書くことで図を自動生成してもらうという方法がある。こんなふうに。


mermaid-graph-image


上図は下記のコードになっている。

graph TB
  Macの選び方 --> 持ち歩く
  持ち歩く -->|はい| スペック
  持ち歩く -->|いいえ| 予算
  スペック -->|必要| R1[MacBook Pro]
  スペック -->|低くても良い| R2[MacBook Air]
  予算 --> |いくらでもある| R3[Mac Pro]
  予算 --> |できれば抑えたい| R4[Mac mini / iMac]

かんたんなMacの購入方法がコードで書けてしまった。PowerPointでやっていたらMacを買う前に家電量販店が閉店していただろう。



Mermaidが図を自動生成する


Mermaidは、もともとシステムのUMLと呼ばれる設計図をコードで自動生成するために用いられるツールだ。


システムエンジニアだけが利用できるイメージを持たれがちだが、通常のビジネスシーンで利用される図と大差ないので、ほぼ流用できる。ビジネスシーンでも利用できそうなものを紹介しよう。(クラス図とかステートマシン図とかはmermaidで確認してほしい)


フローチャートが一番利用できそう。大人向けユーザーの入会フローなどを書く時にこんな感じかしら。


mermaid-flow-chart-image


graph TB
  ユーザーは入会しているか? -->|はい| ログイン後のページ
  ユーザーは入会しているか? -->|いいえ| 18歳未満か?
  18歳未満か? -->|はい| 親の同意または身分証明書があるか?
  18歳未満か? -->|いいえ| 通常の登録ページ
  親の同意または身分証明書があるか? --> |はい| 親の身分証つき登録ページ
  親の同意または身分証明書があるか? --> |いいえ| 登録できませんページ

例えば、円チャートなどもあり、自動生成できる。


mermaid-pie-chart-image


pie title どのペットを飼っているか(%)
    "犬" : 45
    "猫" : 45
    "その他" : 10

ガントチャートは下記で書ける。実は現在日時をPCから取得しており、リアルタイムで開くたびに現在日時の赤線がスライドするのだ。最初は驚愕する。


mermaid-gantt-image


gantt
  title システム開発スケジュール

  section 要件定義
    web: done, 2020-11-30, 2020-12-10
    アプリ : crit, 2020-11-30, 2020-12-20

  section 設計
    web: 2020-12-01, 2020-12-29
    アプリ: crit, 2020-12-20, 2021-01-30

  section 開発
    web: 2020-12-20, 2021-02-01
    アプリ: 2020-12-28, 2021-02-28


導入方法


導入方法は、下記がある。個人的にはエディタソフトでコードを書いてpreviewで作成した図をスクショして貼り付ける、などの対応が早いだろう。詳細はリンクでわかりやすく説明されているので参照いただきたい。




図をコードで保管する真のメリットとは


なんでわざわざコードで図を作ろうとしているのか。


実はシステムの世界ではすべてをコード化して履歴管理するのが流行っている。コードだと、Gitなどの履歴管理と作業した人の捕捉が行いやすく、再利用もテキストのコピペですむので作業をテンプレ化できるのだ。


エンジニアの用語では、インフラをコードで書いて履歴管理をしてメンテナンス性を上げる(インフラストラクチャー・アズ・ア・コード, Infrastructure as a code)、技術文書をコード化する(ドキュメンテーション・アズ・ア・コード, Documentation as a code)などは聞いたことがあるだろう。


別記事 で書いた通り、システム構築とは、際限なき増改築の家と同じなので、膨大なライブラリを管理するにはコードで履歴管理するのが最も効率が良いのだ。ビジネスサイドでも、応用可能性は十分あると思われる。


最初はコードで図を書く感覚に戸惑うかもしれないが、一度身につければ文書を一瞬で作成できるようになる。年末年始の学習内容として強くおすすめしたい。

Discuss on Twitter • View on GitHub