# Introduction

FlowGram is a node-based flow building engine that helps developers quickly create workflows in either fixed layout or free connection layout modes, providing a set of interactive best practices. It's particularly suitable for visual workflows with clear inputs and outputs.

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">
  FlowGram = Flow + Program, suggesting that flows are like programs, with Condition, Loop, and even TryCatch nodes.
</div>


## Official Demo


<div style={{marginTop: 16, display: 'flex', gap: 8 }}>
  <div>
    <div>
      <a className="rs-link" href="/en/examples/fixed-layout/fixed-feature-overview.html">
        Fixed Layout
      </a>
    </div>
    <div className="rs-tip" style={{ height: 54 }}>
      Fixed layout with nodes/branches supporting specified position drag and drop, offering compound nodes like branches and loops
    </div>
    <div>
      <img src="@/public/fixed-layout/fixed-layout-demo.gif"/>
    </div>
  </div>
  <div>
    <div>
      <a className="rs-link" href="/en/examples/free-layout/free-feature-overview.html">
        Free Connection Layout
      </a>
    </div>
    <div className="rs-tip" style={{ height: 54 }}>
      Free layout where nodes can be moved to any position and connected through free connections
    </div>
    <div>
      <img src="@/public/free-layout/free-layout-demo.gif"/>
    </div>
  </div>
</div>

## Interactive Experience

Providing a set of interactive best practices for smoother workflow operations

<table className="rs-table">
  <tr>
    <td>Motion Transitions</td>
    <td>
      <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
      </p>
      <div className="rs-center">
        <img src="@/public/common/motion.gif" />
      </div>
    </td>
  </tr>
  <tr>
    <td>Touchpad Gesture Zoom + Space Key Canvas Drag</td>
    <td>
      <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
      </p>
      <div className="rs-center">
        <img src="@/public/common/touch-pad.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>Minimap</td>
    <td>
      <div className="rs-center">
        <img src="@/public/fixed-layout/minimap.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>Undo/Redo</td>
    <td>
      <div className="rs-center">
        <img src="@/public/fixed-layout/redo-undo.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>Copy/Paste (Shortcut Support)</td>
    <td>
      <div className="rs-center">
        <img src="@/public/fixed-layout/copypaste.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <div>Box Selection + Drag and Drop</div>
        <div>(Fixed)</div>
      </div>
    </td>
    <td>
      <div className="rs-center">
        <div className="rs-center">
          <img src="@/public/fixed-layout/dragdrop.gif"  />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Horizontal/Vertical Layout Switch</div>
      <div>(Fixed)</div>
    </td>
    <td>
      <div className="rs-center">
        <img src="@/public/fixed-layout/layout-change.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Branch Folding</div>
      <div>(Fixed)</div>
    </td>
    <td>
      <div className="rs-center">
        <img src="@/public/fixed-layout/fold.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Grouping</div>
      <div>(Fixed)</div>
    </td>
    <td>
      <div className="rs-center">
        <img src="@/public/fixed-layout/group.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Auto Layout
      <div>(Free)</div>
    </td>
    <td>
      <div className="rs-center">
        <img src="@/public/free-layout/autolayout.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Snap Alignment + Guidelines
      <div>(Free)</div>
    </td>
    <td>
      <div className="rs-center">
        <img src="@/public/free-layout/snap.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Coze Loop Sub-canvas
      <div>(Free)</div>
    </td>
    <td>
      <div className="rs-center">
        <img src="@/public/free-layout/loop.gif"  />
      </div>
    </td>
  </tr>
</table>

## Online Applications

<div style={{marginTop: 16, display: 'flex', gap: 8 }}>
  <div>
    <div>
      <a className="rs-link" href="https://www.coze.com/open/docs/guides/workflow" target="_blank">
        Coze Workflow
      </a>
    </div>
    <div>
      <img src="@/public/ref-coze-en.png"/>
    </div>
  </div>
  <div>
    <a className="rs-link" href="https://ae.feishu.cn/hc/zh-CN/articles/120610822514" target="_blank" >
      Lark Low-code Platform Workflow
    </a>
    <div>
      <img src="@/public/ref-apaas-en.png"/>
    </div>
  </div>
  <div>
    <a className="rs-link" href="https://www.feishu.cn/hc/en-US/articles/908751305974-overview-of-workflow-in-base" target="_blank" >
      Lark Base Workflow
    </a>
    <div>
      <img src="@/public/ref-bitable-en.png"/>
    </div>
  </div>
</div>