flowi

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Flowi - Visual Planning & Diagramming

Flowi - 可视化规划与图表制作

You are using Flowi, a visual feedback loop for planning. Instead of ASCII diagrams, you write structured JSON that renders as interactive flowcharts the user can see and edit in their browser.

您正在使用Flowi，一款用于规划的可视化反馈工具。无需使用ASCII图表，您只需编写结构化JSON，即可在用户浏览器中渲染为交互式流程图。

Workflow

工作流程

Create
```
.flowi/
```
directory in the project root if it doesn't exist
Write JSON diagram files to
```
.flowi/*.json
```
Start the viewer if not already running (tell the user to run the server)
Read back any changes the user makes visually
Iterate based on visual feedback

创建若项目根目录中不存在.flowi/目录，请创建该目录
写入将JSON图表文件写入.flowi/*.json
启动查看器 若查看器尚未运行，请启动它（告知用户运行服务器）
读取更改 读取用户通过可视化方式做出的任何更改
迭代优化 根据可视化反馈进行迭代

Starting the Viewer

启动查看器

Tell the user to run this command in a separate terminal:

bash

node ~/.claude/skills/flowi/server.js

This starts a dev server at

http://localhost:3333

that:

Renders all
```
.flowi/*.json
```
files as interactive diagrams
Live-reloads when you write new JSON
Saves the user's visual edits back to the JSON files

告诉用户在单独的终端中运行以下命令：

bash

node ~/.claude/skills/flowi/server.js

这会在

http://localhost:3333

启动一个开发服务器，该服务器具备以下功能：

将所有.flowi/*.json文件渲染为交互式图表
当您写入新JSON时自动实时重载
将用户的可视化编辑内容保存回JSON文件

JSON Schema

Each

.flowi/*.json

file represents one diagram. Use this schema:

json

{
  "title": "Diagram Title",
  "type": "flowchart",
  "nodes": [
    {
      "id": "unique-id",
      "type": "start|process|decision|end|io|database|component|note",
      "label": "Node Label",
      "description": "",
      "x": 100,
      "y": 100,
      "color": ""
    }
  ],
  "edges": [
    {
      "from": "source-node-id",
      "to": "target-node-id",
      "label": ""
    }
  ]
}

每个.flowi/*.json文件代表一个图表，请使用以下Schema：

json

{
  "title": "Diagram Title",
  "type": "flowchart",
  "nodes": [
    {
      "id": "unique-id",
      "type": "start|process|decision|end|io|database|component|note",
      "label": "Node Label",
      "description": "",
      "x": 100,
      "y": 100,
      "color": ""
    }
  ],
  "edges": [
    {
      "from": "source-node-id",
      "to": "target-node-id",
      "label": ""
    }
  ]
}

Node Types

节点类型

Type	Shape	Use For
`start`	Rounded pill (green)	Entry points
`end`	Rounded pill (red)	Exit/terminal points
`process`	Rectangle (blue)	Actions, steps, functions
`decision`	Diamond (amber)	Conditionals, branches
`io`	Parallelogram (purple)	Input/output, API calls
`database`	Cylinder (teal)	Data stores, databases
`component`	Rounded rectangle (indigo)	UI components, modules
`note`	Dashed rectangle (gray)	Annotations, comments

类型	形状	用途
`start`	圆角胶囊形（绿色）	起始点
`end`	圆角胶囊形（红色）	退出/终止点
`process`	矩形（蓝色）	操作、步骤、函数
`decision`	菱形（琥珀色）	条件判断、分支
`io`	平行四边形（紫色）	输入/输出、API调用
`database`	圆柱形（蓝绿色）	数据存储、数据库
`component`	圆角矩形（靛蓝色）	UI组件、模块
`note`	虚线矩形（灰色）	注释、说明

Diagram Types

图表类型

Use

"type"

to hint at layout:

```
"flowchart"
```
- Top-to-bottom flow (default)
```
"architecture"
```
- Free-form system diagram
```
"sequence"
```
- Left-to-right sequence
```
"statechart"
```
- State machine
```
"mockup"
```
- UI wireframe layout

使用

"type"

来指定布局类型：

```
"flowchart"
```
- 自上而下的流程（默认）
```
"architecture"
```
- 自由形式的系统图
```
"sequence"
```
- 自左向右的序列图
```
"statechart"
```
- 状态机图
```
"mockup"
```
- UI线框布局

Layout Guidelines

布局指南

Place nodes on a grid: x increments of 200, y increments of 150
Start nodes at top (y: 50), flow downward
Decision branches: place "yes" path to the right, "no" path below
Keep diagrams readable: max ~15 nodes per diagram, split into multiple files if larger

Use descriptive file names:

auth-flow.json

database-schema.json

checkout-states.json

将节点放置在网格上：x坐标增量为200，y坐标增量为150
起始节点置于顶部（y: 50），向下流动
决策分支：将“是”路径放在右侧，“否”路径放在下方
保持图表可读性：每个图表最多约15个节点，若节点过多请拆分为多个文件

使用描述性文件名：

auth-flow.json

、

database-schema.json

、

checkout-states.json

Reading User Edits

读取用户编辑内容

After the user edits a diagram visually:

Read the JSON file back from
```
.flowi/
```
Note changed positions, added/removed nodes, edited labels
Ask the user what they'd like you to do with the changes
Update your implementation plan accordingly

用户可视化编辑图表后：

从.flowi/目录中读回JSON文件
记录位置变更、节点增删、标签编辑等内容
询问用户希望如何处理这些更改
相应地更新您的实现计划

Example: Simple Auth Flow

示例：简单认证流程

Write to

.flowi/auth-flow.json

json

{
  "title": "Authentication Flow",
  "type": "flowchart",
  "nodes": [
    { "id": "start", "type": "start", "label": "User visits app", "x": 300, "y": 50 },
    { "id": "check", "type": "decision", "label": "Has session?", "x": 300, "y": 200 },
    { "id": "login", "type": "process", "label": "Show login form", "x": 100, "y": 350 },
    { "id": "auth", "type": "io", "label": "Call auth API", "x": 100, "y": 500 },
    { "id": "dashboard", "type": "process", "label": "Load dashboard", "x": 500, "y": 350 },
    { "id": "end", "type": "end", "label": "App ready", "x": 300, "y": 650 }
  ],
  "edges": [
    { "from": "start", "to": "check" },
    { "from": "check", "to": "login", "label": "No" },
    { "from": "check", "to": "dashboard", "label": "Yes" },
    { "from": "login", "to": "auth" },
    { "from": "auth", "to": "dashboard", "label": "Success" },
    { "from": "dashboard", "to": "end" }
  ]
}

写入.flowi/auth-flow.json：

json

{
  "title": "Authentication Flow",
  "type": "flowchart",
  "nodes": [
    { "id": "start", "type": "start", "label": "User visits app", "x": 300, "y": 50 },
    { "id": "check", "type": "decision", "label": "Has session?", "x": 300, "y": 200 },
    { "id": "login", "type": "process", "label": "Show login form", "x": 100, "y": 350 },
    { "id": "auth", "type": "io", "label": "Call auth API", "x": 100, "y": 500 },
    { "id": "dashboard", "type": "process", "label": "Load dashboard", "x": 500, "y": 350 },
    { "id": "end", "type": "end", "label": "App ready", "x": 300, "y": 650 }
  ],
  "edges": [
    { "from": "start", "to": "check" },
    { "from": "check", "to": "login", "label": "No" },
    { "from": "check", "to": "dashboard", "label": "Yes" },
    { "from": "login", "to": "auth" },
    { "from": "auth", "to": "dashboard", "label": "Success" },
    { "from": "dashboard", "to": "end" }
  ]
}

Best Practices

最佳实践

Always create the
```
.flowi/
```
directory first with
```
mkdir -p .flowi
```
Write one diagram per concept/flow
After writing JSON, remind the user to check
```
http://localhost:3333
```
When the user says they've made edits, read the file back before proceeding
Use the diagram as the source of truth for planning, then implement based on it

始终先使用
```
mkdir -p .flowi
```
创建.flowi/目录
每个概念/流程对应一个图表
写入JSON后，提醒用户查看
```
http://localhost:3333
```
当用户表示已进行编辑时，先读回文件再继续
将图表作为规划的事实依据，然后基于图表进行实现