見出し画像

mindmapを書いてnoteに投稿する方法（非エンジニア向け・Copilot対応）

て　し

これまでに、note.comではmermaidという記法を使って様々な図表を表現できることを説明してきました。今回はCopilotを使ったmindmapの書き方について細かくご説明します。


Copilotプロンプトの例とmindmapの表示方法

早速すぎるかもしれませんが、copilotへの入力例を例示いたします。入れ子の箇条書きをマインドマップに変換するプロンプトです。箇条書きはMarkdownにしたがって入力しています。インデント(先頭の空白)は４文字です。

以下の私の考えをマインドマップで可視化してください。mermaidで記述してください。

* コミュニティスペース
    * カフェ
    * コワーキングスペース
    * 立ち飲み
    * ゲストハウス
    * 資金
        * DIY
        * クラファン
        * 補助金
    * 集客
        * 地元客
            * 口コミ
        * 観光客
            * SNS
            * 村民/町民ガチャ

以下は出力の条件です。
* mermaidのmindmapのマニュアル https://mermaid.js.org/syntax/mindmap.html にしたがって記述してください。
* 資金、集客は強調にしてください。


以下は記述例です。
```
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
```

実行してみましょう。チャットでなく、プロンプト一発のときはノートブックを選択しましょう。改行がしやすく、長い文章を入力することができます。

ノートブックを選択

上記入力に対する回答出力が以下になります。

以下はあなたの考えをマインドマップで可視化したものです。mermaidで記述しました。

```mermaid
mindmap
  コミュニティスペース((コミュニティスペース))
    カフェ
    コワーキングスペース
    立ち飲み
    ゲストハウス
    資金((資金))
        DIY
        クラファン
        補助金
    集客((集客))
        地元客
            口コミ
        観光客
            SNS
            村民/町民ガチャ
```
このマインドマップは、コミュニティスペースの構成要素としてのカフェ、コワーキングスペース、立ち飲み、ゲストハウスを示しています。また、資金調達と集客についても強調しています。資金調達にはDIY、クラファン、補助金が含まれ、集客には地元客と観光客が含まれます。地元客は口コミによって、観光客はSNSと村民/町民ガチャによって集められます。資金と集客は強調表示されています。このマインドマップは、あなたの考えを視覚的に表現するのに役立つでしょう。

マインドマップが正しく構造化されているため、Copilotが説明文まで生成してくれました。インデント（先頭の空白）を間違えると正しく構造化されず、Copilotは説明文を出力してくれません。

出力されたmindmapは以下のように入力することで、note.comで表示できます。

  1. 引用入力に変更。ショートカットは ```

  2. 引用入力内に、```mermaid を記入

  3. copilotの回答出力に含まれるコードを貼りつける

  4. ``` で閉じる

  5. プレビュー

以下のマインドマップが、実際にコードを挿入して表示させたものになります。

```mermaid
mindmap
  コミュニティスペース((コミュニティスペース))
    カフェ
    コワーキングスペース
    立ち飲み
    ゲストハウス
    資金((資金))
        DIY
        クラファン
        補助金
    集客((集客))
        地元客
            口コミ
        観光客
            SNS
            村民/町民ガチャ
```

プロンプト入力の解説

以下の私の考えをマインドマップで可視化してください。mermaidのmindmapで記述してください。

実はこの一文だけでは変換してくれません。誤変換してきます。そこで、いくつかの「技」が必要なのです。これこそがプロンプトエンジニアリングと呼ばれるものになります。

Microsoft Learn で提供されている方法をもとに説明いたします。（プロンプト エンジニアリングの基礎とベスト プラクティス）

マニュアルの場所を明確に与える

以下は出力の条件です。
* mermaidのmindmapのマニュアル https://mermaid.js.org/syntax/mindmap.html にしたがって記述してください。

mermaid.orgからmindmapのページを見つけ、urlで教える必要があります。
「プロンプト エンジニアリングの基礎とベスト プラクティス」で説明されている「4つのS」のうち、「Surround (周囲環境)」にあたります。言語学でいうところの「コンテキスト」と言ったほうが理解しやすい人も多いのではないかと思います。
マニュアルページを指定しないと、mermaidの他の書式を使用してきます。もっとも定番化している書式をあててくる傾向があるようです。
最大限明確に伝えるために、完全なurlを与えてください。

ここでは、強調表示に関する依頼と同時に「以下の条件」として、箇条書きで伝えました。

記述例を与える

以下は記述例です。
``` mindmap
    ….

「4つのS」のうち、「Specific (具体的)」にあたります。
具体的なコードを与えることで、様々なmermaidの書式のうち、どれを選択するかを明確に伝えることができます。
これがないと、mindmapではなくgraph(フローチャート)で出力しようとします。graphがmermaidのもっとも古い機能でもっとも定番化しているものだからです。

「具体的なコード」はマニュアルページからコピーして貼り付けてください。markdownで使用する入力ブロック ``` で囲むことにより、どこからどこまでがコード例なのか、明確に伝えることができます。AIはmarkdownも解釈してくれます。

プロンプト出力をブラッシュアップ

マインドマップは自分の頭の中を整理するもので、最終的には自分の自由意志で可視化を進める必要があります。そもそも出力結果を出力した段階で、「やっぱ違った。」ということもあります。

  • 並べ替える

  • 囲み表示を変更する

  • アイコンを追加する

囲み表示やアイコンのやり方がわからない、もしくは忘れたという人がほとんどだと思います。チャットの場合、続けて質問すれば、出力結果を修正した形で出力しなおしてくれます。

カフェ、コワーキングスペース、立ち飲み、ゲストハウスにアイコンを付けてください

これまでのプロンプトが「Surround (周囲環境)」になっているため、今回は単文でも正確にこたえてくれます。

Copilot氏にありがとう

出力結果に満足したら、必ず👍を送ったり、「ありがとう」を入力しましょう。AIの性能向上につながり、ひいては自分に望ましい結果をもたらします。

おつかれさまでした。Copilotを活用して、みなさんのあたまの中、noteで晒しちゃってください。


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