見出し画像

noteでフローチャートを表示できるって本当⁈【AIで誰でも簡単】

遊花：遊びながら学ぶ生成AI【フォロバ100】

はじめに

みなさん、こんにちは！今日は、noteノートの素晴らしい機能についてお話しします。なんと、noteでフローチャートが表示できるって知っていましたか？

フローチャートが表示できると、あなたのブログがより視覚的に説明が分かりやすくなるので、さらに魅力的になります。

うーん。便利そうだけど…やり方がよく分からないし…

そんなときは今話題のChatGPTなどの生成AIに作ってもらえばいいんです。
あなたは、作りたいフローチャートのイメージをAIに伝えるだけ。

すると、AIがあなたのイメージを形にするコードを生成してくれます。あとは、それをあなたのnoteに貼り付けるだけ。
今回は、そんなAIの便利な使い方をご紹介します。


フローチャートってなに？

フローチャートは、プロセスや意思決定の流れを視覚的に表現する図表です。複雑な情報を簡単に理解できるようにするのに最適です。例えば、料理のレシピ、ビジネスの意思決定プロセス、マニュアルの手順書、あるいはソフトウェアのロジックフローなどを表現するのに使われます。
noteでは、文章のみの記事が多いため、他の人より目立ち分かりやすいブログになりますし、あなたのノウハウや伝えたいことをぐっと伝わりやすくなる便利な方法です。

例えばこの図のようなものです。

```mermaid
graph TD;
    A[スタート] -->|はい| B[次のステップ];
    B -->|完了| C[終了];
```

仕事にも役立つフローチャート

フローチャートの作り方は、今回ご紹介するやり方で実はnoteだけでなく他のところにも応用が利きます。特に、仕事や学生の方は使いこなすとPowerPointやExcelで作るより簡単に早く作れるようになるため、仕事の効率があがります。

noteでフローチャートを表示する方法

noteでフローチャートを表示するには、Mermaidマーメイドという記法を使用します。Mermaidは、テキストでダイアグラムを描くためのツールで、コードを書くような感覚でフローチャートを作成できます。

Mermaidの基本構文

Mermaidでフローチャートを作成するときは、最初に「<>コード」というのを追加して、黒い四角（コードブロックといいます）を表示させます。
次に、コードブロックの中が次の例のように「```mermaid」で始まり「```」で終了している場合、Mermaid記法と解釈してグラフやチャートが描画されるようになります。

```mermaid
graph TD;
A[開始] --> B{条件};
B -->|はい| C[処理1];
B -->|いいえ| D[処理2];
C --> E[終了]; D --> E;
```

noteでのmermaid記法の書き方の例

この構文で作成されるフローチャートは以下のようになります：

```mermaid
graph TD;
    A[開始] --> B{条件};
    B -->|はい| C[処理1];
    B -->|いいえ| D[処理2];
    C --> E[終了];
    D --> E;
```

AIを使ってフローチャートを作成する

ちょっと、記号が増えて難しいと思いましたか？
実は覚える必要はありません。AIに依頼さえすれば簡単にコード生成してくれます。あなたは、コードブロックの中に「```mermaidで始まり```で終わればいいんだな」ぐらいさえ覚えておけば大丈夫です。詳しいプロンプトは最後にご紹介します。

これによりフローチャートの作成に慣れていない方でも、AIを使えば簡単にMermaidコードを生成できます。例えば、「正しい朝の準備」というフローチャートを作りたい場合、AIに以下のようなプロンプトを与えることができます：

Mermaidを使って、「正しい朝の準備」というフローチャートを作成してください。
以下の要素を含めてください：
1. 起床
2. 顔を洗う
3. 朝食を食べるか決める
4. 朝食を食べる（はい）または飲み物を飲む（いいえ）
5. 歯を磨く
6. 服を着る
7. 家を出る

このプロンプトに基づいて、AIは以下のようなMermaidコードを生成してくれました。

```mermaid
graph TD;
A[起床] --> B[顔を洗う];
B --> C[朝食を食べるか決める];
C -->|はい| D[朝食を食べる];
C -->|いいえ| E[飲み物を飲む];
D --> F[歯を磨く];
E --> F[歯を磨く];
F --> G[服を着る];
G --> H[家を出る];
```

AIの回答例

このコードをnoteにコピペして表示させると、あなたのイメージがしっかりフローチャートになっていることがわかりますね。

```mermaid
graph TD
    A[起床] --> B[顔を洗う]
    B --> C[朝食を食べるか決める]
    C -->|はい| D[朝食を食べる]
    C -->|いいえ| E[飲み物を飲む]
    D --> F[歯を磨く]
    E --> F[歯を磨く]
    F --> G[服を着る]
    G --> H[家を出る]
```

フローチャート作成のコツ

  1. シンプルに保つ：複雑すぎるフローチャートは理解しづらくなります。必要な情報だけを含めるようにしましょう。

  2. 適切な形状を使う：

    • 四角形（[]）：プロセスや行動

    • ダイヤモンド形（{}）：決定や条件分岐

    • 丸形（()）：開始や終了

  3. 矢印の方向：フローの方向を明確にするため、矢印の向きに注意しましょう。

  4. ラベルを簡潔に：各ステップのラベルは短く、分かりやすくしましょう。

  5. 色やスタイルを活用：Mermaidでは色やスタイルも設定できます。視覚的な魅力を高めるために活用しましょう。

note専用フローチャートプロンプト

AIプロンプトの罠

一点だけ注意点があります。実はAIの生成したmermaidコードというのは、noteにそのまま貼り付けてもうまくいかないんです。
それは、始まりの「```mermaid」と終わりの「```」を書くとAIチャット側の表示でコードブロックが表示されてしまうため、コードブロックの中に、本来書かれるはずの文字である「```mermaid」と「```」が消えてしまうからなんです。

AIに書かせるときは、書かせたコードに自分で追記するか、または下記のプロンプトを使ってください。

AIがmermaid記法を出力するときは、ユーザーはnoteにコードを貼り付けることを前提としていることを理解し、コピペで完結する状態を生成すること。
noteでMermaidを表示させるルールは、「```mermaid」を頭に追記し、コードの語尾に「```」を追加する必要がある。そのため、AIの出力ではコードブロックの中にコードブロックを作る必要があることを理解し生成すること。

ChatGPTs派の人には便利なGPTsをご紹介

ちなみに、ChatGPTのGPTsを使うとフローチャートの作成や編集は、ChatGPTのチャット画面上ですぐに結果が表示されるから大変便利です。
これがないとnoteに貼り付けて保存して閉じないと表示されないので、複雑なフローチャートを作るときほどこのGPTsを使った方が便利になります。
GPTsを使う場合も注意点は同じです。

Claudeや他のAIを使うなら

Claude派の人なら、アーティファクトを使えば同じように結果が見えますし、version管理されるので、図形の編集はさらに便利になります。

Geminiや他のAIなどを使う人は、mermaidの表示ができないものや、そもそもmermaid記法を習得していないAIもありますので注意してくださいね。

まとめ

noteでフローチャートが表示できるようになると、私たちの記事はより分かりやすく、魅力的になります。AIの助けを借りれば、プログラミングの知識がなくても誰でも簡単にフローチャートを作成できます。ぜひ、あなたの次の記事でフローチャートを使ってみてください。読者の理解度と満足度がグッと上がること間違いなしです！

この記事が役立ったら、ぜひ「いいね」やフォローをお願いします。現在、毎日AIの便利な使い方や、誰も知らないマル秘テクニック、ムフフな技までご提供しています。ぜひ他の記事もご覧になってお待ちください。


この記事が気に入ったらサポートをしてみませんか？