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.zh-CN.md DELETED
@@ -1,233 +0,0 @@
1
- # Flowbook
2
-
3
- > [English](./README.md) | [한국어](./README.ko.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)
4
-
5
- 流程图的 Storybook。自动发现代码库中的 Mermaid 图表文件，按类别组织，并在可浏览的查看器中渲染。
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
- ## 快速开始
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
- - 在 `package.json` 中添加 `"flowbook"` 和 `"build-flowbook"` 脚本
38
- - 创建 `flows/example.flow.md` 作为入门模板
39
-
40
- ### `flowbook dev`
41
-
42
- 在 `http://localhost:6200` 启动支持 HMR 的 Vite 开发服务器。任何 `.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 Agent Skill
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. 为每个重要流程生成包含 Mermaid 图表的 `.flow.md` 文件
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
- ├─ fast-glob 扫描 ├─ export default { flows: [...] }
164
- ├─ gray-matter │
165
- │ 解析 └─ 文件更改时 HMR
166
- └─ mermaid 块
167
- 提取
168
- ```
169
-
170
- 1. **发现** — `fast-glob` 扫描项目中的 `*.flow.md` / `*.flowchart.md`
171
- 2. **解析** — `gray-matter` 提取 YAML frontmatter；正则表达式提取 `` ```mermaid `` 块
172
- 3. **虚拟模块** — Vite 插件将解析后的数据作为 `virtual:flowbook-data` 提供
173
- 4. **渲染** — React 应用通过 `mermaid.render()` 渲染 Mermaid 图表
174
- 5. **HMR** — 文件更改时使虚拟模块失效，触发重新加载
175
-
176
- ## 项目结构
177
-
178
- ```
179
- src/
180
- ├── types.ts # 共享类型 (FlowEntry, FlowbookData)
181
- ├── node/
182
- │ ├── cli.ts # CLI 入口 (init, dev, build)
183
- │ ├── server.ts # 编程式 Vite 服务器与构建
184
- │ ├── init.ts # 项目初始化逻辑
185
- │ ├── discovery.ts # 文件扫描器 (fast-glob)
186
- │ ├── parser.ts # Frontmatter + mermaid 提取
187
- │ └── plugin.ts # Vite 虚拟模块插件
188
- └── client/
189
- ├── index.html # 入口 HTML
190
- ├── main.tsx # React 入口
191
- ├── App.tsx # 搜索 + 侧边栏 + 查看器布局
192
- ├── vite-env.d.ts # 虚拟模块类型声明
193
- ├── styles/globals.css # Tailwind v4 + 自定义样式
194
- └── components/
195
- ├── Header.tsx # Logo、搜索栏、流程计数
196
- ├── Sidebar.tsx # 可折叠分类树
197
- ├── MermaidRenderer.tsx # Mermaid 图表渲染
198
- ├── FlowView.tsx # 单个流程详情视图
199
- └── EmptyState.tsx # 空状态引导
200
- ```
201
-
202
- ## 开发（贡献）
203
-
204
- ```bash
205
- git clone https://github.com/Epsilondelta-ai/flowbook.git
206
- cd flowbook
207
- npm install
208
-
209
- # 本地开发（使用根目录 vite.config.ts）
210
- npm run dev
211
-
212
- # 构建 CLI
213
- npm run build
214
-
215
- # 本地测试 CLI
216
- node dist/cli.js dev
217
- node dist/cli.js build
218
- ```
219
-
220
- ## 技术栈
221
-
222
- - **Vite** — 支持 HMR 的开发服务器
223
- - **React 19** — 用户界面
224
- - **Mermaid 11** — 图表渲染
225
- - **Tailwind CSS v4** — 样式
226
- - **gray-matter** — YAML frontmatter 解析
227
- - **fast-glob** — 文件发现
228
- - **tsup** — CLI 打包工具
229
- - **TypeScript** — 类型安全
230
-
231
- ## 许可证
232
-
233
- MIT