Skip to content

Commit 6c34f14

Browse files
cwandevcwandev
committed
docs: add workflow elements
1 parent f21a40d commit 6c34f14

File tree

8 files changed

+951
-2
lines changed

8 files changed

+951
-2
lines changed

‎apps/www/content/3.components/2.workflow/_dir.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
title: Workflow
22
icon: lucide:workflow
3-
navigation.redirect: /components/workflow/node
3+
navigation.redirect: /components/workflow/canvas

‎apps/www/content/3.components/2.workflow/canvas.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
title: Canvas
3+
description: A Vue Flow-based canvas component for building interactive node-based interfaces.
4+
icon: lucide:layout-grid
5+
---
6+
7+
The `Canvas` component provides a Vue Flow-based canvas for building interactive node-based interfaces.
8+
It comes pre-configured with sensible defaults for AI applications, including panning, zooming, and selection behaviors.
9+
10+
::alert{type="info" icon="lucide:info"}
11+
The Canvas component is designed to be used with the [Node](/components/workflow/node) and [Edge](/components/workflow/edge) components. See the [Workflow](/examples/workflow) demo for a full example.
12+
::
13+
14+
## Install using CLI
15+
16+
::tabs{variant="card"}
17+
::div{label="ai-elements-vue"}
18+
```sh
19+
npx ai-elements-vue@latest add canvas
20+
```
21+
::
22+
::div{label="shadcn-vue"}
23+
24+
```sh
25+
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/canvas.json
26+
```
27+
::
28+
::
29+
30+
## Install Manually
31+
32+
Copy and paste the following code in the same folder.
33+
34+
::code-group
35+
```vue [Canvas.vue] height=260 collapse
36+
<script setup lang="ts">
37+
import type { FlowEmits, FlowProps, FlowSlots } from '@vue-flow/core'
38+
import { Background } from '@vue-flow/background'
39+
import { VueFlow } from '@vue-flow/core'
40+
import { useForwardPropsEmits } from 'reka-ui'
41+
import '@vue-flow/core/dist/style.css'
42+
import '@vue-flow/core/dist/theme-default.css'
43+
44+
const props = withDefaults(defineProps<FlowProps>(), {
45+
deleteKeyCode: () => ['Backspace', 'Delete'],
46+
fitViewOnInit: true,
47+
panOnDrag: false,
48+
panOnScroll: true,
49+
selectNodesOnDrag: true,
50+
zoomOnDoubleClick: false,
51+
})
52+
53+
const emits = defineEmits<FlowEmits>()
54+
const slots = defineSlots<FlowSlots>()
55+
const forwarded = useForwardPropsEmits(props, emits)
56+
</script>
57+
58+
<template>
59+
<VueFlow data-slot="canvas" v-bind="forwarded">
60+
<Background />
61+
62+
<template v-if="slots['connection-line']" #connection-line="connectionLineProps">
63+
<slot name="connection-line" v-bind="connectionLineProps" />
64+
</template>
65+
66+
<template v-if="slots['zoom-pane']" #zoom-pane>
67+
<slot name="zoom-pane" />
68+
</template>
69+
70+
<slot />
71+
</VueFlow>
72+
</template>
73+
```
74+
75+
```ts [index.ts]
76+
export { default as Canvas } from './Canvas.vue'
77+
```
78+
::
79+
80+
## Features
81+
82+
- Pre-configured Vue Flow canvas with AI-optimized defaults
83+
- Pan on scroll enabled for intuitive navigation
84+
- Selection on drag for multi-node operations
85+
- Customizable background color using CSS variables
86+
- Delete key support (Backspace and Delete keys)
87+
- Auto-fit view to show all nodes
88+
- Disabled double-click zoom for better UX
89+
- Disabled pan on drag to prevent accidental canvas movement
90+
- Fully compatible with Vue Flow props and API
91+
92+
## Props
93+
94+
### `<Canvas />`
95+
96+
::field-group
97+
::field{name="<slot />" type="FlowSlots" optional}
98+
Child components like Background, Controls, or MiniMap.
99+
::
100+
101+
::field{name="props" type="FlowProps" optional}
102+
Any other Vue Flow props like nodes, edges, nodeTypes, edgeTypes, onNodesChange, etc.
103+
::
104+
::

‎apps/www/content/3.components/2.workflow/connection.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Connection
3+
description: A custom connection line component for Vue Flow-based canvases with animated bezier curve styling.
4+
icon: lucide:arrow-right-left
5+
---
6+
7+
The `Connection` component provides a styled connection line for Vue Flow canvases.
8+
It renders an animated bezier curve with a circle indicator at the target end, using consistent theming through CSS variables.
9+
10+
::alert{type="info" icon="lucide:info"}
11+
The Connection component is designed to be used with the [Canvas](/components/workflow/canvas) component. See the [Workflow](/examples/workflow) demo for a full example.
12+
::
13+
14+
## Install using CLI
15+
16+
::tabs{variant="card"}
17+
::div{label="ai-elements-vue"}
18+
```sh
19+
npx ai-elements-vue@latest add connection
20+
```
21+
::
22+
::div{label="shadcn-vue"}
23+
24+
```sh
25+
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/connection.json
26+
```
27+
::
28+
::
29+
30+
## Install Manually
31+
32+
Copy and paste the following code in the same folder.
33+
34+
::code-group
35+
```vue [Connection.vue] height=260 collapse
36+
<script setup lang="ts">
37+
import type { ConnectionLineProps } from '@vue-flow/core'
38+
import { computed } from 'vue'
39+
40+
const props = defineProps<ConnectionLineProps>()
41+
42+
const HALF = 0.5
43+
44+
const pathD = computed(() => {
45+
const { sourceX, sourceY, targetX, targetY } = props
46+
const controlX1 = sourceX + (targetX - sourceX) * HALF
47+
const controlX2 = sourceX + (targetX - sourceX) * HALF
48+
return `M${sourceX},${sourceY} C ${controlX1},${sourceY} ${controlX2},${targetY} ${targetX},${targetY}`
49+
})
50+
</script>
51+
52+
<template>
53+
<g>
54+
<path
55+
class="animated"
56+
fill="none"
57+
stroke="var(--color-ring)"
58+
:stroke-width="1"
59+
:d="pathD"
60+
/>
61+
62+
<circle
63+
:cx="targetX"
64+
:cy="targetY"
65+
fill="#fff"
66+
:r="3"
67+
stroke="var(--color-ring)"
68+
:stroke-width="1"
69+
/>
70+
</g>
71+
</template>
72+
```
73+
74+
```ts [index.ts]
75+
export { default as Connection } from './Connection.vue'
76+
```
77+
::
78+
79+
## Features
80+
81+
- Smooth bezier curve animation for connection lines
82+
- Visual indicator circle at the target position
83+
- Theme-aware styling using CSS variables
84+
- Cubic bezier curve calculation for natural flow
85+
- Lightweight implementation with minimal props
86+
- Full TypeScript support with Vue Flow types
87+
- Compatible with Vue Flow's connection system
88+
89+
## Props
90+
91+
### `<Connection />`
92+
93+
::field-group
94+
::field{name="sourceX" type="number" optional}
95+
The x-coordinate of the connection start point.
96+
::
97+
98+
::field{name="sourceY" type="number" optional}
99+
The y-coordinate of the connection start point.
100+
::
101+
102+
::field{name="targetX" type="number" optional}
103+
The x-coordinate of the connection end point.
104+
::
105+
106+
::field{name="targetY" type="number" optional}
107+
The y-coordinate of the connection end point.
108+
::
109+
::

‎apps/www/content/3.components/2.workflow/controls.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: Controls
3+
description: A styled controls component for Vue Flow-based canvases with zoom and fit view functionality.
4+
icon: lucide:maximize-2
5+
---
6+
7+
The `Controls` component provides interactive zoom and fit view controls for Vue Flow canvases.
8+
It includes a modern, themed design with backdrop blur and card styling.
9+
10+
::alert{type="info" icon="lucide:info"}
11+
The Controls component is designed to be used with the [Canvas](/components/workflow/canvas) component. See the [Workflow](/examples/workflow) demo for a full example.
12+
::
13+
14+
## Install using CLI
15+
16+
::tabs{variant="card"}
17+
::div{label="ai-elements-vue"}
18+
```sh
19+
npx ai-elements-vue@latest add controls
20+
```
21+
::
22+
::div{label="shadcn-vue"}
23+
24+
```sh
25+
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/controls.json
26+
```
27+
::
28+
::
29+
30+
## Install Manually
31+
32+
Copy and paste the following code in the same folder.
33+
34+
::code-group
35+
```vue [Controls.vue] height=260 collapse
36+
<script setup lang="ts">
37+
import type { HTMLAttributes } from 'vue'
38+
import { cn } from '@repo/shadcn-vue/lib/utils'
39+
import { Controls as ControlsPrimitive } from '@vue-flow/controls'
40+
import { reactiveOmit } from '@vueuse/core'
41+
import '@vue-flow/controls/dist/style.css'
42+
43+
const props = defineProps<{
44+
class?: HTMLAttributes['class']
45+
}>()
46+
47+
const delegatedProps = reactiveOmit(props, 'class')
48+
</script>
49+
50+
<template>
51+
<ControlsPrimitive
52+
data-slot="controls"
53+
v-bind="delegatedProps"
54+
:class="cn(
55+
'gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!',
56+
'[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!',
57+
props.class,
58+
)"
59+
/>
60+
</template>
61+
```
62+
63+
```ts [index.ts]
64+
export { default as Controls } from './Controls.vue'
65+
```
66+
::
67+
68+
## Features
69+
70+
- Zoom in/out controls
71+
- Fit view button to center and scale content
72+
- Rounded pill design with backdrop blur
73+
- Theme-aware card background
74+
- Subtle drop shadow for depth
75+
- Full TypeScript support
76+
- Compatible with all Vue Flow control features
77+
78+
## Props
79+
80+
### `<Controls />`
81+
82+
::field{name="class" type="string" defaultValue="''"}
83+
Additional CSS classes to apply to the controls.
84+
::

0 commit comments

Comments
 (0)