vue项目中 LogicFlow 如何添加自定义html节点 并修改对应样式

LogicFlow - 免费开源的流程图编辑 js 框架，在 web 开发中快速实现类似流程图交互、编辑功能需求
记录自己得摸索日记:
如何在Vue项目中添加自定义HTML 节点,并修改自定义样式:import { HtmlNode, HtmlNodeModel } from "@logicflow/core";插入代码片

UmlModel extends HtmlNodeModel {
  setAttributes() {
    this.text.editable = false; // 禁止节点文本编辑
    // 设置节点宽高和锚点
    const width = 180;
    const height = 88;
    this.width = width;
    this.height = height;
  }
}
class UmlNode extends HtmlNode {

  setHtml(rootEl) {
    const { properties } = this.props.model;
    const node_md = this.props.model;
    const el = document.createElement("div");
    el.className = "uml-wrapper";
    el.id = node_md.id; // html 节点绑定节点唯一ID;即可通过id 获取对应dom元素 并进行相关业务操作
    const html = `
      <div class="logdom-hml" > </div>
    `;
    el.innerHTML = '';
    // 需要先把之前渲染的子节点清除掉。
    rootEl.innerHTML = "";
    rootEl.appendChild(el);
  }
}
let eventNodeBox = {
  html_node: {
    type: "html_node",
    view: UmlNode,
    model: UmlModel
  }
}
export default eventNodeBox;