dagre-flowchart

基于dagre-d3的流程图绘制展示

const flowChartCfg = new FlowChart(svgContainer, flowChartCfg)

• svgContainer: svg容器元素
• flowChartCfg: 图形绘制与展示所需的配置数据

/**
 * 节点信息
 */
export interface StatusNodeOptions {
    nodeNo: string;
    nodeName: string;
    nodeValue?: {
        description?: string; // 节点描述
        label?: string;
        rx?: number;
        ry?: number;
        shape?: string;
        style?: string; // 节点style样式
        class?: string; // 节点class样式
    };
}

/**
 * 边
 */
export interface EdgeOptions {
    startNode: string;
    endNode: string;
    data?: {
        label?: string;
        /** 边的样式 */
        style?: string;
        /** 箭头样式 */
        arrowheadStyle?: string;
    };
}

export interface FlowChartCfg {
    /** 节点集合 */
    nodeList: StatusNodeOptions[];
    /** 边的集合 */
    edgeList: EdgeOptions[];

}