Hamachi

見た目を変える

シスアド：Mermaid.js入門 ​

ドキュメントに、ER図・フローチャート・シーケンス図などを埋め込むことができます。

Mermaid.jsを使う利点 ​

  1. デザインセンス不要：Mermaid.jsは書いた内容をライブラリ側で解釈しデザインしてくれるため、誰が書いても同じような見た目になります。線がかぶらないように自動配置されるため、見やすい図を描くことができます。
  2. 簡単：Markdownに記述するだけで、図を描くことができます。
  3. Gitのログに残る: 基本的にテキストで記述されるため、Gitのログにも残りdiffが取れます。

ER図を書く ​

面倒なER図も、Mermaid.jsを使えば簡単に書くことができます。
いくつかの表とリレーションを持つ簡単な例を示します。

mermaid-plain
erDiagram
    CUSTOMERS {
        int customer_id PK "顧客ID"
        string name "顧客名"
        string postal_code "郵便番号"
        string address "配送住所"
        string sex "性別"
        int recommend_id FK "紹介者ID"
    }

    ITEMS {
        int item_id PK "商品ID"
        string item_name "商品名"
        int price "価格"
    }

    ORDERS {
        int order_id PK "注文ID"
        int customer_id FK "顧客ID"
        date order_date "注文日"
    }

    ORDER_ITEMS {
        int order_item_id PK "注文商品ID"
        int order_id FK "注文ID"
        int item_id FK "商品ID"
        int quantity "数量"
    }

    CUSTOMERS ||--o{ ORDERS : "places"
    CUSTOMERS ||--o{ CUSTOMERS : "recommends"
    ORDERS ||--o{ ORDER_ITEMS : "contains"
    ITEMS ||--o{ ORDER_ITEMS : "included in"

フローチャートを書く ​

フローチャートを書くのも簡単です。
こんな感じで、簡単にきれいな図を書くことができます。

mermaid-plain
graph TD
    A[Amazonを開く] --> B{買うものが決まっている}
    B -->|Yes| C[購入手続きへ]
    B -->|No| D[商品を探す]
    D --> F{欲しいものがある？}
    F -->|Yes| C
    F -->|No| D

シーケンス図を書く ​

シーケンス図も書くことができます。
以下は、簡単な例です。

mermaid-plain
sequenceDiagram
    actor User as 自分
    participant Brain as 脳内欲望
    participant Amazon as Amazon
    User->>Amazon: サイトを開く
    Amazon-->>User: おすすめ商品を表示
    User->>Brain: 必要なものか考える
    Brain-->>Brain: 必要な理由を探る
    Brain-->>User: たぶん必要（言い訳する）
    User->>Amazon: 購入する
    Amazon-->>User: 購入完了メール
    User->>Brain: 買わなきゃよかったと後悔
    Brain-->>User: ...

ジャーニーマップを書く ​

ユーザーの行動を時系列で表現するジャーニーマップも書くことができます。
あまり使わない機能かもしれませんが、一応紹介しておきます。

mermaid-plain
journey
    title カフェで過ごす理想の1日
    section 朝
      起きる: 5: ユーザー
      カフェを探す: 4: ユーザー
      コーヒーを注文: 5: ユーザー
    section 午前
      ラテアートに感動: 5: ユーザー
      作業開始: 4: ユーザー
    section 昼
      軽食を注文: 4: ユーザー
      SNSに投稿: 3: ユーザー
    section 夕方
      デザートを注文: 4: ユーザー
      夕焼けを眺める: 5: ユーザー
    section 夜
      帰宅: 5: ユーザー
      次のカフェを計画: 4: ユーザー

ガントチャートを書く ​

ガントチャートもかけるそうです。
1〜2年このライブラリを使ってきましたが、ドキュメントを読み込んで初めてこんな機能があると知りました。

多分使うことはないと思いますが、一応紹介しておきます。

mermaid-plain
gantt
    title 家でのパーティー準備
    dateFormat  YYYY-MM-DD
    section 掃除
    部屋の片付け: done, 2024-12-20, 1d
    庭の整備: active, 2024-12-21, 2d
    section 食材の準備
    買い出し: 2024-12-22, 1d
    下ごしらえ: 2024-12-23, 1d
    section 装飾
    テーブルセッティング: 2024-12-23, 0.5d
    部屋の飾り付け: 2024-12-23, 0.5d
    section 当日準備
    飲み物の用意: 2024-12-24, 1h
    料理の仕上げ: 2024-12-24, 2h
    音楽と照明のセットアップ: 2024-12-24, 1h

This documents is written by Ryuto Suzuki.