処理フロー等の日本語を含む図の文字化け

👉 日本語の含む図の文字化けの対応方法について

・ChatGPTで、システムにて利用するシーケンス図等をjpgなどの画像にて提供は、図変換に日本語の文字化けが発生します。文字化けは Graphviz（dot形式）で日本語フォントが正しく指定されていない ことが原因とのことですが、回避方法は以下の通りです。私の場合は、方法②にてVisual Studio Code経由にて、PlantUMLから図を描画しました。お試しあれ。

💻 方法①：Excel内でテキストベースのシーケンス図を描画

ユーザー → ログイン画面 入力（ID/PW）
← 結果表示
→ 認証サービス 認証要求
→ DB ユーザ情報照会
← 情報返却

• 長所：完全な日本語対応、Excel形式として編集可能。
• 短所：図ではなく「表形式」なのでビジュアル性が限定的。

---

💻 方法②：PlantUMLテキスト構文を提供、VS Codeにて図描画

@startuml シーケンス図

actor ユーザー
participant "Web画面" as UI
participant "サーバ" as Server
participant "DB" as DB

ユーザー -> UI : 顧客情報を入力
UI -> Server : 登録リクエスト送信
Server -> DB : 顧客情報を登録
DB --> Server : 結果（成功/失敗）
Server --> UI : 登録結果表示
UI --> ユーザー : 結果を表示

@enduml

長所：後で画像生成が容易、日本語もPlantUMLで対応。
短所：図ではなく「テキスト定義」となる「テキスト定義」となる。

💻 VS Code で PlantUML を使う方法（図付き生成対応）

🔧 前提条件

• Visual Studio Code（インストール済であること）。
• Java ランタイム（JDK または JRE）が必要。
• Graphviz のインストールが必要。
• VS Code 拡張機能「PlantUML」のインストールが必要。

---

▸ 手順

① Java ランタイムのインストール（未インストールの場合）

【Windowsの場合】

1. AdoptOpenJDK にアクセス
2. Java 17 もしくは 11（LTS版）を選んでインストール
3. インストール後、java -version がコマンドプロンプトで動作することを確認

---

② Graphviz のインストール（UML描画に必要）

1. Graphviz ダウンロードページ にアクセス
2. Windowsの場合：Windows installer (.exe) を選んでインストール

---

③ VS Code 拡張機能「PlantUML」のインストール

1. Visual Studio Code を開く
2. 左側の拡張機能アイコン（四角形のアイコン）をクリック
3. PlantUML と検索
4. 「PlantUML」を選び「インストール」

④UML ファイルを作成して描画

1. .puml という拡張子のファイルを作成（例：シーケンス図.puml）
2. 以下のように記述：

@startuml シーケンス図

actor ユーザー
participant "Web画面" as UI
participant "サーバ" as Server
participant "DB" as DB

ユーザー -> UI : 顧客情報を入力
UI -> Server : 登録リクエスト送信
Server -> DB : 顧客情報を登録
DB --> Server : 結果（成功/失敗）
Server --> UI : 登録結果表示
UI --> ユーザー : 結果を表示

@enduml