npm - flowbook - Versions diffs - 0.1.4 → 0.2.0 - Mend

flowbook 0.1.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md +63 -24
package/dist/cli.js +237 -52
package/package.json +1 -1
package/src/commands/flowbook.md +13 -0
package/src/commands/flowbook.plain.md +13 -0
package/src/node/cli.ts +15 -0
package/src/node/init.ts +8 -32
package/src/node/skill.ts +230 -0
package/README.de.md +0 -219
package/README.es.md +0 -219
package/README.fr.md +0 -219
package/README.ja.md +0 -219
package/README.ko.md +0 -219
package/README.pt-BR.md +0 -219
package/README.ru.md +0 -220
package/README.zh-CN.md +0 -219

package/README.fr.md DELETED Viewed

@@ -1,219 +0,0 @@
-# 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
-# Initialiser — ajoute les scripts + fichier d'exemple
-npx flowbook@latest 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/`.
-## Compétence Agent IA
-`flowbook init` installe automatiquement les compétences d'agent IA dans tous les répertoires d'agents de codage supportés.
-Lorsqu'un agent de codage (Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini CLI, etc.) détecte le mot-clé **"flowbook"** dans votre invite, il :
-1. Analyse votre base de code pour les flux logiques (routes API, authentification, gestion d'état, logique métier, etc.)
-2. Configure Flowbook s'il n'est pas déjà initialisé
-3. Génère des fichiers `.flow.md` avec des diagrammes Mermaid pour chaque flux significatif
-4. Vérifie la compilation
-### Installer la Compétence via CLI
-Vous pouvez aussi installer la compétence indépendamment avec [skills.sh](https://skills.sh) :
-```bash
-npx skills add Epsilondelta-ai/flowbook
-```
-Détecte automatiquement vos agents de codage installés et installe la compétence dans les bons répertoires.
-### Agents Compatibles
-| Agent | Emplacement de Compétence |
-|-------|---------------|
-| Claude Code | `.claude/skills/flowbook/SKILL.md` |
-| OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
-| VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
-| Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
-| Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
-| Cursor | `.cursor/skills/flowbook/SKILL.md` |
-| Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
-| AmpCode | `.amp/skills/flowbook/SKILL.md` |
-| OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
-<details>
-<summary>Installation Manuelle de Compétence</summary>
-Si vous n'avez pas utilisé `flowbook init` ni `npx skills add`, copiez la compétence manuellement :
-```bash
-# Exemple : Claude Code
-mkdir -p .claude/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
-# Exemple : Cursor
-mkdir -p .cursor/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
-```
-Remplacez le répertoire par le chemin approprié du tableau des Agents Compatibles.
-</details>
-## 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 DELETED Viewed

@@ -1,219 +0,0 @@
-# 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
-# 初期化 — スクリプト + サンプルファイルを追加
-npx flowbook@latest 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/` は無視します。
-## AI Agent Skill
-`flowbook init` はサポートされているすべてのコーディングエージェントディレクトリに AI エージェントスキルを自動的にインストールします。
-コーディングエージェント（Claude Code、OpenAI Codex、VS Code Copilot、Cursor、Gemini CLI など）がプロンプト内の **"flowbook"** キーワードを検出した場合、以下を実行します：
-1. コードベース内の論理的なフローを分析（API ルート、認証、状態管理、ビジネスロジックなど）
-2. まだ初期化されていない場合、Flowbook を設定
-3. すべての重要なフローに対して Mermaid ダイアグラム付き `.flow.md` ファイルを生成
-4. ビルドを検証
-### CLI でスキルをインストール
-[skills.sh](https://skills.sh) を使用してスキルを単独でインストールすることもできます：
-```bash
-npx skills add Epsilondelta-ai/flowbook
-```
-インストール済みのコーディングエージェントを自動検出し、適切なディレクトリにスキルをインストールします。
-### 互換性のあるエージェント
-| エージェント | スキル位置 |
-|-------|---------------|
-| Claude Code | `.claude/skills/flowbook/SKILL.md` |
-| OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
-| VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
-| Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
-| Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
-| Cursor | `.cursor/skills/flowbook/SKILL.md` |
-| Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
-| AmpCode | `.amp/skills/flowbook/SKILL.md` |
-| OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
-<details>
-<summary>手動スキルインストール</summary>
-`flowbook init` や `npx skills add` を使用しなかった場合、スキルを手動でコピーしてください：
-```bash
-# 例：Claude Code
-mkdir -p .claude/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
-# 例：Cursor
-mkdir -p .cursor/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
-```
-上の互換性テーブルのパスを参考に、適切なディレクトリに置き換えてください。
-</details>
-## 仕組み
-```
-.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

package/README.ko.md DELETED Viewed

@@ -1,219 +0,0 @@
-# Flowbook
-> **[English](./README.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](./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
-# 초기화 — 스크립트 + 예제 파일 추가
-npx flowbook@latest 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/`는 무시합니다.
-## AI Agent Skill
-`flowbook init`은 지원하는 모든 코딩 에이전트 디렉토리에 AI 에이전트 스킬을 자동으로 설치합니다.
-코딩 에이전트(Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini CLI 등)가 프롬프트에서 **"flowbook"** 키워드를 감지하면 다음을 수행합니다:
-1. 코드베이스에서 논리적 흐름 분석 (API 라우트, 인증, 상태 관리, 비즈니스 로직 등)
-2. 아직 초기화되지 않았으면 Flowbook 설정
-3. 모든 중요한 흐름에 대해 Mermaid 다이어그램이 포함된 `.flow.md` 파일 생성
-4. 빌드 검증
-### CLI로 스킬 설치
-[skills.sh](https://skills.sh)를 사용하여 스킬을 독립적으로 설치할 수도 있습니다:
-```bash
-npx skills add Epsilondelta-ai/flowbook
-```
-설치된 코딩 에이전트를 자동 감지하여 올바른 디렉토리에 스킬을 설치합니다.
-### 호환 에이전트
-| 에이전트 | 스킬 위치 |
-|-------|---------------|
-| Claude Code | `.claude/skills/flowbook/SKILL.md` |
-| OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
-| VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
-| Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
-| Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
-| Cursor | `.cursor/skills/flowbook/SKILL.md` |
-| Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
-| AmpCode | `.amp/skills/flowbook/SKILL.md` |
-| OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
-<details>
-<summary>수동 스킬 설치</summary>
-`flowbook init`이나 `npx skills add`를 사용하지 않았다면 스킬을 수동으로 복사하세요:
-```bash
-# 예시: Claude Code
-mkdir -p .claude/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
-# 예시: Cursor
-mkdir -p .cursor/skills/flowbook
-cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
-```
-위 호환 에이전트 테이블의 경로를 참고하여 적절한 디렉토리로 교체하세요.
-</details>
-## 동작 원리
-```
-.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