alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(guide): update intro page

Browse Source
This commit is contained in:
braks
2023-11-05 18:43:33 +01:00
committed by Braks
parent d670de4671
commit 39cf82431f
4 changed files with 74 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/getting-started.md
+21 -21
View File
@@ -32,32 +32,35 @@ and [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge)
Nodes additionally need a specific position, while edges require a source and a
target, both represented by node ids.
Below is a basic example:
::: warning Attention!
To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles.
Refer to the [Theming](/guide/theming) section for additional information.
:::
```vue
<script setup>
import {VueFlow} from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
const elements = ref([
// Nodes
// An input node, specified by using `type: 'input'`
{id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5}},
const elements = ref([
// Nodes
// An input node, specified by using `type: 'input'`
{id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5}},
// Default nodes, you can omit `type: 'default'`
{id: '2', label: 'Node 2', position: {x: 100, y: 100},},
{id: '3', label: 'Node 3', position: {x: 400, y: 100}},
// Default nodes, you can omit `type: 'default'`
{id: '2', label: 'Node 2', position: {x: 100, y: 100},},
{id: '3', label: 'Node 3', position: {x: 400, y: 100}},
// An output node, specified by using `type: 'output'`
{id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200}},
// An output node, specified by using `type: 'output'`
{id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200}},
// Edges
// Most basic edge, only consists of an id, source-id and target-id
{id: 'e1-3', source: '1', target: '3'},
// Edges
// Most basic edge, only consists of an id, source-id and target-id
{id: 'e1-3', source: '1', target: '3'},
// An animated edge
{id: 'e1-2', source: '1', target: '2', animated: true},
])
// An animated edge
{id: 'e1-2', source: '1', target: '2', animated: true},
])
</script>
<template>
@@ -73,9 +76,6 @@ Below is a basic example:
</style>
```
::: warning To ensure Vue Flow's functionality and design are optimally displayed, make sure you include the necessary
styles. Refer to the [Theming](/guide/theming) section for additional information. :::
## TypeScript
As Vue Flow is entirely written in TypeScript, we highly recommend utilizing TypeScript for improved developer
docs/src/guide/index.md
+52 -16
View File
@@ -2,35 +2,71 @@
title: Introduction
---
# Introduction
<script setup>
import PowerPlug from '~icons/mdi/power-plug';
import Flash from '~icons/mdi/flash';
import Lifebuoy from '~icons/mdi/lifebuoy';
import Puzzle from '~icons/mdi/puzzle';
import Speedometer from '~icons/mdi/speedometer';
import Cogs from '~icons/mdi/cogs';
import CubeOutline from '~icons/mdi/cube-outline';
import Image from '~icons/mdi/image';
import MapMarkerPath from '~icons/mdi/map-marker-path';
import Gamepad from '~icons/mdi/gamepad';
import Wrench from '~icons/mdi/wrench';
import ArrowExpand from '~icons/mdi/arrow-expand';
import LockCheck from '~icons/mdi/lock-check';
</script>
# Welcome to Vue Flow!
## What is Vue Flow?
Vue Flow is a Vue 3 library that brings interactivity to flowcharts and graphs.
Vue Flow is a bridge to the world of interactive flowcharts and graphs, empowering you to bring dynamism and
interactivity to flowcharts and graphic representations.
Whether it's crafting personal diagrams, generating dynamic editors, or anything else your imagination conjures up, Vue
Flow is your creative companion.
It is a tool to build your own diagrams, editors and whatever your imagination allows for.
Vue Flow makes it effortless to customize and extend basic functionalities by allowing the integration of your own
bespoke nodes and edges.
Additional components such as Background, Minimap, and Controls further enrich the interface,
transforming your creations into engaging platforms.
Easily implement your own custom nodes and edges and expand on the basic functionality and on top of that Vue Flow comes
with a couple of additional components like a Background, a Minimap and Controls.
Explore the [examples](/examples/) if you're eager to jump right in and get your hands on some code!
Check out the [examples](/examples/) if you want to dive directly into the code.
## <span class="flex gap-2 items-center"><Flash class="text-yellow-500" /> Key Features</span>
## Key Features
### <span class="flex gap-2 items-center"><Lifebuoy class="text-red-500" /> Seamless Setup</span>
- 👶 __Easy setup__: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more
Vue Flow gets you into the action quickly. With built-in features like element dragging, zooming and panning, and
selection, Vue Flow is ready to go right out of the box.
- 🎨 __Customizable__: Use your own custom nodes, edges, connection lines and expand on the Vue Flows functionality
### <span class="flex gap-2 items-center"><Puzzle class="text-green-500" /> Customizable</span>
- 🚀 __Fast__: Tracks changes reactively and only re-renders the appropriate elements
Vue Flow is yours to shape. From custom nodes and edges to connection lines, you can extend the functionality of Vue
Flow to fit your creative needs.
- 🧲 __Utils & Composition__: Comes with graph helper and state composable functions for advanced uses
### <span class="flex gap-2 items-center"><Speedometer class="text-" /> Efficient and Responsive</span>
- 📦 __Additional Components__:
Changes are tracked reactively by Vue Flow, ensuring that only the necessary elements are re-rendered.
- 🖼 Background: With two built-in patterns and some configuration options like height, width or color.
### <span class="flex gap-2 items-center"><Cogs class="text-gray-400" /> Utilities and Composability</span>
- 🧭 Minimap: Shows current nodes in a small map shape in the bottom right corner
Vue Flow is designed for complex uses, with built-in graph helper and state composable functions.
- 🕹 Controls: Control zoom behavior from a panel on the bottom left
### <span class="flex gap-2 items-center"><CubeOutline class="text-accent" /> Additional Components</span>
- 🦾 __Reliable__: Fully written in TypeScript
Vue Flow comes with supplementary components to enhance the user interface.
- <Image class="text-blue-500" /> [Background](/guide/components/background): Vue Flow offers two built-in patterns, with further configurations like
height, width, or color for personalizations.
- <MapMarkerPath class="text-pink-500" /> [MiniMap](/guide/components/minimap): This feature provides a birds-eye view of your nodes in a small map,
located at the bottom-right corner.
- <Gamepad class="text-purple-500" /> [Controls](/guide/components/controls): Vue Flow lets you handle zoom functions from a control panel on the bottom
left.
- <Wrench class="text-fuchsia-500" /> [NodeToolbar](/guide/components/node-toolbar): Get access to essential tools directly from the Node itself for easy manipulation and control of the Node
- <ArrowExpand class="text-yellow-500" /> [NodeResizer](/guide/components/node-resizer): Seamlessly adjust the size of your Node to fit your needs and preferences.
### <span class="flex gap-2 items-center"><LockCheck class="text-blue-500" /> Reliable</span>
Vue Flow is written fully in TypeScript, ensuring a reliable and secure experience for developers.