docs: update readme & fix logo flicker & optimize quick start guide (#957)

* docs(readme): update demo link and quick start guide

* fix(docs): landing page logo flickering during loading

* docs(start): update loop gif & add install dep step

README.md

@@ -16,27 +16,27 @@ FlowGram is a composable, visual, easy-to-integrate, and extensible workflow dev
 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.
 
-Learn more at 🌐 [FlowGram.AI](https://flowgram.ai)
+Learn more at [FlowGram.AI 🌐](https://flowgram.ai)
 
 ## 🎬 Demo
 
 <https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26>
 
-[Open in CodeSandbox](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)
+Open in [CodeSandbox 🌐](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main) or [StackBlitz 🌐](https://stackblitz.com/~/github.com/louisyoungx/flowgram-demo)
 
 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.
 
-## 🚀 Quick start
+## 🚀 Quick Start
 
-1. Create a new FlowGram project with preset templates
+1. Create a new FlowGram project:
 
 ```sh
 npx @flowgram.ai/create-app@latest
 ```
 
-⭐️ Recommend to choose `Free Layout Demo`
+> We recommend choosing the `Free Layout Demo ⭐️` template.
 
-2. Start the project
+2. Start the project:
 
 ```sh
 cd demo-free-layout
@@ -44,9 +44,7 @@ npm install
 npm start
 ```
 
-3. Open the browser
-
-Enjoy it! [http://localhost:3000](http://localhost:3000)
+3. Open [http://localhost:3000](http://localhost:3000) in your browser.
 
 ## ✨ Features
 

README_DE.md

@@ -16,27 +16,27 @@ FlowGram ist ein zusammensetzbares, visuelles, einfach zu integrierendes und erw
 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)
+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)
+Öffnen Sie in [CodeSandbox 🌐](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main) oder [StackBlitz 🌐](https://stackblitz.com/~/github.com/louisyoungx/flowgram-demo)
 
 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
+1. Erstellen Sie ein neues FlowGram-Projekt:
 
 ```sh
 npx @flowgram.ai/create-app@latest
 ```
 
-⭐️ Empfohlen, `Free Layout Demo` zu wählen
+> Wir empfehlen, die Vorlage `Free Layout Demo ⭐️` zu wählen.
 
-2. Starten Sie das Projekt
+2. Starten Sie das Projekt:
 
 ```sh
 cd demo-free-layout
@@ -44,9 +44,7 @@ npm install
 npm start
 ```
 
-3. Öffnen Sie den Browser
-
-Viel Spaß! [http://localhost:3000](http://localhost:3000)
+3. Öffnen Sie [http://localhost:3000](http://localhost:3000) in Ihrem Browser.
 
 ## ✨ Funktionen
 

README_ES.md

@@ -16,27 +16,27 @@ FlowGram es un marco y conjunto de herramientas de desarrollo de flujos de traba
 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)
+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)
+Abra en [CodeSandbox 🌐](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main) o [StackBlitz 🌐](https://stackblitz.com/~/github.com/louisyoungx/flowgram-demo)
 
 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
+1. Cree un nuevo proyecto de FlowGram:
 
 ```sh
 npx @flowgram.ai/create-app@latest
 ```
 
-⭐️ Se recomienda elegir `Free Layout Demo`
+> Le recomendamos que elija la plantilla `Free Layout Demo ⭐️`.
 
-2. Inicie el proyecto
+2. Inicie el proyecto:
 
 ```sh
 cd demo-free-layout
@@ -44,9 +44,7 @@ npm install
 npm start
 ```
 
-3. Abra el navegador
-
-¡Disfrútelo! [http://localhost:3000](http://localhost:3000)
+3. Abra [http://localhost:3000](http://localhost:3000) en su navegador.
 
 ## ✨ Características
 

README_JA.md

@@ -16,27 +16,27 @@ FlowGramは、構成可能で、視覚的で、統合しやすく、拡張可能
 私たちの目標は、開発者がAIワークフロープラットフォームを**より速く**、**よりシンプルに**構築できるよう支援することです。
 FlowGramには、ワークフロー開発用の組み込みツール一式が付属しています。視覚的なフローキャンバス、ノード構成フォーム、変数スコープチェーン、すぐに使えるマテリアル（LLM、条件、コードエディターなど）です。これは既製のワークフロープラットフォームではありません。あなたのワークフロープラットフォームを構築するためのフレームワークとツールキットです。
 
-詳細は🌐 [FlowGram.AI](https://flowgram.ai)をご覧ください。
+詳細は[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)
+[CodeSandbox 🌐](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)または[StackBlitz 🌐](https://stackblitz.com/~/github.com/louisyoungx/flowgram-demo)で開く
 
 このデモでは、都市のリストを反復処理し、HTTP経由でリアルタイムの天気を取得し、コードノードで気温を解析し、LLMで服装の提案を生成し、条件でゲートし、ループ全体で結果を集計し、最後にアドバイザーLLMを使用して最も快適な都市を選択してから、結果を終了ノードに送信します。
 
 ## 🚀 クイックスタート
 
-1. プリセットテンプレートを使用して新しいFlowGramプロジェクトを作成します
+1. 新しいFlowGramプロジェクトを作成します:
 
 ```sh
 npx @flowgram.ai/create-app@latest
 ```
 
-⭐️ `Free Layout Demo`を選択することをお勧めします
+> `Free Layout Demo ⭐️` テンプレートを選択することをお勧めします。
 
-2. プロジェクトを開始します
+2. プロジェクトを開始します:
 
 ```sh
 cd demo-free-layout
@@ -44,9 +44,7 @@ npm install
 npm start
 ```
 
-3. ブラウザを開きます
-
-お楽しみください！ [http://localhost:3000](http://localhost:3000)
+3. ブラウザで[http://localhost:3000](http://localhost:3000)を開きます。
 
 ## ✨ 機能
 

README_PT.md

@@ -16,27 +16,27 @@ FlowGram é uma estrutura e kit de ferramentas de desenvolvimento de fluxo de tr
 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)
+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)
+Abra no [CodeSandbox 🌐](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main) ou [StackBlitz 🌐](https://stackblitz.com/~/github.com/louisyoungx/flowgram-demo)
 
 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
+1. Crie um novo projeto FlowGram:
 
 ```sh
 npx @flowgram.ai/create-app@latest
 ```
 
-⭐️ Recomendo escolher `Demonstração de Layout Livre`
+> Recomendamos escolher o template `Free Layout Demo ⭐️`.
 
-2. Inicie o projeto
+2. Inicie o projeto:
 
 ```sh
 cd demo-free-layout
@@ -44,9 +44,7 @@ npm install
 npm start
 ```
 
-3. Abra o navegador
-
-Aproveite! [http://localhost:3000](http://localhost:3000)
+3. Abra [http://localhost:3000](http://localhost:3000) no seu navegador.
 
 ## ✨ Recursos
 

README_RU.md

@@ -16,27 +16,27 @@ FlowGram — это компонуемый, визуальный, легко и
 Наша цель — помочь разработчикам создавать платформы для рабочих процессов ИИ **быстрее** и **проще**.
 FlowGram поставляется со встроенным набором инструментов для разработки рабочих процессов: визуальным холстом потока, формами конфигурации узлов, цепочкой области видимости переменных и готовыми к использованию материалами (LLM, Условие, Редактор кода и т. д.). Это не готовая платформа для рабочих процессов; это фреймворк и набор инструментов для создания вашей собственной.
 
-Узнайте больше на 🌐 [FlowGram.AI](https://flowgram.ai)
+Узнайте больше на [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)
+Откройте в [CodeSandbox 🌐](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main) или [StackBlitz 🌐](https://stackblitz.com/~/github.com/louisyoungx/flowgram-demo)
 
 В этом демо мы перебираем список городов, получаем погоду в реальном времени по HTTP, анализируем температуру с помощью узла «Код», генерируем предложения по одежде с помощью LLM, управляем с помощью «Условия», агрегируем результаты по циклу и, наконец, используем LLM-советника, чтобы выбрать самый комфортный город, прежде чем отправить результат в конечный узел.
 
 ## 🚀 Быстрый старт
 
-1. Создайте новый проект FlowGram с предустановленными шаблонами
+1. Создайте новый проект FlowGram:
 
 ```sh
 npx @flowgram.ai/create-app@latest
 ```
 
-⭐️ Рекомендуется выбрать `Демо со свободной компоновкой`
+> Мы рекомендуем выбрать шаблон `Free Layout Demo ⭐️`.
 
-2. Запустите проект
+2. Запустите проект:
 
 ```sh
 cd demo-free-layout
@@ -44,9 +44,7 @@ npm install
 npm start
 ```
 
-3. Откройте браузер
-
-Наслаждайтесь! [http://localhost:3000](http://localhost:3000)
+3. Откройте [http://localhost:3000](http://localhost:3000) в вашем браузере.
 
 ## ✨ Особенности
 

README_ZH.md

@@ -16,27 +16,27 @@ FlowGram 是一个可组合、可视化、易于集成且可扩展的工作流
 我们的目标是帮助开发者以更快、更简单的方式搭建 AI 工作流平台。
 FlowGram 内置开箱开箱即用的工作流开发能力：可视化流程画布、节点配置表单、变量作用域链，以及开箱即用的物料（LLM、条件、代码编辑器等）。这并非一个现成的工作流平台，而是帮助你构建平台的框架与工具。
 
-了解更多 🌐 [FlowGram.AI](https://flowgram.ai)
+了解更多 [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)
+在 [CodeSandbox 🌐](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main) 或 [StackBlitz 🌐](https://stackblitz.com/~/github.com/louisyoungx/flowgram-demo) 中打开
 
 在该演示中，我们遍历一组城市，通过 HTTP 获取实时天气，用 Code 节点解析温度，借助 LLM 生成穿搭建议，经由 Condition 进行筛选，在循环中汇总结果，最后使用 Advisor LLM 选出最舒适的城市，并将结果发送至 End 节点。
 
 ## 🚀 快速上手
 
-1. 使用预设模板创建新的 FlowGram 项目
+1. 创建一个新的 FlowGram 项目:
 
 ```sh
 npx @flowgram.ai/create-app@latest
 ```
 
-⭐️ 推荐选择 `Free Layout Demo`
+> 我们推荐选择 `Free Layout Demo ⭐️` 模板。
 
-2. 启动项目
+2. 启动项目:
 
 ```sh
 cd demo-free-layout
@@ -44,9 +44,7 @@ npm install
 npm start
 ```
 
-3. 打开浏览器
-
-属于你的工作流平台 [http://localhost:3000](http://localhost:3000)
+3. 在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
 
 ## ✨ 特性
 

apps/docs/src/en/guide/getting-started/quick-start.mdx

@@ -65,7 +65,16 @@ Choose a way to start:
 cd [project-name]
 ```
 
-5. Start the development server.
+5. Install dependencies.
+
+<PackageManagerTabs command={{
+  npm: "npm install",
+  pnpm: "pnpm install",
+  yarn: "yarn install",
+  bun: "bun install",
+}} />
+
+6. Start the development server.
 
 <PackageManagerTabs command={{
   npm: "npm run dev",

apps/docs/src/zh/guide/getting-started/quick-start.mdx

@@ -65,7 +65,16 @@ import {
 cd [project-name]
 ```
 
-5. 启动开发服务器
+5. 安装依赖
+
+<PackageManagerTabs command={{
+  npm: "npm install",
+  pnpm: "pnpm install",
+  yarn: "yarn install",
+  bun: "bun install",
+}} />
+
+6. 启动开发服务器
 
 <PackageManagerTabs command={{
   npm: "npm run dev",

apps/docs/theme/components/logo/index.less

@@ -8,6 +8,7 @@
   top: 50px;
   width: calc(30vw - 64px);
   height: 550px;
+  opacity: 0;
 
   // Mobile responsive: move to top on small screens to prevent text overlap
   @media (max-width: 768px) {

apps/docs/theme/components/logo/use-editor-props.tsx

@@ -40,11 +40,17 @@ export const useEditorProps = () =>
           return lineColor;
         };
       },
-      onAllLayersRendered: (ctx) => {
-        ctx.tools.fitView(false);
+      onAllLayersRendered: async (ctx) => {
+        await ctx.tools.fitView(false);
         // disable playground operations
         const playgroundConfig = ctx.get(PlaygroundConfigEntity);
         playgroundConfig.updateConfig = () => {};
+        // display logo container
+        const containerDOM = window.document.querySelector('.flowgram-logo-container');
+        if (containerDOM instanceof HTMLDivElement) {
+          containerDOM.style.opacity = '1';
+        }
+        // update nodes position
         updatePosition(ctx);
       },
       getNodeDefaultRegistry(type) {