docs(readme): FlowGram V1.0 README (#931)

* docs(readme): flowgram readme update

* docs(readme): add features

* docs(readme): chinese version

* docs(readme): add multi-language READMEs

* fix: typo

* docs(readme): demo add codesandbox link

* docs(readme): sync features description and links across all language versions

README.md

@@ -1,140 +1,91 @@
-# FlowGram.AI
-
-FlowGram is a node-based flow building engine that helps developers quickly create workflows in either fixed layout or
-free connection layout modes. It provides a set of interaction best practices and is particularly suitable for visual
-workflows with clear inputs and outputs.
-
-In the current AI boom, we are also focusing on how to empower workflows with AI capabilities, hence the AI suffix in
-our name.
+![Image](https://github.com/user-attachments/assets/4f9dfa0e-e600-4d4e-9e73-c919184f7573)
 
 <div align="center">
 
-[![License](https://img.shields.io/github/license/bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE)
-[![@flowgram.ai/editor](https://img.shields.io/npm/dm/%40flowgram.ai%2Fcore
-)](https://www.npmjs.com/package/@flowgram.ai/editor)
-[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bytedance/flowgram.ai)
-[![掘金](https://img.shields.io/badge/掘金-FFFFFF?logo=juejin&logoColor=%23007FFF)](https://juejin.cn/column/7479814468601315362)
-
+[![License](https://img.shields.io/github/license/bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE) [![@flowgram.ai/editor](https://img.shields.io/npm/dm/%40flowgram.ai%2Fcore)](https://www.npmjs.com/package/@flowgram.ai/editor) [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bytedance/flowgram.ai) [![juejin](https://img.shields.io/badge/juejin-FFFFFF?logo=juejin&logoColor=%23007FFF)](https://juejin.cn/column/7479814468601315362)
 
 [![](https://trendshift.io/api/badge/repositories/13877)](https://trendshift.io/repositories/13877)
 
 </div>
 
-## 📖 Documentation
+# FlowGram｜Workflow development framework
 
-- [Official Documentation](https://flowgram.ai/)
-- [Contributing Guidelines](https://github.com/bytedance/flowgram.ai/blob/main/CONTRIBUTING.md)
-
-## 📦 Packages
-
-| Package                                                                   | Description         | Version                                                                                                                                     |
-|---------------------------------------------------------------------------|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
-| [@flowgram.ai/create-app](./apps/create-app)                              | App Creator         | [![npm](https://img.shields.io/npm/v/@flowgram.ai/create-app.svg)](https://www.npmjs.com/package/@flowgram.ai/create-app)                   |
-| [@flowgram.ai/fixed-layout-editor](./packages/client/fixed-layout-editor) | Fixed Layout Editor | [![npm](https://img.shields.io/npm/v/@flowgram.ai/fixed-layout-editor.svg)](https://www.npmjs.com/package/@flowgram.ai/fixed-layout-editor) |
-| [@flowgram.ai/free-layout-editor](./packages/client/free-layout-editor)   | Free Layout Editor  | [![npm](https://img.shields.io/npm/v/@flowgram.ai/free-layout-editor.svg)](https://www.npmjs.com/package/@flowgram.ai/free-layout-editor)   |
-
-## 🎮 Examples
-
-<div>
-  <p>
-    <a href="https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html">
-        Fixed Layout
-    </a>
-  </p>
-  <p>
-    Fixed layout where nodes can be dragged to specified positions, with support for compound nodes like branches and loops.
-  </p>
-  <p>
-    <img src="./apps/docs/src/public/fixed-layout/fixed-layout-demo.gif"/>
-  </p>
-  </div>
-  <div>
-  <p>
-    <a href="https://flowgram.ai/examples/free-layout/free-feature-overview.html">
-      Free Layout
-    </a>
-  </p>
-  <p>
-      Free layout where nodes can be placed anywhere and connected using free-form lines.
-  </p>
-  <p>
-    <img src="./apps/docs/src/public/free-layout/free-layout-demo.gif"/>
-  </p>
-</div>
+[English](README.md) | [中文](README_ZH.md) | [Español](README_ES.md) | [Русский](README_RU.md) | [Português](README_PT.md) | [Deutsch](README_DE.md) | [日本語](README_JA.md)
 
-## 🚀 Getting Started
+FlowGram is a composable, visual, easy-to-integrate, and extensible workflow development framework & toolkit.
+Our goal is to help developers build AI workflow platforms **faster** and **simpler**.
+FlowGram comes with a suite of built-in tools for workflow development: flow canvas, node configuration form, variable scope chain, and ready-to-use materials (LLM, Condition, Code Editor etc). It’s not a ready-made workflow platform; it’s the framework and toolkit to build yours.
 
-```sh
-# create demo
-npx @flowgram.ai/create-app@latest
+Learn more at 🌐 [FlowGram.AI](https://flowgram.ai)
 
-# in PowerShell
-npx "@flowgram.ai/create-app@latest"
+## 🎬 Demo
 
-# select demo
-- fixed-layout # full-feature overview
-- free-layout # full-feature overview
-- fixed-layout-simple # basic usage
-- free-layout-simple # basic usage
-```
+<https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26>
 
-## 🔨 Development
+[Open in CodeSandbox](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)
 
-1. **Install Node.js 18+**
+In this demo, we iterate through a list of cities, fetch real-time weather via HTTP, parse temperatures with a Code node, generate outfit suggestions with an LLM, gate by a Condition, aggregate results across the loop, and finally use an Advisor LLM to pick the most comfortable city before sending the result to the End node.
 
-``` bash
-nvm install lts/hydrogen
-nvm alias default lts/hydrogen # set default node version
-nvm use lts/hydrogen
-```
+## 🚀 Quick start
 
-2. **Clone the repository**
+1. Create a new FlowGram project with preset templates
 
-``` bash
-git clone git@github.com:bytedance/flowgram.ai.git
+```sh
+npx @flowgram.ai/create-app@latest
 ```
 
-3. **Install required global dependencies**
+⭐️ Recommend to choose `Free Layout Demo`
+
+2. Start the project
 
-``` bash
-npm i -g pnpm@10.6.5 @microsoft/rush@5.150.0
+```sh
+cd demo-free-layout
+npm install
+npm start
 ```
 
-4. **Install project dependencies**
+3. Open the browser
 
-``` bash
-rush install
-```
+Enjoy it! [http://localhost:3000](http://localhost:3000)
 
-5. **Build the project**
+## ✨ Features
 
-``` bash
-rush build
-```
+| Feature                                                                                      | Description                                                                                                                                                                                               | Demo                                                                                         |
+| -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| [Free Layout Canvas](https://flowgram.ai/examples/free-layout/free-feature-overview.html)    | Free layout canvas where nodes can be placed anywhere and connected using free-form lines.                                                                                                                | ![Free Layout Demo](./apps/docs/src/public/free-layout/free-layout-demo.gif)                 |
+| [Fixed Layout Canvas](https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html) | Fixed layout canvas where nodes can be dragged to specified positions, with support for compound nodes like branches and loops.                                                                           | ![Fixed Layout Demo](./apps/docs/src/public/fixed-layout/fixed-layout-demo.gif)              |
+| [Form](https://flowgram.ai/examples/node-form/basic.html)                                    | The form engine manages the CRUD operations of node data and provides rendering, validation, side effects, linkage, and error-capturing capabilities, simplifying the development of node configurations. | ![Form](https://github.com/user-attachments/assets/13e9b4cd-e993-4d21-901c-fb6cf106de78)     |
+| [Variable](https://flowgram.ai/guide/variable/basic.html)                                    | The variable engine supports scope constraints, variable structure inspection, and type inference, making it easy to manage data flow within the workflow.                                                | ![Variable](https://github.com/user-attachments/assets/442006db-25e3-4fb5-972c-7a0545638ff5) |
 
-6. **Run docs or demo**
 
-``` bash
-rush dev:docs # docs
-rush dev:demo-fixed-layout
-rush dev:demo-free-layout
-```
+## 📖 Documentation
+
+You can find the FlowGram documentation [on the website](https://flowgram.ai).
 
-After that, you can start to develop projects inside this repository.
+The documentation is divided into several sections:
 
-Enjoy it!
+- [Quick Start](https://flowgram.ai/guide/getting-started/introduction.html)
+- [Canvas](https://flowgram.ai/guide/free-layout/load.html)
+- [Form](https://flowgram.ai/guide/form/form.html)
+- [Variable](https://flowgram.ai/guide/variable/basic.html)
+- [Material](https://flowgram.ai/materials/introduction.html)
+- [Runtime](https://flowgram.ai/guide/runtime/introduction.html)
+- [Advanced Guides](https://flowgram.ai/guide/advanced/zoom-scroll.html)
+- [API Reference](https://flowgram.ai/api/index.html)
+- [Where to get Support](https://flowgram.ai/guide/contact-us.html)
+- [Contributing Guide](https://flowgram.ai/guide/contributing.html)
 
-## 🌟 Contributors
+## 🙌 Contributors
 
 [![FlowGram.AI Contributors](https://contrib.rocks/image?repo=bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/graphs/contributors)
 
-## 🌟 Adoption
+## 🌍 Adoption
 
 - [Coze Studio](https://github.com/coze-dev/coze-studio) is an all-in-one AI agent development tool. Providing the latest large models and tools, various development modes and frameworks, Coze Studio offers the most convenient AI agent development environment, from development to deployment.
 - [NNDeploy](https://github.com/NNDeploy/nndeploy) is a workflow-based multi-platform ai deployment tool.
 - [Certimate](https://github.com/certimate-go/certimate)  is an open-source SSL certificate management tool that helps you automatically apply for and deploy SSL certificates with a visual workflow. It is one of the ACME client options listed in the official documentation of Let's Encrypt.
 
-## 🌟 Contact us
+## 📬 Contact us
 
 - Issues: [Issues](https://github.com/bytedance/flowgram.ai/issues)
 - Lark: Scan the QR code below with [Register Feishu](https://www.feishu.cn/en/) to join our FlowGram user group.

README_DE.md

@@ -0,0 +1,93 @@
+![Image](https://github.com/user-attachments/assets/4f9dfa0e-e600-4d4e-9e73-c919184f7573)
+
+<div align="center">
+
+[![Lizenz](https://img.shields.io/github/license/bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE) [![@flowgram.ai/editor](https://img.shields.io/npm/dm/%40flowgram.ai%2Fcore)](https://www.npmjs.com/package/@flowgram.ai/editor) [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bytedance/flowgram.ai) [![juejin](https://img.shields.io/badge/juejin-FFFFFF?logo=juejin&logoColor=%23007FFF)](https://juejin.cn/column/7479814468601315362)
+
+[![](https://trendshift.io/api/badge/repositories/13877)](https://trendshift.io/repositories/13877)
+
+</div>
+
+# FlowGram | Workflow-Entwicklungs-Framework
+
+[English](README.md) | [中文](README_ZH.md) | [Español](README_ES.md) | [Русский](README_RU.md) | [Português](README_PT.md) | [Deutsch](README_DE.md) | [日本語](README_JA.md)
+
+FlowGram ist ein zusammensetzbares, visuelles, einfach zu integrierendes und erweiterbares Workflow-Entwicklungs-Framework & Toolkit.
+Unser Ziel ist es, Entwicklern zu helfen, KI-Workflow-Plattformen **schneller** und **einfacher** zu erstellen.
+FlowGram wird mit einer Reihe von integrierten Werkzeugen für die Workflow-Entwicklung geliefert: eine visuelle Flow-Canvas, Node-Konfigurationsformulare, eine Variablen-Scope-Chain und sofort einsatzbereite Materialien (LLM, Bedingung, Code-Editor usw.). Es ist keine fertige Workflow-Plattform; es ist das Framework und Toolkit, um Ihre zu erstellen.
+
+Erfahren Sie mehr unter 🌐 [FlowGram.AI](https://flowgram.ai)
+
+## 🎬 Demo
+
+<https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26>
+
+[In CodeSandbox öffnen](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)
+
+In dieser Demo durchlaufen wir eine Liste von Städten, rufen das Echtzeit-Wetter über HTTP ab, parsen die Temperaturen mit einem Code-Knoten, generieren Outfit-Vorschläge mit einem LLM, steuern durch eine Bedingung, aggregieren die Ergebnisse über die Schleife und verwenden schließlich einen Berater-LLM, um die komfortabelste Stadt auszuwählen, bevor das Ergebnis an den Endknoten gesendet wird.
+
+## 🚀 Schnellstart
+
+1. Erstellen Sie ein neues FlowGram-Projekt mit voreingestellten Vorlagen
+
+```sh
+npx @flowgram.ai/create-app@latest
+```
+
+⭐️ Empfohlen, `Free Layout Demo` zu wählen
+
+2. Starten Sie das Projekt
+
+```sh
+cd demo-free-layout
+npm install
+npm start
+```
+
+3. Öffnen Sie den Browser
+
+Viel Spaß! [http://localhost:3000](http://localhost:3000)
+
+## ✨ Funktionen
+
+| Funktion                                                                                     | Beschreibung                                                                                                                                                                  | Demo                                                                                         |
+| -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| [Free Layout Canvas](https://flowgram.ai/examples/free-layout/free-feature-overview.html)    | Freie Layout-Canvas, auf der Knoten beliebig platziert und mit Freiformlinien verbunden werden können.                                                                        | ![Free Layout Demo](./apps/docs/src/public/free-layout/free-layout-demo.gif)                 |
+| [Fixed Layout Canvas](https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html) | Feste Layout-Canvas, auf der Knoten an bestimmte Positionen gezogen werden können, mit Unterstützung für zusammengesetzte Knoten wie Verzweigungen und Schleifen.             | ![Fixed Layout Demo](./apps/docs/src/public/fixed-layout/fixed-layout-demo.gif)              |
+| [Formular](https://flowgram.ai/examples/node-form/basic.html)                                | Die Formular-Engine verwaltet CRUD-Operationen von Knotendaten und bietet Rendering-, Validierungs-, Nebeneffekt-, Verknüpfungs- und Fehlererfassungsfunktionen, wodurch die Entwicklung von Knotenkonfigurationen vereinfacht wird. | ![Formular](https://github.com/user-attachments/assets/13e9b4cd-e993-4d21-901c-fb6cf106de78) |
+| [Variable](https://flowgram.ai/guide/variable/basic.html)                                    | Die Variablen-Engine unterstützt Bereichsbeschränkungen, Variablenstrukturinspektion und Typinferenz, wodurch der Datenfluss im Workflow einfach verwaltet werden kann. | ![Variable](https://github.com/user-attachments/assets/442006db-25e3-4fb5-972c-7a0545638ff5) |
+
+
+## 📖 Dokumentation
+
+Sie finden die FlowGram-Dokumentation [auf der Website](https://flowgram.ai).
+
+Die Dokumentation ist in mehrere Abschnitte unterteilt:
+
+- [Schnellstart](https://flowgram.ai/guide/getting-started/introduction.html)
+- [Canvas](https://flowgram.ai/guide/free-layout/load.html)
+- [Formular](https://flowgram.ai/guide/form/form.html)
+- [Variable](https://flowgram.ai/guide/variable/basic.html)
+- [Material](https://flowgram.ai/materials/introduction.html)
+- [Laufzeit](https://flowgram.ai/guide/runtime/introduction.html)
+- [Erweiterte Anleitungen](https://flowgram.ai/guide/advanced/zoom-scroll.html)
+- [API-Referenz](https://flowgram.ai/api/index.html)
+- [Wo Sie Unterstützung erhalten](https://flowgram.ai/guide/contact-us.html)
+- [Leitfaden für Beiträge](https://flowgram.ai/guide/contributing.html)
+
+## 🙌 Mitwirkende
+
+[![FlowGram.AI-Mitwirkende](https://contrib.rocks/image?repo=bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/graphs/contributors)
+
+## 🌍 Einführung
+
+- [Coze Studio](https://github.com/coze-dev/coze-studio) ist ein All-in-One-KI-Agenten-Entwicklungstool. Coze Studio bietet die neuesten großen Modelle und Werkzeuge, verschiedene Entwicklungsmodi und Frameworks und bietet die bequemste KI-Agenten-Entwicklungsumgebung, von der Entwicklung bis zur Bereitstellung.
+- [NNDeploy](https://github.com/NNDeploy/nndeploy) ist ein Workflow-basiertes Multi-Plattform-KI-Bereitstellungstool.
+- [Certimate](https://github.com/certimate-go/certimate) ist ein Open-Source-SSL-Zertifikatsverwaltungstool, mit dem Sie SSL-Zertifikate automatisch mit einem visuellen Workflow beantragen und bereitstellen können. Es ist eine der ACME-Client-Optionen, die in der offiziellen Dokumentation von Let's Encrypt aufgeführt sind.
+
+## 📬 Kontaktieren Sie uns
+
+- Probleme: [Probleme](https://github.com/bytedance/flowgram.ai/issues)
+- Lark: Scannen Sie den QR-Code unten mit [Register Feishu](https://www.feishu.cn/en/), um unserer FlowGram-Benutzergruppe beizutreten.
+
+<img src="./apps/docs/src/public/lark-group.png" width="200"/>

README_ES.md

@@ -0,0 +1,93 @@
+![Imagen](https://github.com/user-attachments/assets/4f9dfa0e-e600-4d4e-9e73-c919184f7573)
+
+<div align="center">
+
+[![Licencia](https://img.shields.io/github/license/bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE) [![@flowgram.ai/editor](https://img.shields.io/npm/dm/%40flowgram.ai%2Fcore)](https://www.npmjs.com/package/@flowgram.ai/editor) [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bytedance/flowgram.ai) [![juejin](https://img.shields.io/badge/juejin-FFFFFF?logo=juejin&logoColor=%23007FFF)](https://juejin.cn/column/7479814468601315362)
+
+[![](https://trendshift.io/api/badge/repositories/13877)](https://trendshift.io/repositories/13877)
+
+</div>
+
+# FlowGram | Marco de desarrollo de flujos de trabajo
+
+[English](README.md) | [中文](README_ZH.md) | [Español](README_ES.md) | [Русский](README_RU.md) | [Português](README_PT.md) | [Deutsch](README_DE.md) | [日本語](README_JA.md)
+
+FlowGram es un marco y conjunto de herramientas de desarrollo de flujos de trabajo componible, visual, fácil de integrar y extensible.
+Nuestro objetivo es ayudar a los desarrolladores a crear plataformas de flujo de trabajo de IA de forma **más rápida** y **sencilla**.
+FlowGram viene con un conjunto de herramientas integradas para el desarrollo de flujos de trabajo: un lienzo de flujo visual, formularios de configuración de nodos, una cadena de alcance de variables y materiales listos para usar (LLM, Condición, Editor de código, etc.). No es una plataforma de flujo de trabajo ya hecha; es el marco y el conjunto de herramientas para crear la suya.
+
+Obtenga más información en 🌐 [FlowGram.AI](https://flowgram.ai)
+
+## 🎬 Demostración
+
+<https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26>
+
+[Abrir en CodeSandbox](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)
+
+En esta demostración, iteramos a través de una lista de ciudades, obtenemos el clima en tiempo real a través de HTTP, analizamos las temperaturas con un nodo de código, generamos sugerencias de atuendos con un LLM, controlamos mediante una condición, agregamos los resultados a lo largo del bucle y, finalmente, usamos un LLM asesor para elegir la ciudad más cómoda antes de enviar el resultado al nodo final.
+
+## 🚀 Inicio rápido
+
+1. Cree un nuevo proyecto de FlowGram con plantillas preestablecidas
+
+```sh
+npx @flowgram.ai/create-app@latest
+```
+
+⭐️ Se recomienda elegir `Free Layout Demo`
+
+2. Inicie el proyecto
+
+```sh
+cd demo-free-layout
+npm install
+npm start
+```
+
+3. Abra el navegador
+
+¡Disfrútelo! [http://localhost:3000](http://localhost:3000)
+
+## ✨ Características
+
+| Característica                                                                                 | Descripción                                                                                                                                                                                            | Demostración                                                                                   |
+| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
+| [Lienzo de diseño libre](https://flowgram.ai/examples/free-layout/free-feature-overview.html)  | Lienzo de diseño libre donde los nodos se pueden colocar en cualquier lugar y conectar mediante líneas de forma libre.                                                                                 | ![Demostración de diseño libre](./apps/docs/src/public/free-layout/free-layout-demo.gif)       |
+| [Lienzo de diseño fijo](https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html) | Lienzo de diseño fijo donde los nodos se pueden arrastrar a posiciones específicas, con soporte para nodos compuestos como ramas y bucles.                                                             | ![Demostración de diseño fijo](./apps/docs/src/public/fixed-layout/fixed-layout-demo.gif)      |
+| [Formulario](https://flowgram.ai/examples/node-form/basic.html)                                | El motor de formularios gestiona las operaciones CRUD de datos de nodos y proporciona capacidades de renderizado, validación, efectos secundarios, vinculación y captura de errores, simplificando el desarrollo de configuraciones de nodos. | ![Formulario](https://github.com/user-attachments/assets/13e9b4cd-e993-4d21-901c-fb6cf106de78) |
+| [Variable](https://flowgram.ai/guide/variable/basic.html)                                      | El motor de variables admite restricciones de ámbito, inspección de estructura de variables e inferencia de tipos, facilitando la gestión del flujo de datos dentro del flujo de trabajo.                                     | ![Variable](https://github.com/user-attachments/assets/442006db-25e3-4fb5-972c-7a0545638ff5)   |
+
+
+## 📖 Documentación
+
+Puede encontrar la documentación de FlowGram [en el sitio web](https://flowgram.ai).
+
+La documentación se divide en varias secciones:
+
+- [Inicio rápido](https://flowgram.ai/guide/getting-started/introduction.html)
+- [Lienzo](https://flowgram.ai/guide/free-layout/load.html)
+- [Formulario](https://flowgram.ai/guide/form/form.html)
+- [Variable](https://flowgram.ai/guide/variable/basic.html)
+- [Material](https://flowgram.ai/materials/introduction.html)
+- [Tiempo de ejecución](https://flowgram.ai/guide/runtime/introduction.html)
+- [Guías avanzadas](https://flowgram.ai/guide/advanced/zoom-scroll.html)
+- [Referencia de la API](https://flowgram.ai/api/index.html)
+- [Dónde obtener soporte](https://flowgram.ai/guide/contact-us.html)
+- [Guía de contribución](https://flowgram.ai/guide/contributing.html)
+
+## 🙌 Colaboradores
+
+[![Colaboradores de FlowGram.AI](https://contrib.rocks/image?repo=bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/graphs/contributors)
+
+## 🌍 Adopción
+
+- [Coze Studio](https://github.com/coze-dev/coze-studio) es una herramienta de desarrollo de agentes de IA todo en uno. Coze Studio, que proporciona los últimos modelos y herramientas grandes, varios modos y marcos de desarrollo, ofrece el entorno de desarrollo de agentes de IA más conveniente, desde el desarrollo hasta la implementación.
+- [NNDeploy](https://github.com/NNDeploy/nndeploy) es una herramienta de implementación de IA multiplataforma basada en flujos de trabajo.
+- [Certimate](https://github.com/certimate-go/certimate) es una herramienta de gestión de certificados SSL de código abierto que le ayuda a solicitar e implementar automáticamente certificados SSL con un flujo de trabajo visual. Es una de las opciones de cliente ACME que se enumeran en la documentación oficial de Let's Encrypt.
+
+## 📬 Contáctenos
+
+- Problemas: [Problemas](https://github.com/bytedance/flowgram.ai/issues)
+- Lark: Escanee el código QR a continuación con [Registrar Feishu](https://www.feishu.cn/en/) para unirse a nuestro grupo de usuarios de FlowGram.
+
+<img src="./apps/docs/src/public/lark-group.png" width="200"/>

README_JA.md

@@ -0,0 +1,93 @@
+![画像](https://github.com/user-attachments/assets/4f9dfa0e-e600-4d4e-9e73-c919184f7573)
+
+<div align="center">
+
+[![ライセンス](https://img.shields.io/github/license/bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE) [![@flowgram.ai/editor](https://img.shields.io/npm/dm/%40flowgram.ai%2Fcore)](https://www.npmjs.com/package/@flowgram.ai/editor) [![DeepWikiに聞く](https://deepwiki.com/badge.svg)](https://deepwiki.com/bytedance/flowgram.ai) [![juejin](https://img.shields.io/badge/juejin-FFFFFF?logo=juejin&logoColor=%23007FFF)](https://juejin.cn/column/7479814468601315362)
+
+[![](https://trendshift.io/api/badge/repositories/13877)](https://trendshift.io/repositories/13877)
+
+</div>
+
+# FlowGram｜ワークフロー開発フレームワーク
+
+[English](README.md) | [中文](README_ZH.md) | [Español](README_ES.md) | [Русский](README_RU.md) | [Português](README_PT.md) | [Deutsch](README_DE.md) | [日本語](README_JA.md)
+
+FlowGramは、構成可能で、視覚的で、統合しやすく、拡張可能なワークフロー開発フレームワーク＆ツールキットです。
+私たちの目標は、開発者がAIワークフロープラットフォームを**より速く**、**よりシンプルに**構築できるよう支援することです。
+FlowGramには、ワークフロー開発用の組み込みツール一式が付属しています。視覚的なフローキャンバス、ノード構成フォーム、変数スコープチェーン、すぐに使えるマテリアル（LLM、条件、コードエディターなど）です。これは既製のワークフロープラットフォームではありません。あなたのワークフロープラットフォームを構築するためのフレームワークとツールキットです。
+
+詳細は🌐 [FlowGram.AI](https://flowgram.ai)をご覧ください。
+
+## 🎬 デモ
+
+<https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26>
+
+[CodeSandboxで開く](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)
+
+このデモでは、都市のリストを反復処理し、HTTP経由でリアルタイムの天気を取得し、コードノードで気温を解析し、LLMで服装の提案を生成し、条件でゲートし、ループ全体で結果を集計し、最後にアドバイザーLLMを使用して最も快適な都市を選択してから、結果を終了ノードに送信します。
+
+## 🚀 クイックスタート
+
+1. プリセットテンプレートを使用して新しいFlowGramプロジェクトを作成します
+
+```sh
+npx @flowgram.ai/create-app@latest
+```
+
+⭐️ `Free Layout Demo`を選択することをお勧めします
+
+2. プロジェクトを開始します
+
+```sh
+cd demo-free-layout
+npm install
+npm start
+```
+
+3. ブラウザを開きます
+
+お楽しみください！ [http://localhost:3000](http://localhost:3000)
+
+## ✨ 機能
+
+| 機能                                                                                              | 説明                                                                                                                                        | デモ                                                                                         |
+| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| [フリーレイアウトキャンバス](https://flowgram.ai/examples/free-layout/free-feature-overview.html) | ノードをどこにでも配置し、自由形式の線で接続できるフリーレイアウトキャンバス。                                                              | ![フリーレイアウトデモ](./apps/docs/src/public/free-layout/free-layout-demo.gif)             |
+| [固定レイアウトキャンバス](https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html) | 分岐やループなどの複合ノードをサポートし、ノードを指定した位置にドラッグできる固定レイアウトキャンバス。                                    | ![固定レイアウトデモ](./apps/docs/src/public/fixed-layout/fixed-layout-demo.gif)             |
+| [フォーム](https://flowgram.ai/examples/node-form/basic.html)                                     | フォームエンジンはノードデータのCRUD操作を管理し、レンダリング、検証、副作用、連動、エラー処理機能を提供し、ノード設定の開発を簡素化します。 | ![フォーム](https://github.com/user-attachments/assets/13e9b4cd-e993-4d21-901c-fb6cf106de78) |
+| [変数](https://flowgram.ai/guide/variable/basic.html)                                             | 変数エンジンはスコープ制約、変数構造検査、型推論をサポートし、ワークフロー内のデータフローの管理を容易にします。            | ![変数](https://github.com/user-attachments/assets/442006db-25e3-4fb5-972c-7a0545638ff5)     |
+
+
+## 📖 ドキュメント
+
+FlowGramのドキュメントは[ウェブサイト](https://flowgram.ai)でご覧いただけます。
+
+ドキュメントはいくつかのセクションに分かれています。
+
+- [クイックスタート](https://flowgram.ai/guide/getting-started/introduction.html)
+- [キャンバス](https://flowgram.ai/guide/free-layout/load.html)
+- [フォーム](https://flowgram.ai/guide/form/form.html)
+- [変数](https://flowgram.ai/guide/variable/basic.html)
+- [マテリアル](https://flowgram.ai/materials/introduction.html)
+- [ランタイム](https://flowgram.ai/guide/runtime/introduction.html)
+- [高度なガイド](https://flowgram.ai/guide/advanced/zoom-scroll.html)
+- [APIリファレンス](https://flowgram.ai/api/index.html)
+- [サポートの入手先](https://flowgram.ai/guide/contact-us.html)
+- [貢献ガイド](https://flowgram.ai/guide/contributing.html)
+
+## 🙌 貢献者
+
+[![FlowGram.AI貢献者](https://contrib.rocks/image?repo=bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/graphs/contributors)
+
+## 🌍 採用
+
+- [Coze Studio](https://github.com/coze-dev/coze-studio)は、オールインワンのAIエージェント開発ツールです。最新の主要モデルとツール、さまざまな開発モードとフレームワークを提供するCoze Studioは、開発から展開まで、最も便利なAIエージェント開発環境を提供します。
+- [NNDeploy](https://github.com/NNDeploy/nndeploy)は、ワークフローベースのマルチプラットフォームAI展開ツールです。
+- [Certimate](https://github.com/certimate-go/certimate)は、視覚的なワークフローでSSL証明書を自動的に申請および展開するのに役立つオープンソースのSSL証明書管理ツールです。これは、Let's Encryptの公式ドキュメントに記載されているACMEクライアントオプションの1つです。
+
+## 📬 お問い合わせ
+
+- 問題：[問題](https://github.com/bytedance/flowgram.ai/issues)
+- Lark：[Register Feishu](https://www.feishu.cn/en/)で以下のQRコードをスキャンして、FlowGramユーザーグループに参加してください。
+
+<img src="./apps/docs/src/public/lark-group.png" width="200"/>

README_PT.md

@@ -0,0 +1,93 @@
+![Imagem](https://github.com/user-attachments/assets/4f9dfa0e-e600-4d4e-9e73-c919184f7573)
+
+<div align="center">
+
+[![Licença](https://img.shields.io/github/license/bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE) [![@flowgram.ai/editor](https://img.shields.io/npm/dm/%40flowgram.ai%2Fcore)](https://www.npmjs.com/package/@flowgram.ai/editor) [![Pergunte ao DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bytedance/flowgram.ai) [![juejin](https://img.shields.io/badge/juejin-FFFFFF?logo=juejin&logoColor=%23007FFF)](https://juejin.cn/column/7479814468601315362)
+
+[![](https://trendshift.io/api/badge/repositories/13877)](https://trendshift.io/repositories/13877)
+
+</div>
+
+# FlowGram | Estrutura de desenvolvimento de fluxo de trabalho
+
+[English](README.md) | [中文](README_ZH.md) | [Español](README_ES.md) | [Русский](README_RU.md) | [Português](README_PT.md) | [Deutsch](README_DE.md) | [日本語](README_JA.md)
+
+FlowGram é uma estrutura e kit de ferramentas de desenvolvimento de fluxo de trabalho componível, visual, fácil de integrar e extensível.
+Nosso objetivo é ajudar os desenvolvedores a criar plataformas de fluxo de trabalho de IA de forma **mais rápida** e **simples**.
+O FlowGram vem com um conjunto de ferramentas integradas para o desenvolvimento de fluxo de trabalho: uma tela de fluxo visual, formulários de configuração de nós, uma cadeia de escopo de variáveis e materiais prontos para uso (LLM, Condição, Editor de Código, etc.). Não é uma plataforma de fluxo de trabalho pronta; é a estrutura e o kit de ferramentas para construir a sua.
+
+Saiba mais em 🌐 [FlowGram.AI](https://flowgram.ai)
+
+## 🎬 Demonstração
+
+<https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26>
+
+[Abrir no CodeSandbox](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)
+
+Nesta demonstração, iteramos por uma lista de cidades, buscamos o clima em tempo real via HTTP, analisamos as temperaturas com um nó de Código, geramos sugestões de roupas com um LLM, controlamos por uma Condição, agregamos os resultados ao longo do loop e, finalmente, usamos um LLM Conselheiro para escolher a cidade mais confortável antes de enviar o resultado para o nó Final.
+
+## 🚀 Início rápido
+
+1. Crie um novo projeto FlowGram com modelos predefinidos
+
+```sh
+npx @flowgram.ai/create-app@latest
+```
+
+⭐️ Recomendo escolher `Demonstração de Layout Livre`
+
+2. Inicie o projeto
+
+```sh
+cd demo-free-layout
+npm install
+npm start
+```
+
+3. Abra o navegador
+
+Aproveite! [http://localhost:3000](http://localhost:3000)
+
+## ✨ Recursos
+
+| Recurso                                                                                      | Descrição                                                                                                                                                                            | Demonstração                                                                                   |
+| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
+| [Tela de Layout Livre](https://flowgram.ai/examples/free-layout/free-feature-overview.html)  | Tela de layout livre onde os nós podem ser colocados em qualquer lugar e conectados usando linhas de forma livre.                                                                    | ![Demonstração de Layout Livre](./apps/docs/src/public/free-layout/free-layout-demo.gif)       |
+| [Tela de Layout Fixo](https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html) | Tela de layout fixo onde os nós podem ser arrastados para posições especificadas, com suporte para nós compostos como ramificações e loops.                                          | ![Demonstração de Layout Fixo](./apps/docs/src/public/fixed-layout/fixed-layout-demo.gif)      |
+| [Formulário](https://flowgram.ai/examples/node-form/basic.html)                              | O mecanismo de formulário gerencia as operações CRUD de dados do nó e fornece recursos de renderização, validação, efeitos colaterais, vinculação e captura de erros, simplificando o desenvolvimento de configurações de nó. | ![Formulário](https://github.com/user-attachments/assets/13e9b4cd-e993-4d21-901c-fb6cf106de78) |
+| [Variável](https://flowgram.ai/guide/variable/basic.html)                                    | O mecanismo de variáveis suporta restrições de escopo, inspeção de estrutura de variáveis e inferência de tipos, facilitando o gerenciamento do fluxo de dados dentro do fluxo de trabalho.                           | ![Variável](https://github.com/user-attachments/assets/442006db-25e3-4fb5-972c-7a0545638ff5)   |
+
+
+## 📖 Documentação
+
+Você pode encontrar a documentação do FlowGram [no site](https://flowgram.ai).
+
+A documentação está dividida em várias seções:
+
+- [Início Rápido](https://flowgram.ai/guide/getting-started/introduction.html)
+- [Tela](https://flowgram.ai/guide/free-layout/load.html)
+- [Formulário](https://flowgram.ai/guide/form/form.html)
+- [Variável](https://flowgram.ai/guide/variable/basic.html)
+- [Material](https://flowgram.ai/materials/introduction.html)
+- [Tempo de Execução](https://flowgram.ai/guide/runtime/introduction.html)
+- [Guias Avançados](https://flowgram.ai/guide/advanced/zoom-scroll.html)
+- [Referência da API](https://flowgram.ai/api/index.html)
+- [Onde obter suporte](https://flowgram.ai/guide/contact-us.html)
+- [Guia de contribuição](https://flowgram.ai/guide/contributing.html)
+
+## 🙌 Colaboradores
+
+[![Colaboradores do FlowGram.AI](https://contrib.rocks/image?repo=bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/graphs/contributors)
+
+## 🌍 Adoção
+
+- [Coze Studio](https://github.com/coze-dev/coze-studio) é uma ferramenta de desenvolvimento de agente de IA tudo-em-um. Fornecendo os modelos e ferramentas mais recentes, vários modos e estruturas de desenvolvimento, o Coze Studio oferece o ambiente de desenvolvimento de agente de IA mais conveniente, do desenvolvimento à implantação.
+- [NNDeploy](https://github.com/NNDeploy/nndeploy) é uma ferramenta de implantação de IA multiplataforma baseada em fluxo de trabalho.
+- [Certimate](https://github.com/certimate-go/certimate) é uma ferramenta de gerenciamento de certificados SSL de código aberto que ajuda você a solicitar e implantar certificados SSL automaticamente com um fluxo de trabalho visual. É uma das opções de cliente ACME listadas na documentação oficial do Let's Encrypt.
+
+## 📬 Contate-nos
+
+- Problemas: [Problemas](https://github.com/bytedance/flowgram.ai/issues)
+- Lark: Digitalize o código QR abaixo com [Registrar Feishu](https://www.feishu.cn/en/) para se juntar ao nosso grupo de usuários FlowGram.
+
+<img src="./apps/docs/src/public/lark-group.png" width="200"/>

README_RU.md

@@ -0,0 +1,93 @@
+![Изображение](https://github.com/user-attachments/assets/4f9dfa0e-e600-4d4e-9e73-c919184f7573)
+
+<div align="center">
+
+[![Лицензия](https://img.shields.io/github/license/bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE) [![@flowgram.ai/editor](https://img.shields.io/npm/dm/%40flowgram.ai%2Fcore)](https://www.npmjs.com/package/@flowgram.ai/editor) [![Спросить DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bytedance/flowgram.ai) [![juejin](https://img.shields.io/badge/juejin-FFFFFF?logo=juejin&logoColor=%23007FFF)](https://juejin.cn/column/7479814468601315362)
+
+[![](https://trendshift.io/api/badge/repositories/13877)](https://trendshift.io/repositories/13877)
+
+</div>
+
+# FlowGram | Фреймворк для разработки рабочих процессов
+
+[English](README.md) | [中文](README_ZH.md) | [Español](README_ES.md) | [Русский](README_RU.md) | [Português](README_PT.md) | [Deutsch](README_DE.md) | [日本語](README_JA.md)
+
+FlowGram — это компонуемый, визуальный, легко интегрируемый и расширяемый фреймворк и набор инструментов для разработки рабочих процессов.
+Наша цель — помочь разработчикам создавать платформы для рабочих процессов ИИ **быстрее** и **проще**.
+FlowGram поставляется со встроенным набором инструментов для разработки рабочих процессов: визуальным холстом потока, формами конфигурации узлов, цепочкой области видимости переменных и готовыми к использованию материалами (LLM, Условие, Редактор кода и т. д.). Это не готовая платформа для рабочих процессов; это фреймворк и набор инструментов для создания вашей собственной.
+
+Узнайте больше на 🌐 [FlowGram.AI](https://flowgram.ai)
+
+## 🎬 Демо
+
+<https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26>
+
+[Открыть в CodeSandbox](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)
+
+В этом демо мы перебираем список городов, получаем погоду в реальном времени по HTTP, анализируем температуру с помощью узла «Код», генерируем предложения по одежде с помощью LLM, управляем с помощью «Условия», агрегируем результаты по циклу и, наконец, используем LLM-советника, чтобы выбрать самый комфортный город, прежде чем отправить результат в конечный узел.
+
+## 🚀 Быстрый старт
+
+1. Создайте новый проект FlowGram с предустановленными шаблонами
+
+```sh
+npx @flowgram.ai/create-app@latest
+```
+
+⭐️ Рекомендуется выбрать `Демо со свободной компоновкой`
+
+2. Запустите проект
+
+```sh
+cd demo-free-layout
+npm install
+npm start
+```
+
+3. Откройте браузер
+
+Наслаждайтесь! [http://localhost:3000](http://localhost:3000)
+
+## ✨ Особенности
+
+| Особенность                                                                                                | Описание                                                                                                                                                                          | Демо                                                                                           |
+| ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| [Холст со свободной компоновкой](https://flowgram.ai/examples/free-layout/free-feature-overview.html)      | Холст со свободной компоновкой, где узлы можно размещать где угодно и соединять линиями произвольной формы.                                                                       | ![Демо со свободной компоновкой](./apps/docs/src/public/free-layout/free-layout-demo.gif)      |
+| [Холст с фиксированной компоновкой](https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html) | Холст с фиксированной компоновкой, где узлы можно перетаскивать в указанные позиции, с поддержкой составных узлов, таких как ветви и циклы.                                       | ![Демо с фиксированной компоновкой](./apps/docs/src/public/fixed-layout/fixed-layout-demo.gif) |
+| [Форма](https://flowgram.ai/examples/node-form/basic.html)                                                 | Движок форм управляет операциями CRUD данных узлов и предоставляет возможности рендеринга, валидации, побочных эффектов, связывания и обработки ошибок, упрощая разработку конфигураций узлов. | ![Форма](https://github.com/user-attachments/assets/13e9b4cd-e993-4d21-901c-fb6cf106de78)      |
+| [Переменная](https://flowgram.ai/guide/variable/basic.html)                                                | Движок переменных поддерживает ограничения области видимости, инспекцию структуры переменных и вывод типов, облегчая управление потоком данных в рабочем процессе.                                  | ![Переменная](https://github.com/user-attachments/assets/442006db-25e3-4fb5-972c-7a0545638ff5) |
+
+
+## 📖 Документация
+
+Вы можете найти документацию FlowGram [на веб-сайте](https://flowgram.ai).
+
+Документация разделена на несколько разделов:
+
+- [Быстрый старт](https://flowgram.ai/guide/getting-started/introduction.html)
+- [Холст](https://flowgram.ai/guide/free-layout/load.html)
+- [Форма](https://flowgram.ai/guide/form/form.html)
+- [Переменная](https://flowgram.ai/guide/variable/basic.html)
+- [Материал](https://flowgram.ai/materials/introduction.html)
+- [Среда выполнения](https://flowgram.ai/guide/runtime/introduction.html)
+- [Расширенные руководства](https://flowgram.ai/guide/advanced/zoom-scroll.html)
+- [Справочник по API](https://flowgram.ai/api/index.html)
+- [Где получить поддержку](https://flowgram.ai/guide/contact-us.html)
+- [Руководство по вкладу](https://flowgram.ai/guide/contributing.html)
+
+## 🙌 Участники
+
+[![Участники FlowGram.AI](https://contrib.rocks/image?repo=bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/graphs/contributors)
+
+## 🌍 Внедрение
+
+- [Coze Studio](https://github.com/coze-dev/coze-studio) — это универсальный инструмент для разработки агентов ИИ. Предоставляя новейшие большие модели и инструменты, различные режимы и фреймворки разработки, Coze Studio предлагает наиболее удобную среду разработки агентов ИИ, от разработки до развертывания.
+- [NNDeploy](https://github.com/NNDeploy/nndeploy) — это мультиплатформенный инструмент развертывания ИИ на основе рабочих процессов.
+- [Certimate](https://github.com/certimate-go/certimate) — это инструмент управления SSL-сертификатами с открытым исходным кодом, который помогает автоматически подавать заявки и развертывать SSL-сертификаты с помощью визуального рабочего процесса. Это один из вариантов клиента ACME, перечисленных в официальной документации Let's Encrypt.
+
+## 📬 Свяжитесь с нами
+
+- Проблемы: [Проблемы](https://github.com/bytedance/flowgram.ai/issues)
+- Lark: отсканируйте QR-код ниже с помощью [Register Feishu](https://www.feishu.cn/en/), чтобы присоединиться к нашей группе пользователей FlowGram.
+
+<img src="./apps/docs/src/public/lark-group.png" width="200"/>

README_ZH.md

@@ -0,0 +1,93 @@
+![Image](https://github.com/user-attachments/assets/4f9dfa0e-e600-4d4e-9e73-c919184f7573)
+
+<div align="center">
+
+[![License](https://img.shields.io/github/license/bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/blob/main/LICENSE) [![@flowgram.ai/editor](https://img.shields.io/npm/dm/%40flowgram.ai%2Fcore)](https://www.npmjs.com/package/@flowgram.ai/editor) [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bytedance/flowgram.ai) [![juejin](https://img.shields.io/badge/juejin-FFFFFF?logo=juejin&logoColor=%23007FFF)](https://juejin.cn/column/7479814468601315362)
+
+[![](https://trendshift.io/api/badge/repositories/13877)](https://trendshift.io/repositories/13877)
+
+</div>
+
+# FlowGram.AI｜工作流开发框架
+
+[English](README.md) | [中文](README_ZH.md) | [Español](README_ES.md) | [Русский](README_RU.md) | [Português](README_PT.md) | [Deutsch](README_DE.md) | [日本語](README_JA.md)
+
+FlowGram 是一个可组合、可视化、易于集成且可扩展的工作流开发框架与工具集。
+我们的目标是帮助开发者以更快、更简单的方式搭建 AI 工作流平台。
+FlowGram 内置开箱开箱即用的工作流开发能力：可视化流程画布、节点配置表单、变量作用域链，以及开箱即用的物料（LLM、条件、代码编辑器等）。这并非一个现成的工作流平台，而是帮助你构建平台的框架与工具。
+
+了解更多 🌐 [FlowGram.AI](https://flowgram.ai)
+
+## 🎬 演示
+
+<https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26>
+
+[在 CodeSandbox 中打开](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)
+
+在该演示中，我们遍历一组城市，通过 HTTP 获取实时天气，用 Code 节点解析温度，借助 LLM 生成穿搭建议，经由 Condition 进行筛选，在循环中汇总结果，最后使用 Advisor LLM 选出最舒适的城市，并将结果发送至 End 节点。
+
+## 🚀 快速上手
+
+1. 使用预设模板创建新的 FlowGram 项目
+
+```sh
+npx @flowgram.ai/create-app@latest
+```
+
+⭐️ 推荐选择 `Free Layout Demo`
+
+2. 启动项目
+
+```sh
+cd demo-free-layout
+npm install
+npm start
+```
+
+3. 打开浏览器
+
+属于你的工作流平台 [http://localhost:3000](http://localhost:3000)
+
+## ✨ 特性
+
+| 特性                                                                                         | 说明                                                                              | 演示                                                                                         |
+| -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| [Free Layout Canvas](https://flowgram.ai/examples/free-layout/free-feature-overview.html)    | 自由布局画布，节点可任意摆放，可在节点间创建边进行链接。                          | ![Free Layout Demo](./apps/docs/src/public/free-layout/free-layout-demo.gif)                 |
+| [Fixed Layout Canvas](https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html) | 固定布局画布，节点可拖拽至指定位置，支持复合节点（如分支与循环）。                | ![Fixed Layout Demo](./apps/docs/src/public/fixed-layout/fixed-layout-demo.gif)              |
+| [Form](https://flowgram.ai/examples/node-form/basic.html)                                    | 表单引擎管理节点数据的增删改查操作，并提供渲染、验证、副作用、联动和错误捕获等功能，简化节点配置的开发。 | ![Form](https://github.com/user-attachments/assets/13e9b4cd-e993-4d21-901c-fb6cf106de78)     |
+| [Variable](https://flowgram.ai/guide/variable/basic.html)                                    | 变量引擎支持作用域约束、变量结构检查和类型推断等功能，便于管理工作流中的数据流。  | ![Variable](https://github.com/user-attachments/assets/442006db-25e3-4fb5-972c-7a0545638ff5) |
+
+## 📖 文档
+
+你可以在官网查阅完整文档：[FlowGram 文档](https://flowgram.ai)。
+
+文档分为以下章节：
+
+- [快速入门](https://flowgram.ai/guide/getting-started/introduction.html)
+- [自由画布](https://flowgram.ai/guide/free-layout/load.html)
+- [固定画布](https://flowgram.ai/guide/fixed-layout/load.html)
+- [表单](https://flowgram.ai/guide/form/form.html)
+- [变量](https://flowgram.ai/guide/variable/basic.html)
+- [素材](https://flowgram.ai/materials/introduction.html)
+- [运行时](https://flowgram.ai/guide/runtime/introduction.html)
+- [进阶指南](https://flowgram.ai/guide/advanced/zoom-scroll.html)
+- [API 参考](https://flowgram.ai/api/index.html)
+- [获取支持](https://flowgram.ai/guide/contact-us.html)
+- [贡献指南](https://flowgram.ai/guide/contributing.html)
+
+## 🙌 贡献者
+
+[![FlowGram.AI Contributors](https://contrib.rocks/image?repo=bytedance/flowgram.ai)](https://github.com/bytedance/flowgram.ai/graphs/contributors)
+
+## 🌍 被这些项目采用
+
+- [Coze Studio](https://github.com/coze-dev/coze-studio) 是一体化的 AI Agent 开发工具，提供最新的大模型与工具、多样的开发模式与框架，并在从开发到部署的全流程中，提供最便捷的 Agent 开发体验。
+- [NNDeploy](https://github.com/NNDeploy/nndeploy) 是一个基于工作流的多平台 AI 部署工具。
+- [Certimate](https://github.com/certimate-go/certimate) 是开源的 SSL 证书管理工具，借助可视化工作流帮助你自动申请与部署证书；它也是官方文档列出的 Let's Encrypt ACME 客户端选项之一。
+
+## 📬 联系我们
+
+- 问题反馈： [Issues](https://github.com/bytedance/flowgram.ai/issues)
+- 飞书：使用 [Register Feishu](https://www.feishu.cn/en/) 扫码下方二维码，加入 FlowGram 用户群。
+
+<img src="./apps/docs/src/public/lark-group.png" width="200"/>

apps/demo-free-layout/src/components/testrun/node-status-bar/render/index.tsx

@@ -36,7 +36,7 @@ export const NodeStatusRender: FC<NodeStatusRenderProps> = ({ report }) => {
   const isNodeProcessing = nodeStatus === WorkflowStatus.Processing;
   const isNodeFailed = nodeStatus === WorkflowStatus.Failed;
   const isNodeSucceed = nodeStatus === WorkflowStatus.Succeeded;
-  const isNodeCanceled = nodeStatus === WorkflowStatus.Canceled;
+  const isNodeCancelled = nodeStatus === WorkflowStatus.Cancelled;
 
   const tagColor = useMemo(() => {
     if (isNodeSucceed) {
@@ -69,8 +69,8 @@ export const NodeStatusRender: FC<NodeStatusRenderProps> = ({ report }) => {
         return 'Succeed';
       } else if (isNodeFailed) {
         return 'Failed';
-      } else if (isNodeCanceled) {
-        return 'Canceled';
+      } else if (isNodeCancelled) {
+        return 'Cancelled';
       }
     };
 

packages/runtime/interface/src/runtime/status/index.ts

@@ -8,7 +8,7 @@ export enum WorkflowStatus {
   Processing = 'processing',
   Succeeded = 'succeeded',
   Failed = 'failed',
-  Canceled = 'canceled',
+  Cancelled = 'canceled',
 }
 
 export interface StatusData {

packages/runtime/js-core/src/domain/status/status-entity/index.ts

@@ -26,7 +26,7 @@ export class WorkflowRuntimeStatus implements IStatus {
   }
 
   public get terminated(): boolean {
-    return [WorkflowStatus.Succeeded, WorkflowStatus.Failed, WorkflowStatus.Canceled].includes(
+    return [WorkflowStatus.Succeeded, WorkflowStatus.Failed, WorkflowStatus.Cancelled].includes(
       this.status
     );
   }
@@ -75,7 +75,7 @@ export class WorkflowRuntimeStatus implements IStatus {
     if (this.terminated) {
       return;
     }
-    this._status = WorkflowStatus.Canceled;
+    this._status = WorkflowStatus.Cancelled;
     this._endTime = Date.now();
   }