写个文档

写个文档 gojs 来写流程的东西 哈哈 有图就很方便了

<script src="./1.js"></script>
<div id="myDiagramDiv" style="height:100vh; background-color: #DAE4E0"></div> 
<script>
    var $ = go.GraphObject.make;

    var nodeDataArray = [
        { key: "ROOT", text: '前端触发'},

        { key: "model", text: 'model'},

        { key: "a", text: 'a组 悬浮窗', },
        { key: "b", text: 'b组 悬浮窗',},
        { key: "c", text: 'c组 悬浮窗',},


        { key: "a1", text: '圆圈', },
        { key: "a2", text: 'x轴', },
        { key: "a3", text: 'y轴', },
         
         
    ]
    var linkDatasArray = [
        {from: 'ROOT', to: 'model'},

        {from: 'model', to: 'a'},
        {from: 'model', to: 'b'},
        {from: 'model', to: 'c'},

        {from: 'a', to: 'a1'}, 
        
        {from: 'a1', to: 'a2'},
        {from: 'a1', to: 'a3'},
         
    ]

    var diagram = $(go.Diagram, "myDiagramDiv", {
        layout: $(go.TreeLayout, { angle: 0, nodeSpacing: 20, layerSpacing: 70
        }),
    });

    //加上定时器延时一下，防止操作过早，节点还未渲染而不生效
    setTimeout(()=>{
        //diagram.commandHandler.scrollToPart(diagram.findNodeForKey('ROOT'));
    }, 1000)
    
    // 创建一个节点模版
    diagram.nodeTemplate = $(go.Node, "Spot",
        $(go.Panel, "Auto",
            $(go.Shape, { figure: "Rectangle",
            }, new go.Binding("figure", "figure"), new go.Binding("fill", "color"), new go.Binding("stroke", "color")),
            $(go.TextBlock, { margin: 8, stroke: '#fff',  editable: true, }, new go.Binding("text", "text")),
            { click: (e, obj)=>{ console.log('节点点击', e, obj) } },
        ),
  
    );
    // 创建一个箭头模版
    diagram.linkTemplate = $(go.Link,
        { routing: go.Link.Orthogonal},
         $(go.Shape,
            new go.Binding('stroke', 'link_color')
        ), 
        $(go.Shape,
            { toArrow: "OpenTriangle" },
            new go.Binding('stroke', 'link_color')
        ),
        { click: (e, obj)=>{
            console.log('线条', e, obj)
        } },
    );
    // 生成节点图
    diagram.model = new go.GraphLinksModel(nodeDataArray, linkDatasArray)
</script>