admin/flowgram.ai
1
0
Fork 0
mirror of https://gitee.com/ByteDance/flowgram.ai.git synced 2025-07-07 17:43:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #40 from knoxnoe/docs/guide-introduction

Browse Source 
fix(style): text visibility issue in english i18n
This commit is contained in:
xiamidaxia 2025-03-10 16:39:12 +08:00 committed by GitHub
commit ad3896fc7d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 57 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
apps/docs/src/en/guide/introduction.mdx
View File

@ -5,38 +5,45 @@ FlowGram is a node-based flow building engine that helps developers quickly crea
In today's AI-driven era, we are focusing more on how to empower workflows with AI, hence the AI suffix in our name. In today's AI-driven era, we are focusing more on how to empower workflows with AI, hence the AI suffix in our name.
<div className="rs-highlight"> <div className="rs-highlight">
FlowGram = Flow + Program, suggesting that flows are like programs, with Condition, Loop, and even TryCatch nodes. FlowGram = Flow + Program, suggesting that flows are like programs, with
Condition, Loop, and even TryCatch nodes.
</div> </div>
## Official Demo ## Official Demo
<div style={{ marginTop: 16, display: "flex", gap: 8 }}>
<div style={{marginTop: 16, display: 'flex', gap: 8 }}>
<div> <div>
<div> <div>
<a className="rs-link" href="/en/examples/fixed-layout/fixed-feature-overview.html"> <a
className="rs-link"
href="/en/examples/fixed-layout/fixed-feature-overview.html"
>
Fixed Layout Fixed Layout
</a> </a>
</div> </div>
<div className="rs-tip" style={{ height: 54 }}> <div className="rs-tip" style={{ height: 84 }}>
Fixed layout with nodes/branches supporting specified position drag and drop, offering compound nodes like branches and loops Fixed layout with nodes/branches supporting specified position drag and
drop, offering compound nodes like branches and loops
</div> </div>
<div> <div>
<img loading="lazy" src="/fixed-layout/fixed-layout-demo.gif"/> <img loading="lazy" src="/fixed-layout/fixed-layout-demo.gif" />
</div> </div>
</div> </div>
<div> <div>
<div> <div>
<a className="rs-link" href="/en/examples/free-layout/free-feature-overview.html"> <a
className="rs-link"
href="/en/examples/free-layout/free-feature-overview.html"
>
Free Connection Layout Free Connection Layout
</a> </a>
</div> </div>
<div className="rs-tip" style={{ height: 54 }}> <div className="rs-tip" style={{ height: 84 }}>
Free layout where nodes can be moved to any position and connected through free connections Free layout where nodes can be moved to any position and connected through
free connections
</div> </div>
<div> <div>
<img loading="lazy" src="/free-layout/free-layout-demo.gif"/> <img loading="lazy" src="/free-layout/free-layout-demo.gif" />
</div> </div>
</div> </div>
</div> </div>
@ -50,7 +57,11 @@ Providing a set of interactive best practices for smoother workflow operations
<td>Motion Transitions</td> <td>Motion Transitions</td>
<td> <td>
<p> <p>
Motion animations in web applications can be traced back to Material Design, which suggests that element changes in width, height, or position need a transition process. The canvas engine separates the drawing of lines and nodes, greatly reducing the cost of implementing motion transitions Motion animations in web applications can be traced back to Material
Design, which suggests that element changes in width, height, or
position need a transition process. The canvas engine separates the
drawing of lines and nodes, greatly reducing the cost of implementing
motion transitions
</p> </p>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/common/motion.gif" /> <img loading="lazy" src="/common/motion.gif" />
@ -61,10 +72,12 @@ Providing a set of interactive best practices for smoother workflow operations
<td>Touchpad Gesture Zoom + Space Key Canvas Drag</td> <td>Touchpad Gesture Zoom + Space Key Canvas Drag</td>
<td> <td>
<p> <p>
Gestures refer to Mac touchpad two-finger spread/pinch for canvas zoom in/out, or holding space to drag the canvas, interactions inspired by Sketch and Figma Gestures refer to Mac touchpad two-finger spread/pinch for canvas zoom
in/out, or holding space to drag the canvas, interactions inspired by
Sketch and Figma
</p> </p>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/common/touch-pad.gif" /> <img loading="lazy" src="/common/touch-pad.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -72,7 +85,7 @@ Providing a set of interactive best practices for smoother workflow operations
<td>Minimap</td> <td>Minimap</td>
<td> <td>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/fixed-layout/minimap.gif" /> <img loading="lazy" src="/fixed-layout/minimap.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -80,7 +93,7 @@ Providing a set of interactive best practices for smoother workflow operations
<td>Undo/Redo</td> <td>Undo/Redo</td>
<td> <td>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/fixed-layout/redo-undo.gif" /> <img loading="lazy" src="/fixed-layout/redo-undo.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -88,7 +101,7 @@ Providing a set of interactive best practices for smoother workflow operations
<td>Copy/Paste (Shortcut Support)</td> <td>Copy/Paste (Shortcut Support)</td>
<td> <td>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/fixed-layout/copypaste.gif" /> <img loading="lazy" src="/fixed-layout/copypaste.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -102,7 +115,7 @@ Providing a set of interactive best practices for smoother workflow operations
<td> <td>
<div className="rs-center"> <div className="rs-center">
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/fixed-layout/dragdrop.gif" /> <img loading="lazy" src="/fixed-layout/dragdrop.gif" />
</div> </div>
</div> </div>
</td> </td>
@ -114,7 +127,7 @@ Providing a set of interactive best practices for smoother workflow operations
</td> </td>
<td> <td>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/fixed-layout/layout-change.gif" /> <img loading="lazy" src="/fixed-layout/layout-change.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -125,7 +138,7 @@ Providing a set of interactive best practices for smoother workflow operations
</td> </td>
<td> <td>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/fixed-layout/fold.gif" /> <img loading="lazy" src="/fixed-layout/fold.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -136,7 +149,7 @@ Providing a set of interactive best practices for smoother workflow operations
</td> </td>
<td> <td>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/fixed-layout/group.gif" /> <img loading="lazy" src="/fixed-layout/group.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -147,7 +160,7 @@ Providing a set of interactive best practices for smoother workflow operations
</td> </td>
<td> <td>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/free-layout/autolayout.gif" /> <img loading="lazy" src="/free-layout/autolayout.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -158,7 +171,7 @@ Providing a set of interactive best practices for smoother workflow operations
</td> </td>
<td> <td>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/free-layout/snap.gif" /> <img loading="lazy" src="/free-layout/snap.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -169,7 +182,7 @@ Providing a set of interactive best practices for smoother workflow operations
</td> </td>
<td> <td>
<div className="rs-center"> <div className="rs-center">
<img loading="lazy" src="/free-layout/loop.gif" /> <img loading="lazy" src="/free-layout/loop.gif" />
</div> </div>
</td> </td>
</tr> </tr>
@ -177,31 +190,43 @@ Providing a set of interactive best practices for smoother workflow operations
## Online Applications ## Online Applications
<div style={{marginTop: 16, display: 'flex', gap: 8 }}> <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
<div> <div>
<div> <div>
<a className="rs-link" href="https://www.coze.com/open/docs/guides/workflow" target="_blank"> <a
className="rs-link"
href="https://www.coze.com/open/docs/guides/workflow"
target="_blank"
>
Coze Workflow Coze Workflow
</a> </a>
</div> </div>
<div> <div>
<img loading="lazy" src="/ref-coze-en.png"/> <img loading="lazy" src="/ref-coze-en.png" />
</div> </div>
</div> </div>
<div> <div>
<a className="rs-link" href="https://ae.feishu.cn/hc/zh-CN/articles/120610822514" target="_blank" > <a
className="rs-link"
href="https://ae.feishu.cn/hc/zh-CN/articles/120610822514"
target="_blank"
>
Lark Low-code Platform Workflow Lark Low-code Platform Workflow
</a> </a>
<div> <div>
<img loading="lazy" src="/ref-apaas-en.png"/> <img loading="lazy" src="/ref-apaas-en.png" />
</div> </div>
</div> </div>
<div> <div>
<a className="rs-link" href="https://www.feishu.cn/hc/en-US/articles/908751305974-overview-of-workflow-in-base" target="_blank" > <a
className="rs-link"
href="https://www.feishu.cn/hc/en-US/articles/908751305974-overview-of-workflow-in-base"
target="_blank"
>
Lark Base Workflow Lark Base Workflow
</a> </a>
<div> <div>
<img loading="lazy" src="/ref-bitable-en.png"/> <img loading="lazy" src="/ref-bitable-en.png" />
</div> </div>
</div> </div>
</div> </div>