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.
- package/README.md +30 -34
- package/package.json +1 -1
- package/README.de.md +0 -233
- package/README.es.md +0 -233
- package/README.fr.md +0 -233
- package/README.ja.md +0 -233
- package/README.ko.md +0 -233
- package/README.pt-BR.md +0 -233
- package/README.ru.md +0 -234
- package/README.zh-CN.md +0 -233
package/README.pt-BR.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)** | [Français](./README.fr.md) | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
|
|
4
|
-
|
|
5
|
-
Storybook para fluxogramas. Descobre automaticamente arquivos de diagramas Mermaid no seu código, organiza por categoria e renderiza em um visualizador navegável.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
## Início Rápido
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
# Inicializar — adiciona scripts + arquivo de exemplo
|
|
16
|
-
npx flowbook@latest init
|
|
17
|
-
|
|
18
|
-
# Iniciar servidor de desenvolvimento
|
|
19
|
-
npm run flowbook
|
|
20
|
-
# → http://localhost:6200
|
|
21
|
-
|
|
22
|
-
# Construir site estático
|
|
23
|
-
npm run build-flowbook
|
|
24
|
-
# → flowbook-static/
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## CLI
|
|
28
|
-
|
|
29
|
-
```
|
|
30
|
-
flowbook init Configurar Flowbook no seu projeto
|
|
31
|
-
flowbook dev [--port 6200] Iniciar o servidor de desenvolvimento
|
|
32
|
-
flowbook build [--out-dir d] Construir um site estático
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### `flowbook init`
|
|
36
|
-
|
|
37
|
-
- Adiciona os scripts `"flowbook"` e `"build-flowbook"` ao seu `package.json`
|
|
38
|
-
- Cria `flows/example.flow.md` como template inicial
|
|
39
|
-
|
|
40
|
-
### `flowbook dev`
|
|
41
|
-
|
|
42
|
-
Inicia um servidor de desenvolvimento Vite em `http://localhost:6200` com HMR. Qualquer alteração em arquivos `.flow.md` ou `.flowchart.md` é refletida instantaneamente.
|
|
43
|
-
|
|
44
|
-
### `flowbook build`
|
|
45
|
-
|
|
46
|
-
Constrói um site estático em `flowbook-static/` (configurável via `--out-dir`). Faça deploy em qualquer lugar.
|
|
47
|
-
|
|
48
|
-
## Escrevendo Arquivos de Fluxo
|
|
49
|
-
|
|
50
|
-
Crie um arquivo `.flow.md` (ou `.flowchart.md`) em qualquer lugar do seu projeto:
|
|
51
|
-
|
|
52
|
-
````markdown
|
|
53
|
-
---
|
|
54
|
-
title: Fluxo de Login
|
|
55
|
-
category: Autenticação
|
|
56
|
-
tags: [auth, login, oauth]
|
|
57
|
-
order: 1
|
|
58
|
-
description: Fluxo de autenticação de usuário com OAuth2
|
|
59
|
-
---
|
|
60
|
-
|
|
61
|
-
```mermaid
|
|
62
|
-
flowchart TD
|
|
63
|
-
A[Usuário] --> B{Autenticado?}
|
|
64
|
-
B -->|Sim| C[Dashboard]
|
|
65
|
-
B -->|Não| D[Página de Login]
|
|
66
|
-
```
|
|
67
|
-
````
|
|
68
|
-
|
|
69
|
-
O Flowbook descobre automaticamente o arquivo e o adiciona ao visualizador.
|
|
70
|
-
|
|
71
|
-
## Schema do Frontmatter
|
|
72
|
-
|
|
73
|
-
| Campo | Tipo | Obrigatório | Descrição |
|
|
74
|
-
|---------------|------------|-------------|----------------------------------------|
|
|
75
|
-
| `title` | `string` | Não | Título exibido (padrão: nome do arquivo) |
|
|
76
|
-
| `category` | `string` | Não | Categoria na barra lateral (padrão: "Uncategorized") |
|
|
77
|
-
| `tags` | `string[]` | Não | Tags filtráveis |
|
|
78
|
-
| `order` | `number` | Não | Ordem dentro da categoria (padrão: 999)|
|
|
79
|
-
| `description` | `string` | Não | Descrição na visualização detalhada |
|
|
80
|
-
|
|
81
|
-
## Descoberta de Arquivos
|
|
82
|
-
|
|
83
|
-
O Flowbook escaneia estes padrões por padrão:
|
|
84
|
-
|
|
85
|
-
```
|
|
86
|
-
**/*.flow.md
|
|
87
|
-
**/*.flowchart.md
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
Ignora `node_modules/`, `.git/` e `dist/`.
|
|
91
|
-
|
|
92
|
-
## Habilidade de Agente IA
|
|
93
|
-
|
|
94
|
-
`flowbook init` instala automaticamente habilidades de agente IA em todos os diretórios de agentes de codificação suportados.
|
|
95
|
-
Quando um agente de codificação (Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini CLI, etc.) detecta a palavra-chave **"flowbook"** no seu prompt, ele irá:
|
|
96
|
-
|
|
97
|
-
1. Analisar sua base de código em busca de fluxos lógicos (rotas de API, autenticação, gerenciamento de estado, lógica de negócios, etc.)
|
|
98
|
-
2. Configurar Flowbook se ainda não estiver inicializado
|
|
99
|
-
3. Gerar arquivos `.flow.md` com diagramas Mermaid para cada fluxo significativo
|
|
100
|
-
4. Verificar a compilação
|
|
101
|
-
|
|
102
|
-
### Instalação Manual de Habilidade
|
|
103
|
-
|
|
104
|
-
Se você não usou `flowbook init`, copie a habilidade 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 Compatíveis
|
|
145
|
-
|
|
146
|
-
| Agente | Local da Habilidade |
|
|
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
|
-
## Como Funciona
|
|
159
|
-
|
|
160
|
-
```
|
|
161
|
-
arquivos .flow.md ──→ Plugin Vite ──→ Módulo Virtual ──→ Visualizador React
|
|
162
|
-
│ │
|
|
163
|
-
├─ scan fast-glob ├─ export default { flows: [...] }
|
|
164
|
-
├─ gray-matter │
|
|
165
|
-
│ parsing └─ HMR na alteração de arquivo
|
|
166
|
-
└─ bloco mermaid
|
|
167
|
-
extração
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
1. **Descoberta** — `fast-glob` escaneia o projeto procurando `*.flow.md` / `*.flowchart.md`
|
|
171
|
-
2. **Parsing** — `gray-matter` extrai o frontmatter YAML; regex extrai blocos `` ```mermaid ``
|
|
172
|
-
3. **Módulo Virtual** — Plugin Vite serve os dados parseados como `virtual:flowbook-data`
|
|
173
|
-
4. **Renderização** — App React renderiza diagramas Mermaid via `mermaid.render()`
|
|
174
|
-
5. **HMR** — Alterações de arquivo invalidam o módulo virtual, disparando um reload
|
|
175
|
-
|
|
176
|
-
## Estrutura do Projeto
|
|
177
|
-
|
|
178
|
-
```
|
|
179
|
-
src/
|
|
180
|
-
├── types.ts # Tipos compartilhados (FlowEntry, FlowbookData)
|
|
181
|
-
├── node/
|
|
182
|
-
│ ├── cli.ts # Ponto de entrada CLI (init, dev, build)
|
|
183
|
-
│ ├── server.ts # Servidor Vite programático e build
|
|
184
|
-
│ ├── init.ts # Lógica de inicialização do projeto
|
|
185
|
-
│ ├── discovery.ts # Scanner de arquivos (fast-glob)
|
|
186
|
-
│ ├── parser.ts # Extração de frontmatter + mermaid
|
|
187
|
-
│ └── plugin.ts # Plugin de módulo virtual do Vite
|
|
188
|
-
└── client/
|
|
189
|
-
├── index.html # HTML de entrada
|
|
190
|
-
├── main.tsx # Entrada React
|
|
191
|
-
├── App.tsx # Layout com busca + barra lateral + visualizador
|
|
192
|
-
├── vite-env.d.ts # Declarações de tipo do módulo virtual
|
|
193
|
-
├── styles/globals.css # Tailwind v4 + estilos customizados
|
|
194
|
-
└── components/
|
|
195
|
-
├── Header.tsx # Logo, barra de busca, contagem de fluxos
|
|
196
|
-
├── Sidebar.tsx # Árvore de categorias colapsável
|
|
197
|
-
├── MermaidRenderer.tsx # Renderização de diagramas Mermaid
|
|
198
|
-
├── FlowView.tsx # Visualização detalhada de fluxo individual
|
|
199
|
-
└── EmptyState.tsx # Estado vazio com guia
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
## Desenvolvimento (Contribuição)
|
|
203
|
-
|
|
204
|
-
```bash
|
|
205
|
-
git clone https://github.com/Epsilondelta-ai/flowbook.git
|
|
206
|
-
cd flowbook
|
|
207
|
-
npm install
|
|
208
|
-
|
|
209
|
-
# Desenvolvimento local (usa o vite.config.ts raiz)
|
|
210
|
-
npm run dev
|
|
211
|
-
|
|
212
|
-
# Construir CLI
|
|
213
|
-
npm run build
|
|
214
|
-
|
|
215
|
-
# Testar 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 desenvolvimento com HMR
|
|
223
|
-
- **React 19** — UI
|
|
224
|
-
- **Mermaid 11** — Renderização de diagramas
|
|
225
|
-
- **Tailwind CSS v4** — Estilização
|
|
226
|
-
- **gray-matter** — Parsing de frontmatter YAML
|
|
227
|
-
- **fast-glob** — Descoberta de arquivos
|
|
228
|
-
- **tsup** — Bundler de CLI
|
|
229
|
-
- **TypeScript** — Segurança de tipos
|
|
230
|
-
|
|
231
|
-
## Licença
|
|
232
|
-
|
|
233
|
-
MIT
|
package/README.ru.md
DELETED
|
@@ -1,234 +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) | **Русский** | [Deutsch](./README.de.md)
|
|
4
|
-
|
|
5
|
-
Storybook для блок-схем. Автоматически обнаруживает файлы диаграмм Mermaid в вашем коде, организует их по категориям и отображает в удобном просмотрщике.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
## Быстрый Старт
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
# Инициализация — добавляет скрипты + файл-пример
|
|
16
|
-
npx flowbook@latest init
|
|
17
|
-
|
|
18
|
-
# Запуск сервера разработки
|
|
19
|
-
npm run flowbook
|
|
20
|
-
# → http://localhost:6200
|
|
21
|
-
|
|
22
|
-
# Сборка статического сайта
|
|
23
|
-
npm run build-flowbook
|
|
24
|
-
# → flowbook-static/
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## CLI
|
|
28
|
-
|
|
29
|
-
```
|
|
30
|
-
flowbook init Настроить Flowbook в проекте
|
|
31
|
-
flowbook dev [--port 6200] Запустить сервер разработки
|
|
32
|
-
flowbook build [--out-dir d] Собрать статический сайт
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### `flowbook init`
|
|
36
|
-
|
|
37
|
-
- Добавляет скрипты `"flowbook"` и `"build-flowbook"` в ваш `package.json`
|
|
38
|
-
- Создаёт `flows/example.flow.md` в качестве стартового шаблона
|
|
39
|
-
|
|
40
|
-
### `flowbook dev`
|
|
41
|
-
|
|
42
|
-
Запускает сервер разработки Vite на `http://localhost:6200` с поддержкой HMR. Любые изменения в файлах `.flow.md` или `.flowchart.md` отображаются мгновенно.
|
|
43
|
-
|
|
44
|
-
### `flowbook build`
|
|
45
|
-
|
|
46
|
-
Собирает статический сайт в `flowbook-static/` (настраивается через `--out-dir`). Разверните его где угодно.
|
|
47
|
-
|
|
48
|
-
## Создание Файлов Потоков
|
|
49
|
-
|
|
50
|
-
Создайте файл `.flow.md` (или `.flowchart.md`) в любом месте вашего проекта:
|
|
51
|
-
|
|
52
|
-
````markdown
|
|
53
|
-
---
|
|
54
|
-
title: Поток Авторизации
|
|
55
|
-
category: Аутентификация
|
|
56
|
-
tags: [auth, login, oauth]
|
|
57
|
-
order: 1
|
|
58
|
-
description: Поток аутентификации пользователя с OAuth2
|
|
59
|
-
---
|
|
60
|
-
|
|
61
|
-
```mermaid
|
|
62
|
-
flowchart TD
|
|
63
|
-
A[Пользователь] --> B{Авторизован?}
|
|
64
|
-
B -->|Да| C[Панель управления]
|
|
65
|
-
B -->|Нет| D[Страница входа]
|
|
66
|
-
```
|
|
67
|
-
````
|
|
68
|
-
|
|
69
|
-
Flowbook автоматически обнаружит файл и добавит его в просмотрщик.
|
|
70
|
-
|
|
71
|
-
## Схема Frontmatter
|
|
72
|
-
|
|
73
|
-
| Поле | Тип | Обязательно | Описание |
|
|
74
|
-
|---------------|------------|-------------|---------------------------------------|
|
|
75
|
-
| `title` | `string` | Нет | Отображаемый заголовок (по умолчанию: имя файла) |
|
|
76
|
-
| `category` | `string` | Нет | Категория в боковой панели (по умолчанию: "Uncategorized") |
|
|
77
|
-
| `tags` | `string[]` | Нет | Фильтруемые теги |
|
|
78
|
-
| `order` | `number` | Нет | Порядок сортировки в категории (по умолчанию: 999) |
|
|
79
|
-
| `description` | `string` | Нет | Описание в детальном просмотре |
|
|
80
|
-
|
|
81
|
-
## Обнаружение Файлов
|
|
82
|
-
|
|
83
|
-
Flowbook по умолчанию сканирует следующие шаблоны:
|
|
84
|
-
|
|
85
|
-
```
|
|
86
|
-
**/*.flow.md
|
|
87
|
-
**/*.flowchart.md
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
Игнорирует `node_modules/`, `.git/` и `dist/`.
|
|
91
|
-
|
|
92
|
-
## Навык AI-агента
|
|
93
|
-
|
|
94
|
-
`flowbook init` автоматически устанавливает навыки AI-агента во все поддерживаемые директории агентов кодирования.
|
|
95
|
-
Когда агент кодирования (Claude Code, OpenAI Codex, VS Code Copilot, Cursor, Gemini CLI и т.д.) обнаружит ключевое слово **"flowbook"** в вашем промпте, он:
|
|
96
|
-
|
|
97
|
-
1. Анализирует вашу базу кода на предмет логических потоков (API маршруты, аутентификация, управление состоянием, бизнес-логика и т.д.)
|
|
98
|
-
2. Настраивает Flowbook, если он еще не инициализирован
|
|
99
|
-
3. Генерирует файлы `.flow.md` с диаграммами Mermaid для каждого значимого потока
|
|
100
|
-
4. Проверяет сборку
|
|
101
|
-
|
|
102
|
-
### Настройка навыка вручную
|
|
103
|
-
|
|
104
|
-
Если вы не использовали `flowbook init`, скопируйте навык вручную:
|
|
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
|
-
### Осведомленные агенты
|
|
145
|
-
|
|
146
|
-
| Агент | Местонахождение навыка |
|
|
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
|
-
## Как Это Работает
|
|
159
|
-
|
|
160
|
-
```
|
|
161
|
-
файлы .flow.md ──→ Плагин Vite ──→ Виртуальный модуль ──→ React-просмотрщик
|
|
162
|
-
│ │
|
|
163
|
-
├─ сканирование ├─ export default { flows: [...] }
|
|
164
|
-
│ fast-glob │
|
|
165
|
-
├─ gray-matter └─ HMR при изменении файла
|
|
166
|
-
│ парсинг
|
|
167
|
-
└─ блок mermaid
|
|
168
|
-
извлечение
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
1. **Обнаружение** — `fast-glob` сканирует проект в поисках `*.flow.md` / `*.flowchart.md`
|
|
172
|
-
2. **Парсинг** — `gray-matter` извлекает YAML frontmatter; регулярные выражения извлекают блоки `` ```mermaid ``
|
|
173
|
-
3. **Виртуальный модуль** — Плагин Vite предоставляет распарсенные данные как `virtual:flowbook-data`
|
|
174
|
-
4. **Рендеринг** — React-приложение рендерит диаграммы Mermaid через `mermaid.render()`
|
|
175
|
-
5. **HMR** — Изменения файлов инвалидируют виртуальный модуль, запуская перезагрузку
|
|
176
|
-
|
|
177
|
-
## Структура Проекта
|
|
178
|
-
|
|
179
|
-
```
|
|
180
|
-
src/
|
|
181
|
-
├── types.ts # Общие типы (FlowEntry, FlowbookData)
|
|
182
|
-
├── node/
|
|
183
|
-
│ ├── cli.ts # Точка входа CLI (init, dev, build)
|
|
184
|
-
│ ├── server.ts # Программный сервер Vite и сборка
|
|
185
|
-
│ ├── init.ts # Логика инициализации проекта
|
|
186
|
-
│ ├── discovery.ts # Сканер файлов (fast-glob)
|
|
187
|
-
│ ├── parser.ts # Извлечение frontmatter + mermaid
|
|
188
|
-
│ └── plugin.ts # Плагин виртуального модуля Vite
|
|
189
|
-
└── client/
|
|
190
|
-
├── index.html # Входной HTML
|
|
191
|
-
├── main.tsx # Точка входа React
|
|
192
|
-
├── App.tsx # Макет с поиском + боковая панель + просмотрщик
|
|
193
|
-
├── vite-env.d.ts # Объявления типов виртуального модуля
|
|
194
|
-
├── styles/globals.css # Tailwind v4 + пользовательские стили
|
|
195
|
-
└── components/
|
|
196
|
-
├── Header.tsx # Логотип, поиск, количество потоков
|
|
197
|
-
├── Sidebar.tsx # Сворачиваемое дерево категорий
|
|
198
|
-
├── MermaidRenderer.tsx # Рендеринг диаграмм Mermaid
|
|
199
|
-
├── FlowView.tsx # Детальный просмотр отдельного потока
|
|
200
|
-
└── EmptyState.tsx # Пустое состояние с инструкцией
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
## Разработка (Вклад)
|
|
204
|
-
|
|
205
|
-
```bash
|
|
206
|
-
git clone https://github.com/Epsilondelta-ai/flowbook.git
|
|
207
|
-
cd flowbook
|
|
208
|
-
npm install
|
|
209
|
-
|
|
210
|
-
# Локальная разработка (используется корневой vite.config.ts)
|
|
211
|
-
npm run dev
|
|
212
|
-
|
|
213
|
-
# Сборка CLI
|
|
214
|
-
npm run build
|
|
215
|
-
|
|
216
|
-
# Локальное тестирование CLI
|
|
217
|
-
node dist/cli.js dev
|
|
218
|
-
node dist/cli.js build
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
## Технологический Стек
|
|
222
|
-
|
|
223
|
-
- **Vite** — Сервер разработки с HMR
|
|
224
|
-
- **React 19** — Пользовательский интерфейс
|
|
225
|
-
- **Mermaid 11** — Рендеринг диаграмм
|
|
226
|
-
- **Tailwind CSS v4** — Стилизация
|
|
227
|
-
- **gray-matter** — Парсинг YAML frontmatter
|
|
228
|
-
- **fast-glob** — Обнаружение файлов
|
|
229
|
-
- **tsup** — Сборщик CLI
|
|
230
|
-
- **TypeScript** — Типобезопасность
|
|
231
|
-
|
|
232
|
-
## Лицензия
|
|
233
|
-
|
|
234
|
-
MIT
|