1. はじめに

手書き図のデジタル化が抱える課題

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

ChatGPTを活用するメリット

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

2. 必要な準備

必要なツールと環境

以下のツールや環境を用意してください：

ChatGPTアクセス環境
手書き図を撮影するためのスマートフォン
図の確認・編集用ツール（例: Mermaid Live Editor）

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というオンラインツールにコピー＆ペーストします。
Mermaid Live Editorがコードを解析し、インタラクティブな図として表示します。

6. 図の調整・保存

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

4. 実例: フローチャートをデジタル化

サンプル図を使った具体例

手書き図の例①（単純な分岐）：

下記の通り正しく認識し、フローチャートが作成されました。

Mermaid Live Editorでの作図結果：

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

手書き図の例②（ループあり）：

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

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
　画面左の「Online　Server」から実行可能です。

7. まとめ

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

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