GPT×マーメイド記法で図やフローを出力

この動画で取り扱っている内容をまとめています。

https://youtu.be/Pg8mreXkN34

# 記事の概要

GPTとVSCodeを使って、図やフローを作成する方法をまとめます。

# 環境構築

■VSCodeインストール

https://www602.math.ryukoku.ac.jp/Prog1/vscode-win.html

■VSCode拡張機能インストール
VSCodeを起動し、以下のキャプチャの一番下のアイコンを押下する。
![拡張機能.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/9d2e02b1-8a94-e6fa-42cc-7a480e455268.png)

検索窓で「Markdown Preview Mermaid Support」を検索し、インストールする。
![markdown_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/6658319d-5aed-eb2d-2879-3de89a2f4d15.png)

検索窓で「Mermaid Markdown Syntax Highlighting」を検索し、インストールする。
![mermaid_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/bfc5a494-2c38-fa20-9890-0131b6132bf0.png)

# ChatGPTへのプロンプト
調べたいことや出力したいことの後に「マーメイド記法とマークダウン形式で説明してください。」を付けて、プロンプトを投げる。

## ■プロンプト例

### 入力：
```
attention is all you needについて、マーメイド記法とマークダウン形式で説明してください。
```
### 出力：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/8049a93f-7c02-1c18-8d4b-7c503e7b2b52.png)

# VSCodeで図を可視化
ChatGPTで出力されたこのマーメイド記法のテキストを、VSCode上で開いた「.md」拡張子のファイルにコピー&ペイストする。
```
graph LR
    A[入力文] --> B[自己注意機構]
    B --> C[エンコーダ]
    C --> D[デコーダ]
    D --> E[出力文]
    style B fill:#f9f,stroke:#333,stroke-width:4px
    style C fill:#ccf,stroke:#333,stroke-width:2px
    style D fill:#fcf,stroke:#333,stroke-width:2px
```
VSCode上だと、このように表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/f931f600-c84a-37ac-29c4-898f10ed94d6.png)

図として可視化するために、「バッククォート」×3 ＋「mermaid」と「バッククォート」×3でテキストを加工する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/9f8e66e9-8a2b-4b7f-3aaa-baace9edf6c7.png)

この状態で、プレビューボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/9bd00fd0-4de5-6227-ad58-4395cbf9feaa.png)

※プレビューボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/0d1e1c9f-0fee-dbc4-cbe5-79ed997fc80a.png)

プレビューボタンを押すと、プレビュー画面が表示され、フロー図が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/4c6b3bdc-6f6e-1636-1d34-10f8e59e174f.png)

# その他の図やフロー

## ■シーケンス図
### プロンプト：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/57a7f535-aac7-7525-5ef0-028505923489.png)

### プレビュー：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/bc3c8486-6e66-2d66-5ee3-b1cffac01840.png)

## ■ERD
### プロンプト：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/90940ab4-e91d-ee43-5d4f-d8f20adef006.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/b57f4de3-e2a1-9a3c-6fd4-00923b51f3b6.png)

プレビュー：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/2aeee288-6cca-a4f4-2f3a-a35ec994a76e.png)

## ■フローチャート
### プロンプト：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/6a530748-0b0b-0f00-0356-5894c9b047f7.png)

### プレビュー：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/e9b741f4-bb86-97a8-e783-13a05e450dee.png)

## ■スケジュール
### プロンプト：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/9722ae5f-f74a-644a-72aa-cbfd7d0d9607.png)

### プレビュー：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/19f01231-bc53-0b8d-f43c-7b7d12e414c9.png)

# 追記
一部の図やフローについて、プレビュー画面のGUI操作で編集が可能になる拡張機能が公開されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619695/4e1f43fd-5b29-b990-7103-2b276f76951b.png)