見出し画像

【時短】Microsoft Loopでかんたんフローチャート図作成！

パーソルビジネスプロセスデザイン BX事業本部（旧パーソルプロセス＆テクノロジー SMKT事業部）

noteをお読みの皆さん、こんにちは！BX(ビジネストランスフォーメーション)事業本部の沢田です。

皆さんは、Microsoft Loopを使っていますか？
円滑なプロジェクト運営が実現可能になる、とっても便利なアプリです。

本日は、Loopについてのご紹介と、Loopで新たに導入されたMermaid記法によるフローチャート図作成機能についてご紹介します！


Loopとは？

Microsoft Loopは、チームでの共同作業を効率化するためのアプリです。
Loopを使うと、プロジェクトの情報やタスクを一つの場所にまとめて管理できます。

Microsoft Loopのホーム画面

主な機能には、ワークスペース、ページ、コンポーネントがあります。
ワークスペースはプロジェクト全体を管理する場所で、ページは具体的なタスクや情報を記録するためのものです。
コンポーネントは、他のアプリと連携して情報を共有するためのツールです。

Microsoft Loopのページ編集画面

Loopを使えば、チーム全員がリアルタイムで情報を更新し、共有することができます！

Mermaid記法とは？

Mermaid記法は、シンプルなテキスト形式でダイアグラムを描くための記法です。特に、フローチャートやシーケンス図、クラス図など、さまざまな種類の図を作成することができます。
以下に、基本的なMermaid記法の例を示します。

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

このコードを使用すると、以下のようなシンプルなフローチャートが生成されます。

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

LoopでのMermaid記法の使い方

Loopでは、メモやドキュメント内にMermaid記法を直接埋め込むことで、自動的にフローチャート図を生成することができます。以下に手順を説明します。

  1. 新しいページを作成
    Loop内で新しいメモを作成します。

  2. 「/」を入力、または「＋」ボタンをクリックして「Mermaid」を選択
    ページ内の任意の箇所に「/」を入力するか、「＋」ボタンが表示されている場合はボタンをクリックするとメニューが表示されます。
    表示されたメニューから「Mermaid」を選択します。

  3. Mermaid記法を記述
    エディタにMermaid記法を記述します。

  4. 図の生成
    Mermaid記法に基づいたフローチャート図が自動的に生成されます。
    たったこれだけです！

2の手順でMermaidコードエディタを挿入すると、デフォルトで以下のようなMermaid記法が記述されています。

flowchart TD 
A[Need Diagrams?] -->|use| B[Mermaid]

この場合、以下のようなフローチャート図が生成されます。

```mermaid
flowchart TD 
A[Need Diagrams?] -->|use| B[Mermaid]
```

このように、オブジェクトの間にパイプ(|)で文字を記述することで、チャートの矢印の間に文字を表示することができます。
これを用いると、たとえばこんなチャート図も作れます。

graph TD;
    A[冷蔵庫の中身を確認] -->B(じゃがいもはありますか?);
    B -->|はい| C(ニンジンはありますか?);
    B -->|いいえ| Z[料理不可];
    C -->|はい| D(玉ねぎはありますか?);
    C -->|いいえ| Z[料理不可];
    D -->|はい| E(豚肉はありますか?);
    D -->|いいえ| Z[料理不可];
    E -->|はい| F(いんげん豆はありますか?);
    E -->|いいえ| M(牛乳はありますか?);

    F -->|はい| G[肉じゃがを作る];
    F -->|いいえ| H(白滝はありますか?);

    H -->|はい| G[肉じゃがを作る];
    H -->|いいえ| I(ブロッコリーはありますか?);
    I -->|はい| N[シチューを作る];
    I -->|いいえ| J[カレーを作る];

    M -->|はい| N[シチューを作る];
    M -->|いいえ| J[カレーを作る];
```mermaid
graph TD;
    A[冷蔵庫の中身を確認] -->B(じゃがいもはありますか?);
    B -->|はい| C(ニンジンはありますか?);
    B -->|いいえ| Z[料理不可];
    C -->|はい| D(玉ねぎはありますか?);
    C -->|いいえ| Z[料理不可];
    D -->|はい| E(豚肉はありますか?);
    D -->|いいえ| Z[料理不可];
    E -->|はい| F(いんげん豆はありますか?);
    E -->|いいえ| M(牛乳はありますか?);

    F -->|はい| G[肉じゃがを作る];
    F -->|いいえ| H(白滝はありますか?);

    H -->|はい| G[肉じゃがを作る];
    H -->|いいえ| I(ブロッコリーはありますか?);
    I -->|はい| N[シチューを作る];
    I -->|いいえ| J[カレーを作る];

    M -->|はい| N[シチューを作る];
    M -->|いいえ| J[カレーを作る];
```

Mermaid記法はこのようなフローチャート図以外にも、ガントチャートやシーケンス図など様々な視覚化が可能です。
プロジェクト管理やアプリ開発などに役立つ機能なので、ぜひ使ってみてください。

まとめ

Mermaid記法を使ったフローチャート図作成機能は、Loopでの情報整理や視覚化を大いに助けてくれます。
ぜひこの機能を活用して、より効率的に情報を整理してみてください！

以上、Microsoft Loopでのフローチャート図作成機能のご紹介でした。

Tableau, Power BI, Looker Studioの無料テンプレート配布中

弊社公式サイトでは、各種BIツールの無料テンプレートを配布中です！
GA4レポート、ガントチャート、インサイドセールスの活動管理ダッシュボードなど、すぐに活用可能なサンプルを各種そろえております。
ダウンロードは下記URLよりお申し込みください。

●●●

パーソルビジネスプロセスデザイン BX事業本部では、幅広いポジションで一緒に働く仲間を募集しています！

✉ サービスに関するお問い合わせ ✉
パーソルビジネスプロセスデザイン BX事業本部smkt_markegr_note@persol.co.jp