Wittyna Flow Chart

A Vue 3 flow chart component library built with TypeScript.

Installation

npm install wittyna-flow-chart
# or
pnpm add wittyna-flow-chart
# or
yarn add wittyna-flow-chart

Usage

Basic Usage

<template>
  <FlowChart :data="flowData" :nodeDefs="nodeDefs" />
</template>

<script setup lang="ts">
import { FlowChart, getFlowChartRootData } from 'wittyna-flow-chart';
import type { NodeDef } from 'wittyna-flow-chart';

const nodeDefs: NodeDef[] = [
  {
    type: "condition",
    component: () => (
      <div
        style="
          position: relative;
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <svg
          width="100"
          height="100"
          style="position: absolute; top: 0; left: 0;"
        >
          <polygon
            points="50,0 100,50 50,100 0,50"
            fill="#fff"
            stroke="#009688"
            stroke-width="2"
          />
        </svg>
        <span
          style="
            font-size: 14px;
            font-weight: bold;
            color: #333;
            z-index: 1;
            position: relative;
          "
        >
          条件
        </span>
      </div>
    ),
    typeName: "条件",
  },
];

const flowData = getFlowChartRootData();
</script>

As Vue Plugin

import { createApp } from 'vue';
import { install as FlowChartPlugin } from 'wittyna-flow-chart';
import App from './App.vue';

const app = createApp(App);
app.use(FlowChartPlugin);
app.mount('#app');

API

FlowChart Props

• data: FlowChartBranchType - The flow chart data structure
• nodeDefs: NodeDef[] - Array of node definitions

Types

• FlowChartBranchType - Flow chart branch data structure
• NodeDef - Node definition interface
• FlowChartNodeType - Flow chart node type

Utilities

• getFlowChartRootData() - Get initial flow chart data
• createStore(data, nodeDefs) - Create flow chart store
• FlowChartStoreKey - Store injection key

Dependencies

This package requires the following peer dependencies:

• Vue 3.x
• Element Plus
• Lodash ES

License

MIT