Flowy - 流程图到PDF生成器
一个创建流程图并将其导出为PDF文档的Node.js应用程序。内置MCP（模型上下文协议）集成，可与Claude Desktop无缝使用。
特性
- 创建流程图：使用自定义节点和连接构建流程图
- 手动定位：使用专用工具精确控制节点定位
- PDF导出：生成专业PDF文档（.PDF）
- MCP集成：直接从Claude Desktop与MCP服务器一起使用
- 互动演示：运行完整的用户登录流程示例
安装
先决条件
- Node.js（v16或更高版本）
- npm或纱线
设置
- 克隆或下载项目：
git clone
cd flowy- 安装依赖项：
npm install- 运行演示以测试安装：
npm run demo用法
命令行演示
运行交互式演示，创建完整的用户登录流程：
npm run demo此演示将：
- 创建一个名为“用户登录流程”的新流程图
- 添加5个节点（登录屏幕、验证凭据、成功页面、错误页面、忘记密码）
- 用标记的箭头连接节点
- 使用定位工具手动定位节点
- 导出为PDF（.PDF文件）
MCP服务器集成
该应用程序包括一个MCP服务器，可以与Claude Desktop集成，用于交互式流程图创建。
可用的MCP工具
create_flowchart-创建新的空流程图add_node-将节点添加到现有流程图中add_connection-在两个节点之间添加连接set_position-为节点设置精确位置resize_node-调整节点大小以适应内容get_bounding_box-获取边界框信息get_connector_points-获得最佳连接点export_pdf-将流程图导出为PDF
Claude桌面MCP设置
要将Flowy与Claude Desktop一起使用，请将以下配置添加到您的Claude Desktop设置中：
1.找到Claude桌面配置
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%/Claude/claude_desktop_config.json
2.添加MCP服务器配置
添加或更新 mcpServers 配置文件中的部分：
{
"mcpServers": {
"flowy": {
"command": "node",
"args": ["src/server.js"],
"cwd": "/path/to/your/flowy/directory"
}
}
}重要：替换 /path/to/your/flowy/directory 带有Flowy安装目录的实际绝对路径。
3.重新启动克劳德桌面
保存配置后，完全重新启动Claude Desktop以使更改生效。
4.验证MCP集成
在Claude Desktop中，您现在应该能够：
- 让Claude使用流程图工具创建流程图
- 以交互方式添加节点和连接
- 精确定位节点
- 导出为PDF
对话示例：
You: Create a flowchart for a simple approval process
Claude: I'll create a flowchart for an approval process using the available tools...Claude Desktop使用示例
配置完MCP服务器后，您可以像这样与Claude Desktop交互：
Create a flowchart called "Order Processing" with these steps:
1. Receive Order
2. Check Inventory
3. Process Payment
4. Ship Order
5. Send Confirmation
Connect them in sequence and add a branch from Check Inventory to "Out of Stock" if inventory is low.Claude将使用MCP工具：
- 创建流程图
- 添加所有节点
- 创建连接
- 手动定位节点
- 导出为PDF
api参考
流程图工具
create_flowchart(title)
- 标题：String-流程图的标题
- 退货：流程图ID
add_node(flowchartId, text, positionHint)
- 流程图Id：String-流程图的ID
- 文本：String-节点的文本内容
- 位置提示：Object-可选位置提示
{x: number, y: number} - 退货：节点ID
add_connection(flowchartId, sourceNodeId, targetNodeId, label)
- 流程图Id：String-流程图的ID
- 源节点ID：String-源节点的ID
- 目标NodeId：String-目标节点的ID
- 标签：String-连接的可选标签
set_position(flowchartId, nodeId, x, y)
- 流程图Id：String-流程图的ID
- nodeId：String-要定位的节点的ID
- 英语字母表的第24个字母：数字-X坐标，单位为英寸
- y：数字-Y坐标，单位为英寸
resize_node(flowchartId, nodeId, width, height)
- 流程图Id：String-流程图的ID
- nodeId：String-要调整大小的节点的ID
- 宽度：数字-宽度（英寸）
- 高度：数字-高度（英寸）
get_bounding_box(flowchartId, nodeIds)
- 流程图Id：String-流程图的ID
- 节点ID：Array-用于获取边界框的节点ID数组
- 退货：边界框信息
get_connector_points(flowchartId, sourceNodeId, targetNodeId)
- 流程图Id：String-流程图的ID
- 源节点ID：String-源节点的ID
- 目标NodeId：String-目标节点的ID
- 退货：最佳连接点
export_pdf(flowchartId, filename)
- 流程图Id：String-流程图的ID
- 文件名：String-输出文件名（不带扩展名）
- 退货：带有PDF下载链接和base64数据的文本响应
发展
运行测试
# Run all tests
npm test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coverage启动MCP服务器
# Start the MCP server
npm start
# Start with auto-reload for development
npm run dev文件结构
flowy/
├── src/
│ ├── models/
│ │ ├── flowchart.js # Flowchart model
│ │ └── node.js # Node model
│ ├── tools/
│ │ ├── flowchart-tools.js # MCP tool implementations
│ │ └── layout-engine.js # Layout algorithm
│ ├── utils/
│ │ ├── pdf-generator.js # PDF generation
│ │ ├── validation.js # Input validation
│ │ └── errors.js # Custom error classes
│ └── server.js # MCP server entry point
├── tests/ # Test files
├── demo.js # Interactive demo script
├── package.json
└── README.md故障排除
常见问题
- MCP服务器未连接：确保路径
claude_desktop_config.json是正确和绝对的 - PDF生成失败：检查是否安装了所有必需的依赖项
- 定位问题：使用定位工具正确排列节点
调试模式
要启用调试日志记录，请设置 DEBUG 环境变量：
DEBUG=flowy npm start贡献
- 分叉存储库
- 创建要素分支
- 进行更改
- 添加新功能的测试
- 运行测试套件
- 提交拉取请求
许可证
ISC许可证-有关详细信息，请参阅许可证文件。