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.
- 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
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import { existsSync, mkdirSync, copyFileSync } from "node:fs";
|
|
2
|
+
import { resolve, dirname } from "node:path";
|
|
3
|
+
import { fileURLToPath } from "node:url";
|
|
4
|
+
import { homedir } from "node:os";
|
|
5
|
+
|
|
6
|
+
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
7
|
+
|
|
8
|
+
interface AgentConfig {
|
|
9
|
+
name: string;
|
|
10
|
+
aliases: string[];
|
|
11
|
+
skill: { project: string; global: string };
|
|
12
|
+
command?: { project: string; global: string; format: "frontmatter" | "plain" };
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const AGENTS: AgentConfig[] = [
|
|
16
|
+
{
|
|
17
|
+
name: "Claude Code",
|
|
18
|
+
aliases: ["claude"],
|
|
19
|
+
skill: {
|
|
20
|
+
project: ".claude/skills/flowbook",
|
|
21
|
+
global: ".claude/skills/flowbook",
|
|
22
|
+
},
|
|
23
|
+
command: {
|
|
24
|
+
project: ".claude/commands",
|
|
25
|
+
global: ".claude/commands",
|
|
26
|
+
format: "frontmatter",
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
name: "OpenAI Codex",
|
|
31
|
+
aliases: ["codex"],
|
|
32
|
+
skill: {
|
|
33
|
+
project: ".agents/skills/flowbook",
|
|
34
|
+
global: ".codex/skills/flowbook",
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: "VS Code / GitHub Copilot",
|
|
39
|
+
aliases: ["copilot", "vscode"],
|
|
40
|
+
skill: {
|
|
41
|
+
project: ".github/skills/flowbook",
|
|
42
|
+
global: ".copilot/skills/flowbook",
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "Google Antigravity",
|
|
47
|
+
aliases: ["antigravity"],
|
|
48
|
+
skill: {
|
|
49
|
+
project: ".agent/skills/flowbook",
|
|
50
|
+
global: ".gemini/antigravity/skills/flowbook",
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
name: "Gemini CLI",
|
|
55
|
+
aliases: ["gemini"],
|
|
56
|
+
skill: {
|
|
57
|
+
project: ".gemini/skills/flowbook",
|
|
58
|
+
global: ".gemini/skills/flowbook",
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: "Cursor",
|
|
63
|
+
aliases: ["cursor"],
|
|
64
|
+
skill: {
|
|
65
|
+
project: ".cursor/skills/flowbook",
|
|
66
|
+
global: ".cursor/skills/flowbook",
|
|
67
|
+
},
|
|
68
|
+
command: {
|
|
69
|
+
project: ".cursor/commands",
|
|
70
|
+
global: ".cursor/commands",
|
|
71
|
+
format: "plain",
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
name: "Windsurf",
|
|
76
|
+
aliases: ["windsurf"],
|
|
77
|
+
skill: {
|
|
78
|
+
project: ".windsurf/skills/flowbook",
|
|
79
|
+
global: ".codeium/windsurf/skills/flowbook",
|
|
80
|
+
},
|
|
81
|
+
command: {
|
|
82
|
+
project: ".windsurf/workflows",
|
|
83
|
+
global: ".codeium/windsurf/workflows",
|
|
84
|
+
format: "plain",
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
name: "AmpCode",
|
|
89
|
+
aliases: ["amp"],
|
|
90
|
+
skill: {
|
|
91
|
+
project: ".amp/skills/flowbook",
|
|
92
|
+
global: ".config/agents/skills/flowbook",
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
name: "OpenCode",
|
|
97
|
+
aliases: ["opencode"],
|
|
98
|
+
skill: {
|
|
99
|
+
project: ".opencode/skills/flowbook",
|
|
100
|
+
global: ".config/opencode/skills/flowbook",
|
|
101
|
+
},
|
|
102
|
+
command: {
|
|
103
|
+
project: ".opencode/command",
|
|
104
|
+
global: ".config/opencode/command",
|
|
105
|
+
format: "frontmatter",
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
];
|
|
109
|
+
|
|
110
|
+
function getSkillSrc(): string {
|
|
111
|
+
return resolve(__dirname, "..", "src", "skills", "flowbook", "SKILL.md");
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
function getCommandSrc(format: "frontmatter" | "plain"): string {
|
|
115
|
+
const file = format === "frontmatter" ? "flowbook.md" : "flowbook.plain.md";
|
|
116
|
+
return resolve(__dirname, "..", "src", "commands", file);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
function resolveAgents(agentArg: string): AgentConfig[] {
|
|
120
|
+
if (agentArg === "all") return AGENTS;
|
|
121
|
+
|
|
122
|
+
const lower = agentArg.toLowerCase();
|
|
123
|
+
const found = AGENTS.filter(
|
|
124
|
+
(a) =>
|
|
125
|
+
a.aliases.includes(lower) ||
|
|
126
|
+
a.name.toLowerCase().includes(lower),
|
|
127
|
+
);
|
|
128
|
+
|
|
129
|
+
if (found.length === 0) {
|
|
130
|
+
console.error(` Unknown agent: "${agentArg}"`);
|
|
131
|
+
console.error(` Available: all, ${AGENTS.flatMap((a) => a.aliases).join(", ")}`);
|
|
132
|
+
process.exit(1);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
return found;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
function installFile(src: string, destDir: string, destFilename: string): boolean {
|
|
139
|
+
const dest = resolve(destDir, destFilename);
|
|
140
|
+
if (existsSync(dest)) return false;
|
|
141
|
+
mkdirSync(destDir, { recursive: true });
|
|
142
|
+
copyFileSync(src, dest);
|
|
143
|
+
return true;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
export function installSkills(agentArg: string, global: boolean): void {
|
|
147
|
+
const agents = resolveAgents(agentArg);
|
|
148
|
+
const base = global ? homedir() : process.cwd();
|
|
149
|
+
const skillSrc = getSkillSrc();
|
|
150
|
+
|
|
151
|
+
if (!existsSync(skillSrc)) {
|
|
152
|
+
console.error(" ✗ Skill source file not found. Reinstall flowbook.");
|
|
153
|
+
process.exit(1);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
let skillCount = 0;
|
|
157
|
+
let cmdCount = 0;
|
|
158
|
+
|
|
159
|
+
for (const agent of agents) {
|
|
160
|
+
const skillDir = resolve(base, global ? agent.skill.global : agent.skill.project);
|
|
161
|
+
if (installFile(skillSrc, skillDir, "SKILL.md")) {
|
|
162
|
+
skillCount++;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
if (agent.command) {
|
|
166
|
+
const cmdSrc = getCommandSrc(agent.command.format);
|
|
167
|
+
if (existsSync(cmdSrc)) {
|
|
168
|
+
const cmdDir = resolve(base, global ? agent.command.global : agent.command.project);
|
|
169
|
+
if (installFile(cmdSrc, cmdDir, "flowbook.md")) {
|
|
170
|
+
cmdCount++;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
const scope = global ? "global" : "project";
|
|
177
|
+
const agentNames = agents.map((a) => a.name).join(", ");
|
|
178
|
+
|
|
179
|
+
if (skillCount > 0 || cmdCount > 0) {
|
|
180
|
+
if (skillCount > 0) console.log(` ✓ Installed skill to ${skillCount} ${scope} director${skillCount > 1 ? "ies" : "y"}`);
|
|
181
|
+
if (cmdCount > 0) console.log(` ✓ Installed /flowbook command to ${cmdCount} ${scope} director${cmdCount > 1 ? "ies" : "y"}`);
|
|
182
|
+
console.log(` Agents: ${agentNames}`);
|
|
183
|
+
} else {
|
|
184
|
+
console.log(` ✓ Already installed for: ${agentNames}`);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/** Used by init.ts — installs skills only (no commands) to all agents at project level */
|
|
189
|
+
export function installAllProjectSkills(): number {
|
|
190
|
+
const cwd = process.cwd();
|
|
191
|
+
const skillSrc = getSkillSrc();
|
|
192
|
+
if (!existsSync(skillSrc)) return 0;
|
|
193
|
+
|
|
194
|
+
let installed = 0;
|
|
195
|
+
for (const agent of AGENTS) {
|
|
196
|
+
const dir = resolve(cwd, agent.skill.project);
|
|
197
|
+
if (installFile(skillSrc, dir, "SKILL.md")) {
|
|
198
|
+
installed++;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
return installed;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
export function printSkillUsage(): void {
|
|
205
|
+
console.log(`
|
|
206
|
+
flowbook skill — Install AI agent skill & /flowbook command
|
|
207
|
+
|
|
208
|
+
Usage:
|
|
209
|
+
flowbook skill <agent> Install to project
|
|
210
|
+
flowbook skill <agent> --global Install globally
|
|
211
|
+
flowbook skill <agent> -g Install globally (short)
|
|
212
|
+
|
|
213
|
+
Agents:
|
|
214
|
+
all All supported agents
|
|
215
|
+
claude Claude Code
|
|
216
|
+
codex OpenAI Codex
|
|
217
|
+
copilot VS Code / GitHub Copilot
|
|
218
|
+
antigravity Google Antigravity
|
|
219
|
+
gemini Gemini CLI
|
|
220
|
+
cursor Cursor
|
|
221
|
+
windsurf Windsurf (Codeium)
|
|
222
|
+
amp AmpCode
|
|
223
|
+
opencode OpenCode / oh-my-opencode
|
|
224
|
+
|
|
225
|
+
Examples:
|
|
226
|
+
flowbook skill all Install to all agents (project)
|
|
227
|
+
flowbook skill opencode -g Install globally for OpenCode
|
|
228
|
+
flowbook skill claude --global Install globally for Claude Code
|
|
229
|
+
`);
|
|
230
|
+
}
|
package/README.de.md
DELETED
|
@@ -1,219 +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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
### Fähigkeit über CLI installieren
|
|
103
|
-
|
|
104
|
-
Sie können die Fähigkeit auch eigenständig über [skills.sh](https://skills.sh) installieren:
|
|
105
|
-
|
|
106
|
-
```bash
|
|
107
|
-
npx skills add Epsilondelta-ai/flowbook
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
Erkennt automatisch Ihre installierten Codierungs-Agenten und installiert die Fähigkeit in die richtigen Verzeichnisse.
|
|
111
|
-
|
|
112
|
-
### Kompatible Agenten
|
|
113
|
-
|
|
114
|
-
| Agent | Fähigkeitsort |
|
|
115
|
-
|-------|---------------|
|
|
116
|
-
| Claude Code | `.claude/skills/flowbook/SKILL.md` |
|
|
117
|
-
| OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
|
|
118
|
-
| VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
|
|
119
|
-
| Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
|
|
120
|
-
| Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
|
|
121
|
-
| Cursor | `.cursor/skills/flowbook/SKILL.md` |
|
|
122
|
-
| Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
|
|
123
|
-
| AmpCode | `.amp/skills/flowbook/SKILL.md` |
|
|
124
|
-
| OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
|
|
125
|
-
|
|
126
|
-
<details>
|
|
127
|
-
<summary>Manuelle Fähigkeitsinstallation</summary>
|
|
128
|
-
|
|
129
|
-
Wenn Sie `flowbook init` oder `npx skills add` nicht verwendet haben, kopieren Sie die Fähigkeit manuell:
|
|
130
|
-
|
|
131
|
-
```bash
|
|
132
|
-
# Beispiel: Claude Code
|
|
133
|
-
mkdir -p .claude/skills/flowbook
|
|
134
|
-
cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
|
|
135
|
-
|
|
136
|
-
# Beispiel: Cursor
|
|
137
|
-
mkdir -p .cursor/skills/flowbook
|
|
138
|
-
cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
Ersetzen Sie das Verzeichnis durch den entsprechenden Pfad aus der Tabelle der kompatiblen Agenten.
|
|
142
|
-
|
|
143
|
-
</details>
|
|
144
|
-
## Funktionsweise
|
|
145
|
-
|
|
146
|
-
```
|
|
147
|
-
.flow.md-Dateien ──→ Vite-Plugin ──→ Virtuelles Modul ──→ React-Viewer
|
|
148
|
-
│ │
|
|
149
|
-
├─ fast-glob-Scan ├─ export default { flows: [...] }
|
|
150
|
-
├─ gray-matter │
|
|
151
|
-
│ Parsing └─ HMR bei Dateiänderung
|
|
152
|
-
└─ Mermaid-Block
|
|
153
|
-
Extraktion
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
1. **Erkennung** — `fast-glob` durchsucht das Projekt nach `*.flow.md` / `*.flowchart.md`
|
|
157
|
-
2. **Parsing** — `gray-matter` extrahiert YAML-Frontmatter; Regex extrahiert `` ```mermaid ``-Blöcke
|
|
158
|
-
3. **Virtuelles Modul** — Vite-Plugin stellt geparste Daten als `virtual:flowbook-data` bereit
|
|
159
|
-
4. **Rendering** — React-App rendert Mermaid-Diagramme über `mermaid.render()`
|
|
160
|
-
5. **HMR** — Dateiänderungen invalidieren das virtuelle Modul und lösen ein Neuladen aus
|
|
161
|
-
|
|
162
|
-
## Projektstruktur
|
|
163
|
-
|
|
164
|
-
```
|
|
165
|
-
src/
|
|
166
|
-
├── types.ts # Gemeinsame Typen (FlowEntry, FlowbookData)
|
|
167
|
-
├── node/
|
|
168
|
-
│ ├── cli.ts # CLI-Einstiegspunkt (init, dev, build)
|
|
169
|
-
│ ├── server.ts # Programmatischer Vite-Server & Build
|
|
170
|
-
│ ├── init.ts # Projekt-Initialisierungslogik
|
|
171
|
-
│ ├── discovery.ts # Datei-Scanner (fast-glob)
|
|
172
|
-
│ ├── parser.ts # Frontmatter + Mermaid-Extraktion
|
|
173
|
-
│ └── plugin.ts # Vite-Plugin für virtuelles Modul
|
|
174
|
-
└── client/
|
|
175
|
-
├── index.html # Einstiegs-HTML
|
|
176
|
-
├── main.tsx # React-Einstiegspunkt
|
|
177
|
-
├── App.tsx # Layout mit Suche + Seitenleiste + Viewer
|
|
178
|
-
├── vite-env.d.ts # Typdeklarationen für virtuelles Modul
|
|
179
|
-
├── styles/globals.css # Tailwind v4 + benutzerdefinierte Stile
|
|
180
|
-
└── components/
|
|
181
|
-
├── Header.tsx # Logo, Suchleiste, Flow-Anzahl
|
|
182
|
-
├── Sidebar.tsx # Einklappbarer Kategoriebaum
|
|
183
|
-
├── MermaidRenderer.tsx # Mermaid-Diagramm-Rendering
|
|
184
|
-
├── FlowView.tsx # Einzelne Flow-Detailansicht
|
|
185
|
-
└── EmptyState.tsx # Leerzustand mit Anleitung
|
|
186
|
-
```
|
|
187
|
-
|
|
188
|
-
## Entwicklung (Beitragen)
|
|
189
|
-
|
|
190
|
-
```bash
|
|
191
|
-
git clone https://github.com/Epsilondelta-ai/flowbook.git
|
|
192
|
-
cd flowbook
|
|
193
|
-
npm install
|
|
194
|
-
|
|
195
|
-
# Lokale Entwicklung (verwendet die Root-vite.config.ts)
|
|
196
|
-
npm run dev
|
|
197
|
-
|
|
198
|
-
# CLI erstellen
|
|
199
|
-
npm run build
|
|
200
|
-
|
|
201
|
-
# CLI lokal testen
|
|
202
|
-
node dist/cli.js dev
|
|
203
|
-
node dist/cli.js build
|
|
204
|
-
```
|
|
205
|
-
|
|
206
|
-
## Technologie-Stack
|
|
207
|
-
|
|
208
|
-
- **Vite** — Entwicklungsserver mit HMR
|
|
209
|
-
- **React 19** — Benutzeroberfläche
|
|
210
|
-
- **Mermaid 11** — Diagramm-Rendering
|
|
211
|
-
- **Tailwind CSS v4** — Styling
|
|
212
|
-
- **gray-matter** — YAML-Frontmatter-Parsing
|
|
213
|
-
- **fast-glob** — Datei-Erkennung
|
|
214
|
-
- **tsup** — CLI-Bundler
|
|
215
|
-
- **TypeScript** — Typsicherheit
|
|
216
|
-
|
|
217
|
-
## Lizenz
|
|
218
|
-
|
|
219
|
-
MIT
|
package/README.es.md
DELETED
|
@@ -1,219 +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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
### Instalar Habilidad via CLI
|
|
103
|
-
|
|
104
|
-
También puedes instalar la habilidad de forma independiente usando [skills.sh](https://skills.sh):
|
|
105
|
-
|
|
106
|
-
```bash
|
|
107
|
-
npx skills add Epsilondelta-ai/flowbook
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
Detecta automáticamente tus agentes de codificación instalados e instala la habilidad en los directorios correctos.
|
|
111
|
-
|
|
112
|
-
### Agentes Compatibles
|
|
113
|
-
|
|
114
|
-
| Agente | Ubicación de Habilidad |
|
|
115
|
-
|-------|---------------|
|
|
116
|
-
| Claude Code | `.claude/skills/flowbook/SKILL.md` |
|
|
117
|
-
| OpenAI Codex | `.agents/skills/flowbook/SKILL.md` |
|
|
118
|
-
| VS Code / GitHub Copilot | `.github/skills/flowbook/SKILL.md` |
|
|
119
|
-
| Google Antigravity | `.agent/skills/flowbook/SKILL.md` |
|
|
120
|
-
| Gemini CLI | `.gemini/skills/flowbook/SKILL.md` |
|
|
121
|
-
| Cursor | `.cursor/skills/flowbook/SKILL.md` |
|
|
122
|
-
| Windsurf (Codeium) | `.windsurf/skills/flowbook/SKILL.md` |
|
|
123
|
-
| AmpCode | `.amp/skills/flowbook/SKILL.md` |
|
|
124
|
-
| OpenCode / oh-my-opencode | `.opencode/skills/flowbook/SKILL.md` |
|
|
125
|
-
|
|
126
|
-
<details>
|
|
127
|
-
<summary>Instalación Manual de Habilidad</summary>
|
|
128
|
-
|
|
129
|
-
Si no usaste `flowbook init` ni `npx skills add`, copia la habilidad manualmente:
|
|
130
|
-
|
|
131
|
-
```bash
|
|
132
|
-
# Ejemplo: Claude Code
|
|
133
|
-
mkdir -p .claude/skills/flowbook
|
|
134
|
-
cp node_modules/flowbook/src/skills/flowbook/SKILL.md .claude/skills/flowbook/
|
|
135
|
-
|
|
136
|
-
# Ejemplo: Cursor
|
|
137
|
-
mkdir -p .cursor/skills/flowbook
|
|
138
|
-
cp node_modules/flowbook/src/skills/flowbook/SKILL.md .cursor/skills/flowbook/
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
Reemplaza el directorio con la ruta apropiada de la tabla de Agentes Compatibles.
|
|
142
|
-
|
|
143
|
-
</details>
|
|
144
|
-
## Cómo Funciona
|
|
145
|
-
|
|
146
|
-
```
|
|
147
|
-
archivos .flow.md ──→ Plugin Vite ──→ Módulo Virtual ──→ Visor React
|
|
148
|
-
│ │
|
|
149
|
-
├─ escaneo fast-glob ├─ export default { flows: [...] }
|
|
150
|
-
├─ gray-matter │
|
|
151
|
-
│ parseo └─ HMR en cambio de archivo
|
|
152
|
-
└─ bloque mermaid
|
|
153
|
-
extracción
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
1. **Descubrimiento** — `fast-glob` escanea el proyecto buscando `*.flow.md` / `*.flowchart.md`
|
|
157
|
-
2. **Parseo** — `gray-matter` extrae el frontmatter YAML; regex extrae bloques `` ```mermaid ``
|
|
158
|
-
3. **Módulo Virtual** — El plugin de Vite sirve los datos parseados como `virtual:flowbook-data`
|
|
159
|
-
4. **Renderizado** — La app React renderiza diagramas Mermaid via `mermaid.render()`
|
|
160
|
-
5. **HMR** — Los cambios en archivos invalidan el módulo virtual, disparando una recarga
|
|
161
|
-
|
|
162
|
-
## Estructura del Proyecto
|
|
163
|
-
|
|
164
|
-
```
|
|
165
|
-
src/
|
|
166
|
-
├── types.ts # Tipos compartidos (FlowEntry, FlowbookData)
|
|
167
|
-
├── node/
|
|
168
|
-
│ ├── cli.ts # Punto de entrada CLI (init, dev, build)
|
|
169
|
-
│ ├── server.ts # Servidor Vite programático y build
|
|
170
|
-
│ ├── init.ts # Lógica de inicialización del proyecto
|
|
171
|
-
│ ├── discovery.ts # Escáner de archivos (fast-glob)
|
|
172
|
-
│ ├── parser.ts # Extracción de frontmatter + mermaid
|
|
173
|
-
│ └── plugin.ts # Plugin de módulo virtual de Vite
|
|
174
|
-
└── client/
|
|
175
|
-
├── index.html # HTML de entrada
|
|
176
|
-
├── main.tsx # Entrada React
|
|
177
|
-
├── App.tsx # Layout con búsqueda + barra lateral + visor
|
|
178
|
-
├── vite-env.d.ts # Declaraciones de tipo del módulo virtual
|
|
179
|
-
├── styles/globals.css # Tailwind v4 + estilos personalizados
|
|
180
|
-
└── components/
|
|
181
|
-
├── Header.tsx # Logo, barra de búsqueda, conteo de flujos
|
|
182
|
-
├── Sidebar.tsx # Árbol de categorías colapsable
|
|
183
|
-
├── MermaidRenderer.tsx # Renderizado de diagramas Mermaid
|
|
184
|
-
├── FlowView.tsx # Vista detallada de flujo individual
|
|
185
|
-
└── EmptyState.tsx # Estado vacío con guía
|
|
186
|
-
```
|
|
187
|
-
|
|
188
|
-
## Desarrollo (Contribución)
|
|
189
|
-
|
|
190
|
-
```bash
|
|
191
|
-
git clone https://github.com/Epsilondelta-ai/flowbook.git
|
|
192
|
-
cd flowbook
|
|
193
|
-
npm install
|
|
194
|
-
|
|
195
|
-
# Desarrollo local (usa el vite.config.ts raíz)
|
|
196
|
-
npm run dev
|
|
197
|
-
|
|
198
|
-
# Construir CLI
|
|
199
|
-
npm run build
|
|
200
|
-
|
|
201
|
-
# Probar CLI localmente
|
|
202
|
-
node dist/cli.js dev
|
|
203
|
-
node dist/cli.js build
|
|
204
|
-
```
|
|
205
|
-
|
|
206
|
-
## Stack Tecnológico
|
|
207
|
-
|
|
208
|
-
- **Vite** — Servidor de desarrollo con HMR
|
|
209
|
-
- **React 19** — UI
|
|
210
|
-
- **Mermaid 11** — Renderizado de diagramas
|
|
211
|
-
- **Tailwind CSS v4** — Estilos
|
|
212
|
-
- **gray-matter** — Parseo de frontmatter YAML
|
|
213
|
-
- **fast-glob** — Descubrimiento de archivos
|
|
214
|
-
- **tsup** — Bundler de CLI
|
|
215
|
-
- **TypeScript** — Seguridad de tipos
|
|
216
|
-
|
|
217
|
-
## Licencia
|
|
218
|
-
|
|
219
|
-
MIT
|