flowbook 0.1.0

package/README.de.md

@@ -0,0 +1,170 @@
+# Flowbook
+
+> [English](./README.md) | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Español](./README.es.md) | [Português (BR)](./README.pt-BR.md) | [Français](./README.fr.md) | [Русский](./README.ru.md) | **Deutsch**
+
+Storybook für Flussdiagramme. Erkennt automatisch Mermaid-Diagrammdateien in Ihrer Codebasis, organisiert sie nach Kategorien und rendert sie in einem browserbaren Viewer.
+
+![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
+![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
+![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
+![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
+
+## Schnellstart
+
+```bash
+# Installieren
+npm install -D flowbook
+
+# Initialisieren — fügt Skripte + Beispieldatei hinzu
+npx flowbook init
+
+# Entwicklungsserver starten
+npm run flowbook
+# → http://localhost:6200
+
+# Statische Seite erstellen
+npm run build-flowbook
+# → flowbook-static/
+```
+
+## CLI
+
+```
+flowbook init                Flowbook im Projekt einrichten
+flowbook dev  [--port 6200]  Entwicklungsserver starten
+flowbook build [--out-dir d] Statische Seite erstellen
+```
+
+### `flowbook init`
+
+- Fügt die Skripte `"flowbook"` und `"build-flowbook"` zu Ihrer `package.json` hinzu
+- Erstellt `flows/example.flow.md` als Startvorlage
+
+### `flowbook dev`
+
+Startet einen Vite-Entwicklungsserver unter `http://localhost:6200` mit HMR. Änderungen an `.flow.md`- oder `.flowchart.md`-Dateien werden sofort übernommen.
+
+### `flowbook build`
+
+Erstellt eine statische Seite in `flowbook-static/` (konfigurierbar über `--out-dir`). Überall deploybar.
+
+## Flow-Dateien Erstellen
+
+Erstellen Sie eine `.flow.md`- (oder `.flowchart.md`-) Datei an beliebiger Stelle in Ihrem Projekt:
+
+````markdown
+---
+title: Login-Ablauf
+category: Authentifizierung
+tags: [auth, login, oauth]
+order: 1
+description: Benutzer-Authentifizierungsablauf mit OAuth2
+---
+
+```mermaid
+flowchart TD
+    A[Benutzer] --> B{Authentifiziert?}
+    B -->|Ja| C[Dashboard]
+    B -->|Nein| D[Login-Seite]
+```
+````
+
+Flowbook erkennt die Datei automatisch und fügt sie dem Viewer hinzu.
+
+## Frontmatter-Schema
+
+| Feld          | Typ        | Erforderlich | Beschreibung                          |
+|---------------|------------|--------------|---------------------------------------|
+| `title`       | `string`   | Nein         | Angezeigter Titel (Standard: Dateiname) |
+| `category`    | `string`   | Nein         | Kategorie in der Seitenleiste (Standard: "Uncategorized") |
+| `tags`        | `string[]` | Nein         | Filterbare Tags                       |
+| `order`       | `number`   | Nein         | Sortierreihenfolge innerhalb der Kategorie (Standard: 999) |
+| `description` | `string`   | Nein         | Beschreibung in der Detailansicht     |
+
+## Datei-Erkennung
+
+Flowbook durchsucht standardmäßig folgende Muster:
+
+```
+**/*.flow.md
+**/*.flowchart.md
+```
+
+Ignoriert `node_modules/`, `.git/` und `dist/`.
+
+## Funktionsweise
+
+```
+.flow.md-Dateien ──→ Vite-Plugin ──→ Virtuelles Modul ──→ React-Viewer
+                       │                    │
+                       ├─ fast-glob-Scan    ├─ export default { flows: [...] }
+                       ├─ gray-matter       │
+                       │  Parsing           └─ HMR bei Dateiänderung
+                       └─ Mermaid-Block
+                          Extraktion
+```
+
+1. **Erkennung** — `fast-glob` durchsucht das Projekt nach `*.flow.md` / `*.flowchart.md`
+2. **Parsing** — `gray-matter` extrahiert YAML-Frontmatter; Regex extrahiert `` ```mermaid ``-Blöcke
+3. **Virtuelles Modul** — Vite-Plugin stellt geparste Daten als `virtual:flowbook-data` bereit
+4. **Rendering** — React-App rendert Mermaid-Diagramme über `mermaid.render()`
+5. **HMR** — Dateiänderungen invalidieren das virtuelle Modul und lösen ein Neuladen aus
+
+## Projektstruktur
+
+```
+src/
+├── types.ts                    # Gemeinsame Typen (FlowEntry, FlowbookData)
+├── node/
+│   ├── cli.ts                  # CLI-Einstiegspunkt (init, dev, build)
+│   ├── server.ts               # Programmatischer Vite-Server & Build
+│   ├── init.ts                 # Projekt-Initialisierungslogik
+│   ├── discovery.ts            # Datei-Scanner (fast-glob)
+│   ├── parser.ts               # Frontmatter + Mermaid-Extraktion
+│   └── plugin.ts               # Vite-Plugin für virtuelles Modul
+└── client/
+    ├── index.html              # Einstiegs-HTML
+    ├── main.tsx                # React-Einstiegspunkt
+    ├── App.tsx                 # Layout mit Suche + Seitenleiste + Viewer
+    ├── vite-env.d.ts           # Typdeklarationen für virtuelles Modul
+    ├── styles/globals.css      # Tailwind v4 + benutzerdefinierte Stile
+    └── components/
+        ├── Header.tsx          # Logo, Suchleiste, Flow-Anzahl
+        ├── Sidebar.tsx         # Einklappbarer Kategoriebaum
+        ├── MermaidRenderer.tsx # Mermaid-Diagramm-Rendering
+        ├── FlowView.tsx        # Einzelne Flow-Detailansicht
+        └── EmptyState.tsx      # Leerzustand mit Anleitung
+```
+
+## Entwicklung (Beitragen)
+
+```bash
+git clone https://github.com/Epsilondelta-ai/flowbook.git
+cd flowbook
+npm install
+
+# Lokale Entwicklung (verwendet die Root-vite.config.ts)
+npm run dev
+
+# CLI erstellen
+npm run build
+
+# CLI lokal testen
+node dist/cli.js dev
+node dist/cli.js build
+```
+
+## Technologie-Stack
+
+- **Vite** — Entwicklungsserver mit HMR
+- **React 19** — Benutzeroberfläche
+- **Mermaid 11** — Diagramm-Rendering
+- **Tailwind CSS v4** — Styling
+- **gray-matter** — YAML-Frontmatter-Parsing
+- **fast-glob** — Datei-Erkennung
+- **tsup** — CLI-Bundler
+- **TypeScript** — Typsicherheit
+
+## Lizenz
+
+MIT

package/README.es.md

@@ -0,0 +1,170 @@
+# Flowbook
+
+> [English](./README.md) | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | **Español** | [Português (BR)](./README.pt-BR.md) | [Français](./README.fr.md) | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
+
+Storybook para diagramas de flujo. Descubre automáticamente archivos de diagramas Mermaid en tu código, los organiza por categoría y los renderiza en un visor navegable.
+
+![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
+![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
+![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
+![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
+
+## Inicio Rápido
+
+```bash
+# Instalar
+npm install -D flowbook
+
+# Inicializar — agrega scripts + archivo de ejemplo
+npx flowbook init
+
+# Iniciar servidor de desarrollo
+npm run flowbook
+# → http://localhost:6200
+
+# Construir sitio estático
+npm run build-flowbook
+# → flowbook-static/
+```
+
+## CLI
+
+```
+flowbook init                Configurar Flowbook en tu proyecto
+flowbook dev  [--port 6200]  Iniciar el servidor de desarrollo
+flowbook build [--out-dir d] Construir un sitio estático
+```
+
+### `flowbook init`
+
+- Agrega los scripts `"flowbook"` y `"build-flowbook"` a tu `package.json`
+- Crea `flows/example.flow.md` como plantilla inicial
+
+### `flowbook dev`
+
+Inicia un servidor de desarrollo Vite en `http://localhost:6200` con HMR. Cualquier cambio en archivos `.flow.md` o `.flowchart.md` se refleja instantáneamente.
+
+### `flowbook build`
+
+Construye un sitio estático en `flowbook-static/` (configurable con `--out-dir`). Despliégalo en cualquier lugar.
+
+## Escribir Archivos de Flujo
+
+Crea un archivo `.flow.md` (o `.flowchart.md`) en cualquier lugar de tu proyecto:
+
+````markdown
+---
+title: Flujo de Login
+category: Autenticación
+tags: [auth, login, oauth]
+order: 1
+description: Flujo de autenticación de usuario con OAuth2
+---
+
+```mermaid
+flowchart TD
+    A[Usuario] --> B{¿Autenticado?}
+    B -->|Sí| C[Dashboard]
+    B -->|No| D[Página de Login]
+```
+````
+
+Flowbook descubre automáticamente el archivo y lo agrega al visor.
+
+## Esquema de Frontmatter
+
+| Campo         | Tipo       | Requerido | Descripción                           |
+|---------------|------------|-----------|---------------------------------------|
+| `title`       | `string`   | No        | Título a mostrar (por defecto: nombre del archivo) |
+| `category`    | `string`   | No        | Categoría en la barra lateral (por defecto: "Uncategorized") |
+| `tags`        | `string[]` | No        | Etiquetas filtrables                  |
+| `order`       | `number`   | No        | Orden dentro de la categoría (por defecto: 999) |
+| `description` | `string`   | No        | Descripción en la vista detallada     |
+
+## Descubrimiento de Archivos
+
+Flowbook escanea estos patrones por defecto:
+
+```
+**/*.flow.md
+**/*.flowchart.md
+```
+
+Ignora `node_modules/`, `.git/` y `dist/`.
+
+## Cómo Funciona
+
+```
+archivos .flow.md ──→ Plugin Vite ──→ Módulo Virtual ──→ Visor React
+                        │                   │
+                        ├─ escaneo fast-glob ├─ export default { flows: [...] }
+                        ├─ gray-matter       │
+                        │  parseo            └─ HMR en cambio de archivo
+                        └─ bloque mermaid
+                           extracción
+```
+
+1. **Descubrimiento** — `fast-glob` escanea el proyecto buscando `*.flow.md` / `*.flowchart.md`
+2. **Parseo** — `gray-matter` extrae el frontmatter YAML; regex extrae bloques `` ```mermaid ``
+3. **Módulo Virtual** — El plugin de Vite sirve los datos parseados como `virtual:flowbook-data`
+4. **Renderizado** — La app React renderiza diagramas Mermaid via `mermaid.render()`
+5. **HMR** — Los cambios en archivos invalidan el módulo virtual, disparando una recarga
+
+## Estructura del Proyecto
+
+```
+src/
+├── types.ts                    # Tipos compartidos (FlowEntry, FlowbookData)
+├── node/
+│   ├── cli.ts                  # Punto de entrada CLI (init, dev, build)
+│   ├── server.ts               # Servidor Vite programático y build
+│   ├── init.ts                 # Lógica de inicialización del proyecto
+│   ├── discovery.ts            # Escáner de archivos (fast-glob)
+│   ├── parser.ts               # Extracción de frontmatter + mermaid
+│   └── plugin.ts               # Plugin de módulo virtual de Vite
+└── client/
+    ├── index.html              # HTML de entrada
+    ├── main.tsx                # Entrada React
+    ├── App.tsx                 # Layout con búsqueda + barra lateral + visor
+    ├── vite-env.d.ts           # Declaraciones de tipo del módulo virtual
+    ├── styles/globals.css      # Tailwind v4 + estilos personalizados
+    └── components/
+        ├── Header.tsx          # Logo, barra de búsqueda, conteo de flujos
+        ├── Sidebar.tsx         # Árbol de categorías colapsable
+        ├── MermaidRenderer.tsx # Renderizado de diagramas Mermaid
+        ├── FlowView.tsx        # Vista detallada de flujo individual
+        └── EmptyState.tsx      # Estado vacío con guía
+```
+
+## Desarrollo (Contribución)
+
+```bash
+git clone https://github.com/Epsilondelta-ai/flowbook.git
+cd flowbook
+npm install
+
+# Desarrollo local (usa el vite.config.ts raíz)
+npm run dev
+
+# Construir CLI
+npm run build
+
+# Probar CLI localmente
+node dist/cli.js dev
+node dist/cli.js build
+```
+
+## Stack Tecnológico
+
+- **Vite** — Servidor de desarrollo con HMR
+- **React 19** — UI
+- **Mermaid 11** — Renderizado de diagramas
+- **Tailwind CSS v4** — Estilos
+- **gray-matter** — Parseo de frontmatter YAML
+- **fast-glob** — Descubrimiento de archivos
+- **tsup** — Bundler de CLI
+- **TypeScript** — Seguridad de tipos
+
+## Licencia
+
+MIT

package/README.fr.md

@@ -0,0 +1,170 @@
+# Flowbook
+
+> [English](./README.md) | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Español](./README.es.md) | [Português (BR)](./README.pt-BR.md) | **Français** | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
+
+Storybook pour les diagrammes de flux. Découvre automatiquement les fichiers de diagrammes Mermaid dans votre code, les organise par catégorie et les affiche dans un visualiseur navigable.
+
+![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
+![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
+![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
+![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
+
+## Démarrage Rapide
+
+```bash
+# Installer
+npm install -D flowbook
+
+# Initialiser — ajoute les scripts + fichier d'exemple
+npx flowbook init
+
+# Démarrer le serveur de développement
+npm run flowbook
+# → http://localhost:6200
+
+# Construire le site statique
+npm run build-flowbook
+# → flowbook-static/
+```
+
+## CLI
+
+```
+flowbook init                Configurer Flowbook dans votre projet
+flowbook dev  [--port 6200]  Démarrer le serveur de développement
+flowbook build [--out-dir d] Construire un site statique
+```
+
+### `flowbook init`
+
+- Ajoute les scripts `"flowbook"` et `"build-flowbook"` à votre `package.json`
+- Crée `flows/example.flow.md` comme modèle de départ
+
+### `flowbook dev`
+
+Démarre un serveur de développement Vite sur `http://localhost:6200` avec HMR. Toute modification de fichiers `.flow.md` ou `.flowchart.md` est prise en compte instantanément.
+
+### `flowbook build`
+
+Construit un site statique dans `flowbook-static/` (configurable via `--out-dir`). Déployez-le n'importe où.
+
+## Écrire des Fichiers de Flux
+
+Créez un fichier `.flow.md` (ou `.flowchart.md`) n'importe où dans votre projet :
+
+````markdown
+---
+title: Flux de Connexion
+category: Authentification
+tags: [auth, login, oauth]
+order: 1
+description: Flux d'authentification utilisateur avec OAuth2
+---
+
+```mermaid
+flowchart TD
+    A[Utilisateur] --> B{Authentifié ?}
+    B -->|Oui| C[Tableau de bord]
+    B -->|Non| D[Page de connexion]
+```
+````
+
+Flowbook découvre automatiquement le fichier et l'ajoute au visualiseur.
+
+## Schéma du Frontmatter
+
+| Champ         | Type       | Requis | Description                            |
+|---------------|------------|--------|----------------------------------------|
+| `title`       | `string`   | Non    | Titre affiché (par défaut : nom du fichier) |
+| `category`    | `string`   | Non    | Catégorie dans la barre latérale (par défaut : "Uncategorized") |
+| `tags`        | `string[]` | Non    | Tags filtrables                        |
+| `order`       | `number`   | Non    | Ordre de tri dans la catégorie (par défaut : 999) |
+| `description` | `string`   | Non    | Description affichée dans la vue détaillée |
+
+## Découverte des Fichiers
+
+Flowbook analyse ces motifs par défaut :
+
+```
+**/*.flow.md
+**/*.flowchart.md
+```
+
+Ignore `node_modules/`, `.git/` et `dist/`.
+
+## Fonctionnement
+
+```
+fichiers .flow.md ──→ Plugin Vite ──→ Module Virtuel ──→ Visualiseur React
+                        │                   │
+                        ├─ scan fast-glob   ├─ export default { flows: [...] }
+                        ├─ gray-matter      │
+                        │  parsing          └─ HMR sur modification de fichier
+                        └─ bloc mermaid
+                           extraction
+```
+
+1. **Découverte** — `fast-glob` analyse le projet à la recherche de `*.flow.md` / `*.flowchart.md`
+2. **Parsing** — `gray-matter` extrait le frontmatter YAML ; regex extrait les blocs `` ```mermaid ``
+3. **Module Virtuel** — Le plugin Vite sert les données parsées comme `virtual:flowbook-data`
+4. **Rendu** — L'application React rend les diagrammes Mermaid via `mermaid.render()`
+5. **HMR** — Les modifications de fichiers invalident le module virtuel, déclenchant un rechargement
+
+## Structure du Projet
+
+```
+src/
+├── types.ts                    # Types partagés (FlowEntry, FlowbookData)
+├── node/
+│   ├── cli.ts                  # Point d'entrée CLI (init, dev, build)
+│   ├── server.ts               # Serveur Vite programmatique et build
+│   ├── init.ts                 # Logique d'initialisation du projet
+│   ├── discovery.ts            # Scanner de fichiers (fast-glob)
+│   ├── parser.ts               # Extraction frontmatter + mermaid
+│   └── plugin.ts               # Plugin de module virtuel Vite
+└── client/
+    ├── index.html              # HTML d'entrée
+    ├── main.tsx                # Entrée React
+    ├── App.tsx                 # Layout avec recherche + barre latérale + visualiseur
+    ├── vite-env.d.ts           # Déclarations de type du module virtuel
+    ├── styles/globals.css      # Tailwind v4 + styles personnalisés
+    └── components/
+        ├── Header.tsx          # Logo, barre de recherche, nombre de flux
+        ├── Sidebar.tsx         # Arbre de catégories repliable
+        ├── MermaidRenderer.tsx # Rendu des diagrammes Mermaid
+        ├── FlowView.tsx        # Vue détaillée d'un flux individuel
+        └── EmptyState.tsx      # État vide avec guide
+```
+
+## Développement (Contribution)
+
+```bash
+git clone https://github.com/Epsilondelta-ai/flowbook.git
+cd flowbook
+npm install
+
+# Développement local (utilise le vite.config.ts racine)
+npm run dev
+
+# Construire le CLI
+npm run build
+
+# Tester le CLI localement
+node dist/cli.js dev
+node dist/cli.js build
+```
+
+## Stack Technique
+
+- **Vite** — Serveur de développement avec HMR
+- **React 19** — Interface utilisateur
+- **Mermaid 11** — Rendu de diagrammes
+- **Tailwind CSS v4** — Stylisation
+- **gray-matter** — Parsing de frontmatter YAML
+- **fast-glob** — Découverte de fichiers
+- **tsup** — Bundler CLI
+- **TypeScript** — Sûreté de type
+
+## Licence
+
+MIT

package/README.ja.md

@@ -0,0 +1,170 @@
+# Flowbook
+
+> [English](./README.md) | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | **日本語** | [Español](./README.es.md) | [Português (BR)](./README.pt-BR.md) | [Français](./README.fr.md) | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
+
+フローチャートのための Storybook。コードベースから Mermaid ダイアグラムファイルを自動検出し、カテゴリ別に整理して、ブラウザで閲覧可能なビューアでレンダリングします。
+
+![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
+![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
+![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
+![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
+
+## クイックスタート
+
+```bash
+# インストール
+npm install -D flowbook
+
+# 初期化 — スクリプト + サンプルファイルを追加
+npx flowbook init
+
+# 開発サーバーを起動
+npm run flowbook
+# → http://localhost:6200
+
+# 静的サイトをビルド
+npm run build-flowbook
+# → flowbook-static/
+```
+
+## CLI
+
+```
+flowbook init                プロジェクトに Flowbook をセットアップ
+flowbook dev  [--port 6200]  開発サーバーを起動
+flowbook build [--out-dir d] 静的サイトをビルド
+```
+
+### `flowbook init`
+
+- `package.json` に `"flowbook"` と `"build-flowbook"` スクリプトを追加します
+- `flows/example.flow.md` をスターターテンプレートとして作成します
+
+### `flowbook dev`
+
+`http://localhost:6200` で HMR 対応の Vite 開発サーバーを起動します。`.flow.md` や `.flowchart.md` ファイルの変更が即座に反映されます。
+
+### `flowbook build`
+
+`flowbook-static/` ディレクトリに静的サイトをビルドします（`--out-dir` で変更可能）。どこにでもデプロイできます。
+
+## フローファイルの作成
+
+プロジェクト内の任意の場所に `.flow.md`（または `.flowchart.md`）ファイルを作成してください：
+
+````markdown
+---
+title: ログインフロー
+category: 認証
+tags: [auth, login, oauth]
+order: 1
+description: OAuth2 を使用したユーザー認証フロー
+---
+
+```mermaid
+flowchart TD
+    A[ユーザー] --> B{認証済み?}
+    B -->|はい| C[ダッシュボード]
+    B -->|いいえ| D[ログインページ]
+```
+````
+
+Flowbook がファイルを自動検出し、ビューアに追加します。
+
+## フロントマタースキーマ
+
+| フィールド    | 型         | 必須   | 説明                                |
+|---------------|------------|--------|-------------------------------------|
+| `title`       | `string`   | いいえ | 表示タイトル（デフォルト: ファイル名）|
+| `category`    | `string`   | いいえ | サイドバーのカテゴリ（デフォルト: "Uncategorized"）|
+| `tags`        | `string[]` | いいえ | フィルタリング可能なタグ            |
+| `order`       | `number`   | いいえ | カテゴリ内の並び順（デフォルト: 999）|
+| `description` | `string`   | いいえ | 詳細ビューに表示される説明          |
+
+## ファイル検出
+
+Flowbook はデフォルトで以下のパターンをスキャンします：
+
+```
+**/*.flow.md
+**/*.flowchart.md
+```
+
+`node_modules/`、`.git/`、`dist/` は無視します。
+
+## 仕組み
+
+```
+.flow.md ファイル ──→ Vite プラグイン ──→ 仮想モジュール ──→ React ビューア
+                        │                     │
+                        ├─ fast-glob スキャン  ├─ export default { flows: [...] }
+                        ├─ gray-matter        │
+                        │  パース             └─ ファイル変更時に HMR
+                        └─ mermaid ブロック
+                           抽出
+```
+
+1. **検出** — `fast-glob` がプロジェクト内の `*.flow.md` / `*.flowchart.md` をスキャン
+2. **パース** — `gray-matter` が YAML フロントマターを抽出；正規表現で `` ```mermaid `` ブロックを抽出
+3. **仮想モジュール** — Vite プラグインがパースしたデータを `virtual:flowbook-data` として提供
+4. **レンダリング** — React アプリが `mermaid.render()` で Mermaid ダイアグラムをレンダリング
+5. **HMR** — ファイル変更時に仮想モジュールを無効化し、リロードをトリガー
+
+## プロジェクト構成
+
+```
+src/
+├── types.ts                    # 共有型 (FlowEntry, FlowbookData)
+├── node/
+│   ├── cli.ts                  # CLI エントリポイント (init, dev, build)
+│   ├── server.ts               # プログラマティック Vite サーバー & ビルド
+│   ├── init.ts                 # プロジェクト初期化ロジック
+│   ├── discovery.ts            # ファイルスキャナー (fast-glob)
+│   ├── parser.ts               # フロントマター + mermaid 抽出
+│   └── plugin.ts               # Vite 仮想モジュールプラグイン
+└── client/
+    ├── index.html              # エントリ HTML
+    ├── main.tsx                # React エントリ
+    ├── App.tsx                 # 検索 + サイドバー + ビューアレイアウト
+    ├── vite-env.d.ts           # 仮想モジュール型宣言
+    ├── styles/globals.css      # Tailwind v4 + カスタムスタイル
+    └── components/
+        ├── Header.tsx          # ロゴ、検索バー、フロー数
+        ├── Sidebar.tsx         # 折りたたみ可能なカテゴリツリー
+        ├── MermaidRenderer.tsx # Mermaid ダイアグラムレンダリング
+        ├── FlowView.tsx        # 単一フロー詳細ビュー
+        └── EmptyState.tsx      # 空状態ガイド
+```
+
+## 開発（コントリビューション）
+
+```bash
+git clone https://github.com/Epsilondelta-ai/flowbook.git
+cd flowbook
+npm install
+
+# ローカル開発（ルートの vite.config.ts を使用）
+npm run dev
+
+# CLI をビルド
+npm run build
+
+# ローカルで CLI をテスト
+node dist/cli.js dev
+node dist/cli.js build
+```
+
+## 技術スタック
+
+- **Vite** — HMR 対応開発サーバー
+- **React 19** — UI
+- **Mermaid 11** — ダイアグラムレンダリング
+- **Tailwind CSS v4** — スタイリング
+- **gray-matter** — YAML フロントマターパーサー
+- **fast-glob** — ファイル検出
+- **tsup** — CLI バンドラー
+- **TypeScript** — 型安全性
+
+## ライセンス
+
+MIT