@if (flowChartUtility != null)
    {
<svg width="@ChartWidth" height="@ChartHeight" id="FlowChartContainer" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <marker id="idArrow"
                viewBox="0 0 20 20" refX="0" refY="10"
                markerUnits="strokeWidth" markerWidth="5" markerHeight="10"
                orient="auto">
            <path d="M 0 0 L 20 10 L 0 20 z" fill="black" stroke="black" />
        </marker>

    </defs>

    <text x="@(ChartWidth/2)" y="@(TitleHeight/2)" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="30" font-weight="800">@workflow.Name</text>

    @{
        dynamic startLine = flowChartUtility.GetStartInitLine();
        <line x1="@startLine.x1" y1="@startLine.y1 " x2="@startLine.x2" y2="@startLine.y2" stroke="black" stroke-width="2" marker-end="url(#idArrow)" />

    }

    @for (int iLevel = 0; iLevel < flowChartUtility.LevelNodes.Count; iLevel++)
    {
        @foreach (var node in flowChartUtility.LevelNodes[iLevel])
        {
            if (node.Type == 0)
            {
                <circle cx="@(node.x)" cy="@node.y" r="@(node.width / 2) " stroke="black" stroke-width="2" fill="@(node.FillColor)" />
                <a>
                    <text x="@(node.x)" y="@node.y" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="14">
                        @if (node == flowChartUtility.startNode)
                        {
                            @("开始")
                        }
                        else
                        {
                            if (node == flowChartUtility.endNode)
                            {
                                @("结束")
                            }
                            else
                            {
                                if (node.NodeObject is entity.workflowDefine.Step)
                                {
                                    @(((entity.workflowDefine.Step)node.NodeObject).Name)
                                }
                            }
                        }
                    </text>
                </a>
            }

            if (node.Type == 1)
            {
                <rect x="@(node.x - node.width / 2)" y="@(node.y - node.height / 2)" rx="10" ry="10" width="@node.width" height="@node.height" style="fill:@(node.FillColor);stroke:black;stroke-width:3;opacity:0.5" />

                <a @ondblclick="() => DoubleClickNode(node)" @onclick="()=>ClickNode(node)">
                    <text x="@node.x" y="@node.y" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="@rectFontSize" font-weight="700">
                        @if (node.NodeObject is entity.workflowDefine.Action)
                        {
                            @((workflow.InitAction == null || string.IsNullOrEmpty(workflow.InitAction.Name)) ? $"启动{workflow.Name}" : workflow.InitAction.Name)
                        }
                        else
                        {
                            @(((entity.workflowDefine.Step)node.NodeObject).Name)
                        }
                    </text>
                </a>
                @if (flowChartUtility.SelectedShape == node)
                {
                    <circle cx="@(node.x - node.width / 2)" cy="@(node.y)" r="3" stroke="black" stroke-width="1" fill="white" />
                    <circle cx="@(node.x + node.width / 2)" cy="@(node.y)" r="3" stroke="black" stroke-width="1" fill="white" />
                    <circle cx="@(node.x)" cy="@(node.y - node.height / 2)" r="3" stroke="black" stroke-width="1" fill="white" />
                    <circle cx="@(node.x)" cy="@(node.y + node.height / 2)" r="3" stroke="black" stroke-width="1" fill="white" />
                }
            }
        }
    }

    
    @foreach (var t in Transfers)
    {
        dynamic ret = flowChartUtility.GetLineParater(t);
        <line x1="@ret.x1" y1="@ret.y1" x2="@ret.x2" y2="@ret.y2" stroke="black" stroke-width="2" marker-end="url(#idArrow)" />

        <circle cx="@((ret.x1 + ret.x2) / 2)" cy="@((ret.y1 + ret.y2) / 2)" r="7" stroke="black" stroke-width="1.5" fill="white" />
        <a @ondblclick="() => DoubleClickTrasfer(t)" @onclick="()=>ClickTrasfer(t)">
            <text x="@((ret.x1 + ret.x2) / 2)" y="@((ret.y1 + ret.y2) / 2)" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="12">c</text>
        </a>

        if (SelectedObject != null && (SelectedObject is entity.workflowDefine.TrasferCondition))
        {
            if (SelectedObject.Id == t.Id)
            {
                var cX = (ret.x1 + ret.x2) / 2;
                var cY = (ret.y1 + ret.y2) / 2;
                var x1 = (cX + ret.x1) / 2;
                var y1 = (cY + ret.y1) / 2;
                var x2 = (cX + ret.x2) / 2;
                var y2 = (cY + ret.y2) / 2;
                <circle cx="@x1" cy="@y1" r="2" stroke="black" stroke-width="1" fill="white" />
                <circle cx="@x2" cy="@y2" r="2" stroke="black" stroke-width="1" fill="white" />
            }
        }

    }

    @if (Transfers.Count ==0)
    {
        dynamic endLine = flowChartUtility.GetEndStepLine();
        <line x1="@endLine.x1" y1="@endLine.y1" x2="@endLine.x2" y2="@endLine.y2" stroke="black" stroke-width="2" marker-end="url(#idArrow)" />

    }




</svg>
    }
    else
    {
        <Spin />
    }