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などのツールを使った編集も容易に行えます。
まだ試したことがない方も、ぜひ一度お試しください。