Flow Viewer Component

@sketchmonk/flow-viewer-vue is a headless library for drawing workflow flow diagrams in Vue. It provides a set of components to create and manage nodes and connections in a flow diagram.

Components

• FlowViewerRoot: The root component used to create the canvas.
• FlowViewerNode: A node in the workflow.
• FlowViewerConnection: A connection from one node to the next.
• FlowViewerConnectionLabel: Used inside a FlowViewerConnection to add a label to the connection path.

Component APIs

FlowViewerRoot.vue

Prop	Type	Description	Default
margin	number	The margin around the flow viewer.	12
cornerRadius	number	The corner radius for the flow viewer.	8
idPrefix	string	The prefix for IDs within the flow viewer.	'flow'

FlowViewerNode.vue

Prop	Type	Description	Default
name	string	The name of the node. This is used to generate a unique node ID.	-

FlowViewerConnection.vue

Prop	Type	Description	Default
source	string	The ID of the source node.	-
target	string	The ID of the target node.	-
sourceSide	SourceSide	The side of the source node where the connection starts.	-
targetSide	TargetSide	The side of the target node where the connection ends.	-

FlowViewerConnectionLabel.vue

Prop	Type	Description	Default
width	number	The width of the label.	140
height	number	The height of the label.	20
offset	Point	The offset position of the label.	{ x: 0, y: 0 }

Sample Usage

Below is a sample usage of the library:

<script setup lang="ts">
import { FlowViewerConnection, FlowViewerConnectionLabel, FlowViewerNode, FlowViewerRoot } from '@sketchmonk/flow-viewer-vue';
</script>
<template>
  <FlowViewerRoot>
    <div class="flow">
      <FlowViewerNode name="source">
        <div class="node">
          Source
        </div>
      </FlowViewerNode>
      <FlowViewerNode name="target">
        <div class="node">
          Target
        </div>
      </FlowViewerNode>
    </div>
    <template #connections>
      <FlowViewerConnection
        source="source"
        target="target"
        sourceSide="right"
        targetSide="left"
      >
        <template #path="{ d }">
          <path :d="d" stroke="black" stroke-width="2" fill="none" />
        </template>
        <FlowViewerConnectionLabel>
          <div class="label">
            <div class="label__text">
              Connection Label
            </div>
          </div>
        </FlowViewerConnectionLabel>
      </FlowViewerConnection>
    </template>
  </FlowViewerRoot>
</template>
<style lang="css">
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 24px;
  font-family: 'Nunito Sans', sans-serif;
}
.label {
  height: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 50rem;
  background-color: #fff;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  padding: 0px 12px;
  justify-content: center;
  box-sizing: border-box;
  font-family: 'Nunito Sans', sans-serif;
}
.label__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node {
  height: 40px;
  min-width: 200px;
  font-family: 'Nunito Sans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 4px 12px;
  border: 2px solid #000;
}
</style>

Installation

npm install @sketchmonk/flow-viewer-vue

Usage

Import the components you need from the library and use them in your Vue components as shown in the sample usage above.

For more details, refer to the documentation.