メインコンテンツへスキップ
見出し画像

便利！快適！Mermaidで図を”書”こう！

    Tamochi

    こんにちは、たもちです。 エンジニア兼心理学ライターをやっています。

    このnoteでは主に心理学的な観点に基づいたITに関する記事を提供しています。本記事は100日間連続投稿企画、第7回の記事となります。

    今回はエンジニアの間で広まりつつあるツールの紹介ですが、専門知識は不要で、特にNotionやObsidian、そしてnoteを日常的に使用している方々にとって有益な記事となっています！

    それでは以下、本編です。

    便利！快適！Mermaid記法で図表作成が劇的にラクになる

    1. 「図が描きたいのに、思うように描けない」という悩み

    紙に図を描くのは簡単です。手を動かせば、すぐにフローチャートや関係図を描き出せます。
    でも、それを電子化しようとすると、途端にハードルが上がりませんか？

    Excelやパワーポイントで図表を作るときの「あるある」

    • 矢印の位置を微調整するのに時間がかかる

    • 図形を追加すると全体のレイアウトが崩れる

    • 文字の配置やサイズ調整に神経を使う

    • 後から修正するとき、また一から調整し直し

    「ちょっとした図を作りたいだけなのに…」そんなストレスを感じたことがある方は多いのではないでしょうか。

    Mermaidなら、そのストレスから解放されます。

    Mermaidは、テキストで図を描ける記法です。
    プログラミング不要で、noteやNotion、Obsidianなどのメモアプリでも使えます。

    マウスでカチカチ操作する代わりに、数行のテキストを書くだけで、きれいな図が完成します。

    この記事では、Mermaidの基本的な使い方から実践的な活用方法まで、初めての方にもわかりやすく紹介します。

    2. こんな場面で活躍！Mermaid活用シーン

    Mermaidは様々な場面で活躍します。具体的な活用シーンを見てみましょう。

    日常業務での活用

    プロジェクト管理：タスクの流れを可視化 プロジェクトの工程を図にすることで、全体像が把握しやすくなります。チーム内での共有もスムーズです。

    業務フロー：手順書や業務マニュアル作成 業務の流れを図解することで、新人教育や業務の標準化に役立ちます。

    アイデア整理：思考の構造化 考えを視覚化することで、頭の中を整理できます。企画書やプレゼン資料の下書きとしても有効です。

    スケジュール管理：期限とタスクの把握 タスクの時系列を可視化することで、プロジェクト全体の進捗が一目でわかります。

    学習・知識管理：ノート作成 勉強した内容を図にまとめることで、記憶に残りやすくなります。noteで学習記録を公開したり、Notionで個人的な知識ベースを作ったり、用途に応じて使い分けられます。

    エンジニア向けの活用

    システム設計：データベース設計やAPI設計 ER図でデータ構造を、シーケンス図でシステム間のやり取りを可視化できます。GitHubのREADMEにも直接埋め込めるので、ドキュメント作成が効率的です。

    コードレビュー：処理フローの説明 複雑なロジックをフローチャートで表現することで、レビュアーの理解を助ける図をコードベースで共有できます。

    3. 誰でも使える基本の図表

    まずは、プログラミング経験がない方でも使いやすい基本的な図表を紹介します。

    フローチャート：処理の流れを示す

    こんなときに使う： 業務の手順、意思決定の流れ、プロセスの可視化

    ```mermaid
flowchart TD
    A[申請書を受け取る] --> B{内容に不備は?}
    B -->|あり| C[差し戻し]
    B -->|なし| D[承認処理]
    C --> E[修正依頼]
    D --> F[完了通知]
```
    flowchart TD
    A[申請書を受け取る] --> B{内容に不備は?}
    B -->|あり| C[差し戻し]
    B -->|なし| D[承認処理]
    C --> E[修正依頼]
    D --> F[完了通知]

    ポイント： 矢印の向きや条件分岐が直感的に表現できます。業務フローやマニュアル作成に最適です。

    ガントチャート：スケジュール管理

    こんなときに使う： プロジェクトのタイムライン、タスクの進捗管理

    ```mermaid
gantt title プロジェクト計画 dateFormat YYYY-MM-DD

    section 企画フェーズ
    要件定義           :a1, 2024-11-01, 3d
    設計               :a2, after a1, 2d

    section 実行フェーズ
    開発               :b1, after a2, 7d
    テスト             :b2, after b1, 3d

    section 完了
    リリース           :c1, after b2, 2d
```
    gantt title プロジェクト計画 dateFormat YYYY-MM-DD

    section 企画フェーズ
    要件定義           :a1, 2024-11-01, 7d
    設計               :a2, after a1, 5d

    section 実行フェーズ
    開発               :b1, after a2, 14d
    テスト             :b2, after b1, 7d

    section 完了
    リリース           :c1, after b2, 2d

    ポイント： 日付とタスクの依存関係を簡単に表現できます。Excelでガントチャートを作る手間から解放されます。

    マインドマップ：アイデアを広げる

    こんなときに使う： ブレインストーミング、概念の整理、学習ノート

    ```mermaid
mindmap root ((新商品企画))
    ターゲット
      20代女性
      健康志向
    機能
      携帯性
      デザイン性
    価格帯
      3000円以下
      学生でも買える
    販路
      オンライン
      実店舗
```
    mindmap root ((新商品企画))
    ターゲット
      20代女性
      健康志向
    機能
      携帯性
      デザイン性
    価格帯
      3000円以下
      学生でも買える
    販路
      オンライン
      実店舗

    ポイント： 思考を放射状に展開できます。アイデア出しや情報整理に便利です。

    円グラフ：割合を視覚化

    こんなときに使う： 構成比の表示、アンケート結果の可視化

    ```mermaid
pie title 時間の使い方
    "仕事" : 40
    "睡眠" : 30
    "趣味" : 15
    "その他" : 15
```
    pie title 時間の使い方
    "仕事" : 40
    "睡眠" : 30
    "趣味" : 15
    "その他" : 15

    ポイント： 数値の割合が直感的にわかります。レポートやプレゼン資料に活用できます。

    エンジニア向け：さらに専門的な図表も

    Mermaidは、技術的なドキュメント作成にも威力を発揮します。

    シーケンス図：システム間のやり取りを可視化

    ```mermaid
sequenceDiagram
    participant User as ユーザー
    participant API as APIサーバー
    participant DB as データベース

    User->>API: ログイン要求
    API->>DB: 認証情報確認
    DB-->>API: 認証結果
    API-->>User: トークン発行
```
    sequenceDiagram
    participant User as ユーザー
    participant API as APIサーバー
    participant DB as データベース

    User->>API: ログイン要求
    API->>DB: 認証情報確認
    DB-->>API: 認証結果
    API-->>User: トークン発行

    活用例： API設計書、システム仕様書、障害調査レポート

    ER図：データベース設計

    ```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"

    USER {
        int user_id PK
        string email
        string name
    }
    ORDER {
        int order_id PK
        int user_id FK
        date order_date
    }
    PRODUCT {
        int product_id PK
        string name
        decimal price
    }
```
    erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"

    USER {
        int user_id PK
        string email
        string name
    }
    ORDER {
        int order_id PK
        int user_id FK
        date order_date
    }
    PRODUCT {
        int product_id PK
        string name
        decimal price
    }

    活用例： データベース設計書、テーブル定義書、システム間データ連携の説明

    クラス図：オブジェクト指向設計

    ```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +String color
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

```
    classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +String color
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

    活用例： クラス設計書、リファクタリング計画、コードレビュー資料

    4. 実践！noteとNotionでの使い方

    noteでの使い方

    noteでMermaidを使うのはとても簡単です。
    基本的な手順

    1. 記事編集画面で「＋」ボタンをクリック

    2. 「</> コードブロック」を選択

    3. コードブロック内に以下の形式で記述：

    ```mermaid
    内容
    ```

    この形式で書くだけで、自動的にMermaid図として表示されます！

    Notionでの使い方

    Notionでも同様にシンプルです。
    基本的な手順
    1. Notionのページで `/code` と入力
    2. 言語を `Mermaid` に設定
    3. コードを書く

    基本的な中身の書き方は上記のサンプルや下に示す公式ドキュメントを参考にしてください。

    5. 便利な小技とTips

    色やスタイルのカスタマイズ

    Mermaidでは、図の見た目をカスタマイズできます。

    ```mermaid
flowchart TD
    A[通常の処理]
    B[重要な処理]:::important
    C[注意が必要]:::warning

    A --> B --> C

    classDef important fill:#e1f5ff,stroke:#01579b,stroke-width:3px
    classDef warning fill:#fff9c4,stroke:#f57f17,stroke-width:3px
```
    flowchart TD
    A[通常の処理]
    B[重要な処理]:::important
    C[注意が必要]:::warning

    A --> B --> C

    classDef important fill:#e1f5ff,stroke:#01579b,stroke-width:3px
    classDef warning fill:#fff9c4,stroke:#f57f17,stroke-width:3px

    図を読みやすくするコツ

    1. 階層を意識する：情報は上から下、左から右に

    2. 適度に改行する：コードの可読性が上がり、後から編集しやすい

    3. コメントを活用する：%% でコメントを書いておくと、後で見返したときに便利

    %% これはユーザー登録フローです
flowchart TD
    A[フォーム入力] --> B{入力チェック}
    B -->|OK| C[登録完了]
    B -->|NG| A

    1. ノード名を工夫する：短くわかりやすい名前をつける

    2. 関連する要素をまとめる：subgraph機能で論理的なグループ化ができる

    よくあるエラーと解決法

    エラー1：図が表示されない → コードブロックの言語設定が Mermaid になっているか確認

    エラー2：矢印がつながらない → ノード名（A、Bなど）のスペルミスがないか確認

    エラー3：日本語が文字化けする → 通常は問題ありませんが、古いバージョンでは英数字に置き換えてみる

    エラー4：複雑な図が崩れる → subgraphで段階的に構造化するか、図を分割する

    他のツールでの使い方

    Obsidian コードブロックを ```mermaid で囲むだけで自動的に図として表示されます。バックリンク機能と組み合わせることで、知識管理が強力になります。

    VSCode 「Markdown Preview Mermaid Support」などのプラグインをインストールすることで、マークダウンファイル内のMermaid図をプレビューできます。技術ドキュメントの作成に便利です。

    GitHub README.mdなどのマークダウンファイルに直接Mermaidコードを書けば、自動的にレンダリングされます。プロジェクトのドキュメントをリポジトリ内で完結できます。

    公式ドキュメントとコミュニティ より詳しい使い方は、Mermaid公式サイトで確認できます。多彩な図表タイプやカスタマイズ方法が紹介されています。また、公式のライブエディタ（https://mermaid.live/）で、コードを試しながら学ぶこともできます。

    note公式もあります。


    6. まとめ：図解思考で生産性アップ

    Mermaidを使えば、「図を描きたいけど面倒」という悩みから解放されます。
    Mermaidのメリットまとめ

    • テキストで図が描けるので、修正が簡単

    • note、Notion、Obsidian、GitHubなど様々なツールで使える

    • マウス操作による微調整が不要

    • コピー&ペーストで再利用しやすい

    • バージョン管理と相性が良い（差分が見やすい）

    • noteで記事を書きながら、そのまま図を埋め込める

    思考を視覚化することは、理解を深め、人に伝えやすくする強力な手段です。Mermaidという道具を手に入れることで、図解思考のハードルが大きく下がります。

    まずは簡単なフローチャートから始めて、徐々に他の図表にも挑戦してみてください。きっと、あなたの日常業務や学習が、より快適で生産的なものになるはずです。

    以上、Mermaid記法の紹介でした。

    ここまでお付き合いいただき、ありがとうございます！ たもち連続投稿企画第７回、「便利！快適！Mermaidで図を”書”こう！」でした。

    今回の内容が気になった方、役に立った方はスキやフォローを貰えると一層の励みになります！ぜひ、応援よろしくお願いします。

    それではまた次回、お会いしましょう。

     
     
     

    Tamochi

     
     
    人生に、希望と安心を。心理学とITの知見を踏まえつつ、様々な「心を動かすもの」と、その作用の過程を追っています。 📱アプリ開発 📦Amazonアソシエイト

    あなたへのおすすめ