服务器端图片创建

此示例演示了如何在服务器端创建 React Flow 图的静态图片。该应用允许你与屏幕左侧的节点进行交互，同时自动生成并在右侧显示相应的流图。该实现使用 React Flow 新的静态渲染功能并结合 Puppeteer 来截取屏幕截图。

¥This example demonstrates how to create static images of React Flow graphs on the server side. The application lets you interact with nodes on the left side of the screen while automatically generating and displaying the corresponding flow image on the right. The implementation uses React Flow’s new static rendering capabilities combined with Puppeteer to capture screenshots.

关于此 Pro 示例

¥About this Pro Example

• 依赖：@xyflow/react , express , puppeteer , react , react-dom , zustand , cors 

  ¥Dependencies: @xyflow/react , express , puppeteer , react , react-dom , zustand , cors 

• 展示 React Flow 的服务器端渲染功能（自 v12 起可用）

  ¥Showcases React Flow’s server-side rendering capabilities (available since v12)

• 包含完整的图片生成后端实现。

  ¥Includes a complete backend implementation for image generation

• 提供 Dockerfile 配置，用于容器化部署

  ¥Provides Dockerfile configuration for containerized deployment

• 许可证：xyflow 专业版许可证 

  ¥License: xyflow Pro License