手書きの図（フローチャート）をChatGPTでデジタル化する方法

## 1. はじめに

### 手書き図のデジタル化が抱える課題
手書きのフローチャートや図をデジタル化する作業は、時間と手間がかかるため、多くのシステム開発者にとって負担となっています。特に図を一から作り直す場合、細かい配置やデザインを調整するのに多くの時間が必要です。

<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935052/9800cef4-78b9-9a76-873c-a8fdafec34bf.png" width=50%>
</div>


### ChatGPTを活用するメリット
ChatGPTを使うことで、手書き図を迅速かつ簡単にデジタル化できます。指定された指示に基づき、図を再現するためのコードやデザイン案を生成できるため、作業効率が大幅に向上します。

---

## 2. 必要な準備

### 必要なツールと環境
以下のツールや環境を用意してください：
- ChatGPTアクセス環境
- 手書き図を撮影するためのスマートフォン
- 図の確認・編集用ツール（例: [Mermaid Live Editor](https://mermaid.live/)）

### ChatGPTの活用シナリオ
手書き図の内容を文字情報としてChatGPTに入力することで、以下のような形式に変換できます：
- Markdown形式のフローチャートコード
- SVGでの図の再現

---

## 3. 手書き図をデジタル化する手順

#### 1. スマホで高画質撮影
* **手書き図を明るい場所で、まっすぐになるように撮影**します。
* **影**が入らないように注意しましょう。
* **カメラのピント**をしっかりと合わせます。

### 2. ChatGPTにアップロード
* 撮影した画像を**ChatGPTのチャット画面にドラッグ＆ドロップ**するか、**ファイルを選択**してアップロードします。

### 3. プロンプト作成
* 次のような**プロンプト**を入力します。
```
これは手書きのフローチャートです。Mermaid書式でフローチャートにしてください。
```
* 「Mermaid書式」の部分は、他の図式化ツール（例えば、PlantUMLなど）に変更することも可能です。

### 4. ChatGPTによる処理
* ChatGPTが画像を解析し、Mermaid書式などのコードに変換します。

### 5. Mermaid Live Editorへの貼り付け
* ChatGPTが出力したコードを[Mermaid Live Editor](https://mermaid.live/)というオンラインツールに**コピー＆ペースト**します。
* Mermaid Live Editorがコードを解析し、**インタラクティブな図**として表示します。

### 6. 図の調整・保存
* 必要に応じて、Mermaid Live Editor上で図の**レイアウト**や**色**などを調整します。
* 完成した図を**画像**や**SVG**などの形式で**保存**します。

## 4. 実例: フローチャートをデジタル化
### サンプル図を使った具体例
#### 手書き図の例①（単純な分岐）：
下記の通り正しく認識し、フローチャートが作成されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935052/3b770d0e-7bd6-61b5-9ae3-a03bb63dfede.png)

Mermaid Live Editorでの作図結果：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935052/510f0c7a-0829-3167-bd34-8b6d316dd59e.png)

Mermaid Live EditorからMermaid形式でフローチャートを出力した結果：

[![](https://mermaid.ink/img/pako:eNpdkE8LgzAMxb9KydmBXoXttB13cuww6yHY-Ae0lZoyhvjdF3WTsUKTvvd-gZIJSmcIUqg69ywb9KxuZ22VnIxF5Wst1OFwWgwO47S1eYdESKzijSG-x7lUdT_GxT-T7EzyYZIvs8yt6cWaXO6Pn_z5EEFPvsfWyL-nhdPADfWkIZWnoQpDxxq0nQXFwC572RJS9oEi8C7UDaQVdqOoMBhkOrdYe-x3l0zLzl-3zawLimBA-3Duy8xvn9ljeg?type=png)](https://mermaid.live/edit#pako:eNpdkE8LgzAMxb9KydmBXoXttB13cuww6yHY-Ae0lZoyhvjdF3WTsUKTvvd-gZIJSmcIUqg69ywb9KxuZ22VnIxF5Wst1OFwWgwO47S1eYdESKzijSG-x7lUdT_GxT-T7EzyYZIvs8yt6cWaXO6Pn_z5EEFPvsfWyL-nhdPADfWkIZWnoQpDxxq0nQXFwC572RJS9oEi8C7UDaQVdqOoMBhkOrdYe-x3l0zLzl-3zawLimBA-3Duy8xvn9ljeg)

---

#### 手書き図の例②（ループあり）：
下記の通り正しく認識し、フローチャートが作成されました。
条件分岐のところをみてみると、
　手書き：Check（ラベルで式を記載）
　ChatGPT：式（ラベルでYes,No）
と分かりやすい書式に修正してくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935052/a42c6b3c-373f-ac36-4f0d-376d47af2f57.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935052/f332d19a-9084-36fa-5f2d-1f0cb6fed7e1.png)


## 5. プロンプトの改善
今回は
```
これは手書きのフローチャートです。Mermaid書式でフローチャートにしてください。
```
という簡単なプロンプトを使用して、十分な結果を得ることが出来ました。
もう少し詳しいプロンプトが書けないかと思い、これもChatGPTに聞いてみたところ下記の提案をされました。
これをたたき台に色々アレンジができそうです。

```
### フローチャート変換スクリプト

1. **入力データ**: 手書きのフローチャートの画像を用意し、アップロードします。
2. **タスク**: アップロードした画像を元に、フローチャートの構造をMermaid記法で再現してください。
3. **期待する形式**:
   - Mermaid記法での正確なフローチャート構築。
   - ノード間の関係を正確に反映。
   - フローチャートの条件分岐（Yes/No）のラベルも追加。
   - 開始ノード、終了ノードを明確に記述。
4. **例**:
   - 手書きのフローチャート:
     
Start --> EnterNum
     EnterNum --> RandomNum
     RandomNum --> Check
     Check -- Yes --> End
     Check -- No --> EnterNum

   - 変換後のMermaid記法:
     
mermaid
     flowchart TD
         Start(["Start"]) --> EnterNum["Enter a number"]
         EnterNum --> RandomNum["Random 1-3"]
         RandomNum --> Check{"Condition: Match?"}
         Check -- "Yes" --> End(["End"])
         Check -- "No" --> EnterNum


5. **注意点**:
   - 各ノードにはラベル（例: "Enter 1～3" や "Random 1～3"）を付ける。
   - 条件分岐にはYes/Noまたは適切な説明を追加する。

**目的**: フローチャートのデジタル化と再利用性向上。
```

## 6. 他の書式での実験
Mermaid以外の書式も試してみました。

#### PlantUML
PlantUMLでフローチャートを試してみました。
PlantUMLの方が見やすいフローチャートでした。

```
上記をPlantUML形式のフローチャートに変換して
```
使用したツール： [PlantUML Web Editor](https://plantuml.com/ja/)
　画面左の「Online　Server」から実行可能です。
 
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935052/3e7fce95-7289-04cd-ef3b-c6018ba2fd5a.png)

## 7. まとめ
手書きのフローチャートや図をデジタル化する作業は、従来多くの手間と時間を要するものでした。しかし、ChatGPTを活用することで、このプロセスが驚くほど効率化されます。本記事で紹介した手順を活用すれば、手書き図を簡単にデジタル化でき、Mermaidなどのツールを使った編集も容易に行えます。

まだ試したことがない方も、ぜひ一度お試しください。