#74 update README

Author: ienaga

template/electron/README.md

@@ -6,13 +6,11 @@ Directory for Electron configuration used to build desktop applications for Wind
 
 ## ディレクトリ構造 / Directory Structure
 
-```mermaid
-graph LR
-    subgraph electron["electron/"]
-        icons["icons/<br>アプリケーションアイコン"]
-        index["index.js<br>メインプロセス"]
-        package["package.json<br>依存関係"]
-    end
+```
+electron/
+├── icons/           # アプリケーションアイコン
+├── index.js         # メインプロセス
+└── package.json     # 依存関係
 ```
 
 ## ファイル説明 / File Description

template/src/model/application/README.md

@@ -19,16 +19,16 @@ The Application layer provides business logic corresponding to user actions. Thi
 
 ## ディレクトリ構造 / Directory Structure
 
-```mermaid
-graph LR
-    subgraph application["application/"]
-        subgraph home["home/"]
-            home_usecase["usecase/<br>StartDragUseCase.js<br>StopDragUseCase.js<br>CenterTextFieldUseCase.js"]
-        end
-        subgraph top["top/"]
-            top_usecase["usecase/<br>NavigateToViewUseCase.js"]
-        end
-    end
+```
+application/
+├── home/
+│   └── usecase/
+│       ├── StartDragUseCase.js
+│       ├── StopDragUseCase.js
+│       └── CenterTextFieldUseCase.js
+└── top/
+    └── usecase/
+        └── NavigateToViewUseCase.js
 ```
 
 各画面ごとにディレクトリを作成し、その中に `usecase` ディレクトリを配置します。

template/src/model/domain/README.md

@@ -20,42 +20,31 @@ The Domain layer holds the core business rules of the application. This layer ha
 
 ## ディレクトリ構造 / Directory Structure
 
-```mermaid
-graph LR
-    subgraph domain["domain/"]
-        subgraph callback["callback/"]
-            subgraph Background["Background/"]
-                bg["Background.js"]
-                subgraph service["service/"]
-                    draw["BackgroundDrawService.js"]
-                    scale["BackgroundChangeScaleService.js"]
-                end
-            end
-        end
-    end
+```
+domain/
+└── callback/
+    └── Background/
+        ├── Background.js
+        └── service/
+            ├── BackgroundDrawService.js
+            └── BackgroundChangeScaleService.js
 ```
 
 将来的に以下のような拡張も可能です:
 
 Future extensions are possible, such as:
 
-```mermaid
-graph LR
-    subgraph domain["domain/"]
-        subgraph callback["callback/<br>コールバック処理"]
-            bg["Background/"]
-        end
-        subgraph service["service/<br>ドメインサービス"]
-            validation["ValidationService.js"]
-            calculation["CalculationService.js"]
-        end
-        subgraph entity["entity/<br>エンティティ"]
-            user["User.js"]
-        end
-        subgraph value["value-object/<br>値オブジェクト"]
-            email["Email.js"]
-        end
-    end
+```
+domain/
+├── callback/                      # コールバック処理
+│   └── Background/
+├── service/                       # ドメインサービス
+│   ├── ValidationService.js
+│   └── CalculationService.js
+├── entity/                        # エンティティ
+│   └── User.js
+└── value-object/                  # 値オブジェクト
+    └── Email.js
 ```
 
 ## ドメインの概念 / Domain Concepts

template/src/model/infrastructure/README.md

@@ -19,31 +19,24 @@ The Infrastructure layer is responsible for interactions with the outside of the
 
 ## ディレクトリ構造 / Directory Structure
 
-```mermaid
-graph LR
-    subgraph infrastructure["infrastructure/"]
-        subgraph repository["repository/"]
-            home["HomeTextRepository.js"]
-        end
-    end
+```
+infrastructure/
+└── repository/
+    └── HomeTextRepository.js
 ```
 
 将来的に以下のような拡張も可能です:
 
 Future extensions are possible, such as:
 
-```mermaid
-graph LR
-    subgraph infrastructure["infrastructure/"]
-        subgraph repository["repository/<br>データアクセス層"]
-            home["HomeTextRepository.js"]
-            user["UserRepository.js"]
-            config["ConfigRepository.js"]
-        end
-        subgraph external["external/<br>外部サービス"]
-            analytics["AnalyticsService.js"]
-        end
-    end
+```
+infrastructure/
+├── repository/                    # データアクセス層
+│   ├── HomeTextRepository.js
+│   ├── UserRepository.js
+│   └── ConfigRepository.js
+└── external/                      # 外部サービス
+    └── AnalyticsService.js
 ```
 
 ## Repository Pattern

template/src/ui/README.md

@@ -6,16 +6,13 @@ Directory for storing UI components, structured based on Atomic Design principle
 
 ## ディレクトリ構造 / Directory Structure
 
-```mermaid
-graph LR
-    subgraph ui["ui/"]
-        animation["animation/<br>アニメーション定義"]
-        subgraph component["component/"]
-            atom["atom/<br>最小単位"]
-            molecule["molecule/<br>複合コンポーネント"]
-        end
-        content["content/<br>Animation Tool"]
-    end
+```
+ui/
+├── animation/                     # アニメーション定義
+├── component/
+│   ├── atom/                      # 最小単位
+│   └── molecule/                  # 複合コンポーネント
+└── content/                       # Animation Tool
 ```
 
 ## アトミックデザインの階層 / Atomic Design Hierarchy

template/src/ui/animation/README.md

@@ -12,13 +12,10 @@ Separating animation definitions from components improves code reusability and m
 
 ## ディレクトリ構造 / Directory Structure
 
-```mermaid
-graph LR
-    subgraph animation["animation/"]
-        subgraph top["top/"]
-            entrance["TopBtnEntranceAnimation.js"]
-        end
-    end
+```
+animation/
+└── top/
+    └── TopBtnEntranceAnimation.js
 ```
 
 画面ごとにサブディレクトリを作成し、その中にアニメーション定義ファイルを配置します。

template/src/ui/component/README.md

@@ -6,18 +6,14 @@ Directory for UI components based on Atomic Design principles.
 
 ## ディレクトリ構造 / Directory Structure
 
-```mermaid
-graph LR
-    subgraph component["component/"]
-        subgraph atom["atom/<br>最小単位"]
-            button["ButtonAtom.js"]
-            text["TextAtom.js"]
-        end
-        subgraph molecule["molecule/<br>複合コンポーネント"]
-            homeBtn["HomeBtnMolecule.js"]
-            topBtn["TopBtnMolecule.js"]
-        end
-    end
+```
+component/
+├── atom/                          # 最小単位
+│   ├── ButtonAtom.js
+│   └── TextAtom.js
+└── molecule/                      # 複合コンポーネント
+    ├── HomeBtnMolecule.js
+    └── TopBtnMolecule.js
 ```
 
 ## アトミックデザイン階層 / Atomic Design Hierarchy

template/src/ui/content/README.md

@@ -12,12 +12,10 @@ Wraps animations created with the Animation Tool as JavaScript classes for use i
 
 ## ディレクトリ構造 / Directory Structure
 
-```mermaid
-graph LR
-    subgraph content["content/"]
-        home["HomeContent.js<br>Home画面用"]
-        top["TopContent.js<br>Top画面用"]
-    end
+```
+content/
+├── HomeContent.js    # Home画面用
+└── TopContent.js     # Top画面用
 ```
 
 ## コンテンツの仕組み / How Content Works