flowbook 0.1.3 → 0.1.6

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 (10) hide show
  1. package/README.md +30 -34
  2. package/package.json +1 -1
  3. package/README.de.md +0 -233
  4. package/README.es.md +0 -233
  5. package/README.fr.md +0 -233
  6. package/README.ja.md +0 -233
  7. package/README.ko.md +0 -233
  8. package/README.pt-BR.md +0 -233
  9. package/README.ru.md +0 -234
  10. package/README.zh-CN.md +0 -233
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Flowbook
2
2
 
3
- > **English** | [한국어](./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](./README.de.md)
3
+ > **English** | [한국어](./docs/README.ko.md) | [简体中文](./docs/README.zh-CN.md) | [日本語](./docs/README.ja.md) | [Español](./docs/README.es.md) | [Português (BR)](./docs/README.pt-BR.md) | [Français](./docs/README.fr.md) | [Русский](./docs/README.ru.md) | [Deutsch](./docs/README.de.md)
4
4
 
5
5
  Storybook for flowcharts. Auto-discovers Mermaid diagram files from your codebase, organizes them by category, and renders them in a browsable viewer.
6
6
 
@@ -99,48 +99,26 @@ When a coding agent (Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini
99
99
  3. Generate `.flow.md` files with Mermaid diagrams for every significant flow
100
100
  4. Verify the build
101
101
 
102
- ### Manual Skill Installation
102
+ ### Install Skill via CLI
103
103
 
104
- If you didn't use `flowbook init`, copy the skill manually:
104
+ You can also install the skill standalone using [skills.sh](https://skills.sh):
105
105
 
106
106
  ```bash
107
- # Claude Code
108
- mkdir -p .claude/skills/flowbook
109
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
110
-
111
- # OpenAI Codex
112
- mkdir -p .agents/skills/flowbook
113
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .agents/skills/flowbook/
114
-
115
- # VS Code / GitHub Copilot
116
- mkdir -p .github/skills/flowbook
117
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .github/skills/flowbook/
118
-
119
- # Google Antigravity
120
- mkdir -p .agent/skills/flowbook
121
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .agent/skills/flowbook/
122
-
123
- # Gemini CLI
124
- mkdir -p .gemini/skills/flowbook
125
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .gemini/skills/flowbook/
107
+ npx skills add Epsilondelta-ai/flowbook
108
+ ```
126
109
 
127
- # Cursor
128
- mkdir -p .cursor/skills/flowbook
129
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
110
+ This auto-detects your installed coding agents and installs the skill to the correct directories.
130
111
 
131
- # Windsurf (Codeium)
132
- mkdir -p .windsurf/skills/flowbook
133
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .windsurf/skills/flowbook/
112
+ ### Global Installation
134
113
 
135
- # AmpCode
136
- mkdir -p .amp/skills/flowbook
137
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .amp/skills/flowbook/
114
+ To install the skill globally (available across all projects):
138
115
 
139
- # OpenCode / oh-my-opencode
140
- mkdir -p .opencode/skills/flowbook
141
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .opencode/skills/flowbook/
116
+ ```bash
117
+ npx skills add -g Epsilondelta-ai/flowbook
142
118
  ```
143
119
 
120
+ This installs the skill to each agent's global directory (e.g., `~/.claude/skills/`, `~/.config/opencode/skills/`, etc.).
121
+
144
122
  ### Compatible Agents
145
123
 
146
124
  | Agent | Skill Location |
@@ -155,6 +133,24 @@ cp node_modules/flowbook/src/skills/flowbook/SKILL.md .opencode/skills/flowbook/
155
133
  | AmpCode | `.amp/skills/flowbook/SKILL.md` |
156
134
  | OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
157
135
 
136
+ <details>
137
+ <summary>Manual Skill Installation</summary>
138
+
139
+ If you didn't use `flowbook init` or `npx skills add`, copy the skill manually:
140
+
141
+ ```bash
142
+ # Example: Claude Code
143
+ mkdir -p .claude/skills/flowbook
144
+ cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
145
+
146
+ # Example: Cursor
147
+ mkdir -p .cursor/skills/flowbook
148
+ cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
149
+ ```
150
+
151
+ Replace the directory with the appropriate path from the Compatible Agents table above.
152
+
153
+ </details>
158
154
  ## How It Works
159
155
 
160
156
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbook",
3
- "version": "0.1.3",
3
+ "version": "0.1.6",
4
4
  "type": "module",
5
5
  "bin": {
6
6
  "flowbook": "./dist/cli.js"
package/README.de.md DELETED
@@ -1,233 +0,0 @@
1
- # Flowbook
2
-
3
- > [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**
4
-
5
- Storybook für Flussdiagramme. Erkennt automatisch Mermaid-Diagrammdateien in Ihrer Codebasis, organisiert sie nach Kategorien und rendert sie in einem browserbaren Viewer.
6
-
7
- ![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
8
- ![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
9
- ![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
10
- ![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
11
-
12
- ## Schnellstart
13
-
14
- ```bash
15
- # Initialisieren — fügt Skripte + Beispieldatei hinzu
16
- npx flowbook@latest init
17
-
18
- # Entwicklungsserver starten
19
- npm run flowbook
20
- # → http://localhost:6200
21
-
22
- # Statische Seite erstellen
23
- npm run build-flowbook
24
- # → flowbook-static/
25
- ```
26
-
27
- ## CLI
28
-
29
- ```
30
- flowbook init Flowbook im Projekt einrichten
31
- flowbook dev [--port 6200] Entwicklungsserver starten
32
- flowbook build [--out-dir d] Statische Seite erstellen
33
- ```
34
-
35
- ### `flowbook init`
36
-
37
- - Fügt die Skripte `"flowbook"` und `"build-flowbook"` zu Ihrer `package.json` hinzu
38
- - Erstellt `flows/example.flow.md` als Startvorlage
39
-
40
- ### `flowbook dev`
41
-
42
- Startet einen Vite-Entwicklungsserver unter `http://localhost:6200` mit HMR. Änderungen an `.flow.md`- oder `.flowchart.md`-Dateien werden sofort übernommen.
43
-
44
- ### `flowbook build`
45
-
46
- Erstellt eine statische Seite in `flowbook-static/` (konfigurierbar über `--out-dir`). Überall deploybar.
47
-
48
- ## Flow-Dateien Erstellen
49
-
50
- Erstellen Sie eine `.flow.md`- (oder `.flowchart.md`-) Datei an beliebiger Stelle in Ihrem Projekt:
51
-
52
- ````markdown
53
- ---
54
- title: Login-Ablauf
55
- category: Authentifizierung
56
- tags: [auth, login, oauth]
57
- order: 1
58
- description: Benutzer-Authentifizierungsablauf mit OAuth2
59
- ---
60
-
61
- ```mermaid
62
- flowchart TD
63
- A[Benutzer] --> B{Authentifiziert?}
64
- B -->|Ja| C[Dashboard]
65
- B -->|Nein| D[Login-Seite]
66
- ```
67
- ````
68
-
69
- Flowbook erkennt die Datei automatisch und fügt sie dem Viewer hinzu.
70
-
71
- ## Frontmatter-Schema
72
-
73
- | Feld | Typ | Erforderlich | Beschreibung |
74
- |---------------|------------|--------------|---------------------------------------|
75
- | `title` | `string` | Nein | Angezeigter Titel (Standard: Dateiname) |
76
- | `category` | `string` | Nein | Kategorie in der Seitenleiste (Standard: "Uncategorized") |
77
- | `tags` | `string[]` | Nein | Filterbare Tags |
78
- | `order` | `number` | Nein | Sortierreihenfolge innerhalb der Kategorie (Standard: 999) |
79
- | `description` | `string` | Nein | Beschreibung in der Detailansicht |
80
-
81
- ## Datei-Erkennung
82
-
83
- Flowbook durchsucht standardmäßig folgende Muster:
84
-
85
- ```
86
- **/*.flow.md
87
- **/*.flowchart.md
88
- ```
89
-
90
- Ignoriert `node_modules/`, `.git/` und `dist/`.
91
-
92
- ## KI-Agent-Fähigkeit
93
-
94
- `flowbook init` installiert automatisch KI-Agent-Fähigkeiten in alle unterstützten Codierungs-Agent-Verzeichnisse.
95
- Wenn ein Codierungs-Agent (Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini CLI usw.) das Schlüsselwort **"flowbook"** in Ihrer Eingabeaufforderung erkennt, wird er:
96
-
97
- 1. Ihre Codebasis auf logische Abläufe analysieren (API-Routen, Authentifizierung, Zustandsverwaltung, Geschäftslogik usw.)
98
- 2. Flowbook einrichten, falls noch nicht initialisiert
99
- 3. `.flow.md`-Dateien mit Mermaid-Diagrammen für jeden bedeutenden Ablauf generieren
100
- 4. Den Build überprüfen
101
-
102
- ### Manuelle Fähigkeitsinstallation
103
-
104
- Wenn Sie `flowbook init` nicht verwendet haben, kopieren Sie die Fähigkeit manuell:
105
-
106
- ```bash
107
- # Claude Code
108
- mkdir -p .claude/skills/flowbook
109
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
110
-
111
- # OpenAI Codex
112
- mkdir -p .agents/skills/flowbook
113
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .agents/skills/flowbook/
114
-
115
- # VS Code / GitHub Copilot
116
- mkdir -p .github/skills/flowbook
117
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .github/skills/flowbook/
118
-
119
- # Google Antigravity
120
- mkdir -p .agent/skills/flowbook
121
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .agent/skills/flowbook/
122
-
123
- # Gemini CLI
124
- mkdir -p .gemini/skills/flowbook
125
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .gemini/skills/flowbook/
126
-
127
- # Cursor
128
- mkdir -p .cursor/skills/flowbook
129
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
130
-
131
- # Windsurf (Codeium)
132
- mkdir -p .windsurf/skills/flowbook
133
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .windsurf/skills/flowbook/
134
-
135
- # AmpCode
136
- mkdir -p .amp/skills/flowbook
137
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .amp/skills/flowbook/
138
-
139
- # OpenCode / oh-my-opencode
140
- mkdir -p .opencode/skills/flowbook
141
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .opencode/skills/flowbook/
142
- ```
143
-
144
- ### Kompatible Agenten
145
-
146
- | Agent | Fähigkeitsort |
147
- |-------|---------------|
148
- | Claude Code | `.claude/skills/flowbook/SKILL.md` |
149
- | OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
150
- | VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
151
- | Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
152
- | Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
153
- | Cursor | `.cursor/skills/flowbook/SKILL.md` |
154
- | Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
155
- | AmpCode | `.amp/skills/flowbook/SKILL.md` |
156
- | OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
157
-
158
- ## Funktionsweise
159
-
160
- ```
161
- .flow.md-Dateien ──→ Vite-Plugin ──→ Virtuelles Modul ──→ React-Viewer
162
- │ │
163
- ├─ fast-glob-Scan ├─ export default { flows: [...] }
164
- ├─ gray-matter │
165
- │ Parsing └─ HMR bei Dateiänderung
166
- └─ Mermaid-Block
167
- Extraktion
168
- ```
169
-
170
- 1. **Erkennung** — `fast-glob` durchsucht das Projekt nach `*.flow.md` / `*.flowchart.md`
171
- 2. **Parsing** — `gray-matter` extrahiert YAML-Frontmatter; Regex extrahiert `` ```mermaid ``-Blöcke
172
- 3. **Virtuelles Modul** — Vite-Plugin stellt geparste Daten als `virtual:flowbook-data` bereit
173
- 4. **Rendering** — React-App rendert Mermaid-Diagramme über `mermaid.render()`
174
- 5. **HMR** — Dateiänderungen invalidieren das virtuelle Modul und lösen ein Neuladen aus
175
-
176
- ## Projektstruktur
177
-
178
- ```
179
- src/
180
- ├── types.ts # Gemeinsame Typen (FlowEntry, FlowbookData)
181
- ├── node/
182
- │ ├── cli.ts # CLI-Einstiegspunkt (init, dev, build)
183
- │ ├── server.ts # Programmatischer Vite-Server & Build
184
- │ ├── init.ts # Projekt-Initialisierungslogik
185
- │ ├── discovery.ts # Datei-Scanner (fast-glob)
186
- │ ├── parser.ts # Frontmatter + Mermaid-Extraktion
187
- │ └── plugin.ts # Vite-Plugin für virtuelles Modul
188
- └── client/
189
- ├── index.html # Einstiegs-HTML
190
- ├── main.tsx # React-Einstiegspunkt
191
- ├── App.tsx # Layout mit Suche + Seitenleiste + Viewer
192
- ├── vite-env.d.ts # Typdeklarationen für virtuelles Modul
193
- ├── styles/globals.css # Tailwind v4 + benutzerdefinierte Stile
194
- └── components/
195
- ├── Header.tsx # Logo, Suchleiste, Flow-Anzahl
196
- ├── Sidebar.tsx # Einklappbarer Kategoriebaum
197
- ├── MermaidRenderer.tsx # Mermaid-Diagramm-Rendering
198
- ├── FlowView.tsx # Einzelne Flow-Detailansicht
199
- └── EmptyState.tsx # Leerzustand mit Anleitung
200
- ```
201
-
202
- ## Entwicklung (Beitragen)
203
-
204
- ```bash
205
- git clone https://github.com/Epsilondelta-ai/flowbook.git
206
- cd flowbook
207
- npm install
208
-
209
- # Lokale Entwicklung (verwendet die Root-vite.config.ts)
210
- npm run dev
211
-
212
- # CLI erstellen
213
- npm run build
214
-
215
- # CLI lokal testen
216
- node dist/cli.js dev
217
- node dist/cli.js build
218
- ```
219
-
220
- ## Technologie-Stack
221
-
222
- - **Vite** — Entwicklungsserver mit HMR
223
- - **React 19** — Benutzeroberfläche
224
- - **Mermaid 11** — Diagramm-Rendering
225
- - **Tailwind CSS v4** — Styling
226
- - **gray-matter** — YAML-Frontmatter-Parsing
227
- - **fast-glob** — Datei-Erkennung
228
- - **tsup** — CLI-Bundler
229
- - **TypeScript** — Typsicherheit
230
-
231
- ## Lizenz
232
-
233
- MIT
package/README.es.md DELETED
@@ -1,233 +0,0 @@
1
- # Flowbook
2
-
3
- > [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)
4
-
5
- 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.
6
-
7
- ![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
8
- ![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
9
- ![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
10
- ![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
11
-
12
- ## Inicio Rápido
13
-
14
- ```bash
15
- # Inicializar — agrega scripts + archivo de ejemplo
16
- npx flowbook@latest init
17
-
18
- # Iniciar servidor de desarrollo
19
- npm run flowbook
20
- # → http://localhost:6200
21
-
22
- # Construir sitio estático
23
- npm run build-flowbook
24
- # → flowbook-static/
25
- ```
26
-
27
- ## CLI
28
-
29
- ```
30
- flowbook init Configurar Flowbook en tu proyecto
31
- flowbook dev [--port 6200] Iniciar el servidor de desarrollo
32
- flowbook build [--out-dir d] Construir un sitio estático
33
- ```
34
-
35
- ### `flowbook init`
36
-
37
- - Agrega los scripts `"flowbook"` y `"build-flowbook"` a tu `package.json`
38
- - Crea `flows/example.flow.md` como plantilla inicial
39
-
40
- ### `flowbook dev`
41
-
42
- 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.
43
-
44
- ### `flowbook build`
45
-
46
- Construye un sitio estático en `flowbook-static/` (configurable con `--out-dir`). Despliégalo en cualquier lugar.
47
-
48
- ## Escribir Archivos de Flujo
49
-
50
- Crea un archivo `.flow.md` (o `.flowchart.md`) en cualquier lugar de tu proyecto:
51
-
52
- ````markdown
53
- ---
54
- title: Flujo de Login
55
- category: Autenticación
56
- tags: [auth, login, oauth]
57
- order: 1
58
- description: Flujo de autenticación de usuario con OAuth2
59
- ---
60
-
61
- ```mermaid
62
- flowchart TD
63
- A[Usuario] --> B{¿Autenticado?}
64
- B -->|Sí| C[Dashboard]
65
- B -->|No| D[Página de Login]
66
- ```
67
- ````
68
-
69
- Flowbook descubre automáticamente el archivo y lo agrega al visor.
70
-
71
- ## Esquema de Frontmatter
72
-
73
- | Campo | Tipo | Requerido | Descripción |
74
- |---------------|------------|-----------|---------------------------------------|
75
- | `title` | `string` | No | Título a mostrar (por defecto: nombre del archivo) |
76
- | `category` | `string` | No | Categoría en la barra lateral (por defecto: "Uncategorized") |
77
- | `tags` | `string[]` | No | Etiquetas filtrables |
78
- | `order` | `number` | No | Orden dentro de la categoría (por defecto: 999) |
79
- | `description` | `string` | No | Descripción en la vista detallada |
80
-
81
- ## Descubrimiento de Archivos
82
-
83
- Flowbook escanea estos patrones por defecto:
84
-
85
- ```
86
- **/*.flow.md
87
- **/*.flowchart.md
88
- ```
89
-
90
- Ignora `node_modules/`, `.git/` y `dist/`.
91
-
92
- ## Habilidad de Agente IA
93
-
94
- `flowbook init` instala automáticamente habilidades de agente IA en todos los directorios de agentes de codificación soportados.
95
- Cuando un agente de codificación (Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini CLI, etc.) detecta la palabra clave **"flowbook"** en tu indicación, hará:
96
-
97
- 1. Analizar tu base de código en busca de flujos lógicos (rutas API, autenticación, gestión de estado, lógica empresarial, etc.)
98
- 2. Configurar Flowbook si aún no está inicializado
99
- 3. Generar archivos `.flow.md` con diagramas Mermaid para cada flujo significativo
100
- 4. Verificar la compilación
101
-
102
- ### Instalación Manual de Habilidad
103
-
104
- Si no usaste `flowbook init`, copia la habilidad manualmente:
105
-
106
- ```bash
107
- # Claude Code
108
- mkdir -p .claude/skills/flowbook
109
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
110
-
111
- # OpenAI Codex
112
- mkdir -p .agents/skills/flowbook
113
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .agents/skills/flowbook/
114
-
115
- # VS Code / GitHub Copilot
116
- mkdir -p .github/skills/flowbook
117
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .github/skills/flowbook/
118
-
119
- # Google Antigravity
120
- mkdir -p .agent/skills/flowbook
121
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .agent/skills/flowbook/
122
-
123
- # Gemini CLI
124
- mkdir -p .gemini/skills/flowbook
125
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .gemini/skills/flowbook/
126
-
127
- # Cursor
128
- mkdir -p .cursor/skills/flowbook
129
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
130
-
131
- # Windsurf (Codeium)
132
- mkdir -p .windsurf/skills/flowbook
133
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .windsurf/skills/flowbook/
134
-
135
- # AmpCode
136
- mkdir -p .amp/skills/flowbook
137
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .amp/skills/flowbook/
138
-
139
- # OpenCode / oh-my-opencode
140
- mkdir -p .opencode/skills/flowbook
141
- cp node_modules/flowbook/src/skills/flowbook/SKILL.md .opencode/skills/flowbook/
142
- ```
143
-
144
- ### Agentes Compatibles
145
-
146
- | Agente | Ubicación de Habilidad |
147
- |-------|---------------|
148
- | Claude Code | `.claude/skills/flowbook/SKILL.md` |
149
- | OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
150
- | VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
151
- | Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
152
- | Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
153
- | Cursor | `.cursor/skills/flowbook/SKILL.md` |
154
- | Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
155
- | AmpCode | `.amp/skills/flowbook/SKILL.md` |
156
- | OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
157
-
158
- ## Cómo Funciona
159
-
160
- ```
161
- archivos .flow.md ──→ Plugin Vite ──→ Módulo Virtual ──→ Visor React
162
- │ │
163
- ├─ escaneo fast-glob ├─ export default { flows: [...] }
164
- ├─ gray-matter │
165
- │ parseo └─ HMR en cambio de archivo
166
- └─ bloque mermaid
167
- extracción
168
- ```
169
-
170
- 1. **Descubrimiento** — `fast-glob` escanea el proyecto buscando `*.flow.md` / `*.flowchart.md`
171
- 2. **Parseo** — `gray-matter` extrae el frontmatter YAML; regex extrae bloques `` ```mermaid ``
172
- 3. **Módulo Virtual** — El plugin de Vite sirve los datos parseados como `virtual:flowbook-data`
173
- 4. **Renderizado** — La app React renderiza diagramas Mermaid via `mermaid.render()`
174
- 5. **HMR** — Los cambios en archivos invalidan el módulo virtual, disparando una recarga
175
-
176
- ## Estructura del Proyecto
177
-
178
- ```
179
- src/
180
- ├── types.ts # Tipos compartidos (FlowEntry, FlowbookData)
181
- ├── node/
182
- │ ├── cli.ts # Punto de entrada CLI (init, dev, build)
183
- │ ├── server.ts # Servidor Vite programático y build
184
- │ ├── init.ts # Lógica de inicialización del proyecto
185
- │ ├── discovery.ts # Escáner de archivos (fast-glob)
186
- │ ├── parser.ts # Extracción de frontmatter + mermaid
187
- │ └── plugin.ts # Plugin de módulo virtual de Vite
188
- └── client/
189
- ├── index.html # HTML de entrada
190
- ├── main.tsx # Entrada React
191
- ├── App.tsx # Layout con búsqueda + barra lateral + visor
192
- ├── vite-env.d.ts # Declaraciones de tipo del módulo virtual
193
- ├── styles/globals.css # Tailwind v4 + estilos personalizados
194
- └── components/
195
- ├── Header.tsx # Logo, barra de búsqueda, conteo de flujos
196
- ├── Sidebar.tsx # Árbol de categorías colapsable
197
- ├── MermaidRenderer.tsx # Renderizado de diagramas Mermaid
198
- ├── FlowView.tsx # Vista detallada de flujo individual
199
- └── EmptyState.tsx # Estado vacío con guía
200
- ```
201
-
202
- ## Desarrollo (Contribución)
203
-
204
- ```bash
205
- git clone https://github.com/Epsilondelta-ai/flowbook.git
206
- cd flowbook
207
- npm install
208
-
209
- # Desarrollo local (usa el vite.config.ts raíz)
210
- npm run dev
211
-
212
- # Construir CLI
213
- npm run build
214
-
215
- # Probar CLI localmente
216
- node dist/cli.js dev
217
- node dist/cli.js build
218
- ```
219
-
220
- ## Stack Tecnológico
221
-
222
- - **Vite** — Servidor de desarrollo con HMR
223
- - **React 19** — UI
224
- - **Mermaid 11** — Renderizado de diagramas
225
- - **Tailwind CSS v4** — Estilos
226
- - **gray-matter** — Parseo de frontmatter YAML
227
- - **fast-glob** — Descubrimiento de archivos
228
- - **tsup** — Bundler de CLI
229
- - **TypeScript** — Seguridad de tipos
230
-
231
- ## Licencia
232
-
233
- MIT