CODEWITHSUNDEEP
javascriptsvgangularflowchart
Varun Goel
Varun Goel

Reputation: 339

Angular 2 - Flowchart / Sequence Diagram - Library

I have a specific requirement related to Diagram creation and rendering.

Although we have been able to find: jsplumbtoolkit, mermaid and gojs which have nice features but none of these seem to fit our requirements.

e.g. Consider A --> B (A connected with B using 1 px solid black connector line)

I request your input if there is any library (free/paid) that has features to support this? Or should our team focus on creating our own?

Thanks Varun

Upvotes: 2

Views: 5942

Answers (1)

Walter Northwoods
Walter Northwoods

Reputation: 4116

I think this demonstrates the fundamental feature what you are looking for:

<!DOCTYPE html>
<html>
<head>
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs"></script>
<link href="goSamples.css" rel="stylesheet" type="text/css"/>  <!-- you don't need to use this -->
<script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center,

          // Whenever a link is added to the GraphLinksModel, add a label Node to the Link and two Links:
          // one from the "fromNode" to the new label node, and one from the label node to the "toNode".
          // All three Parts are *not* added to the model, but are added directly to the Diagram.
          "ModelChanged": function(e) {
            if (e.modelChange === "linkDataArray") {
              if (e.change === go.ChangedEvent.Property) {
                var arr = e.newValue;
                for (var i = 0; i < arr.length; i++) {
                  labelLink(arr[i]);
                }
              } else if (e.change === go.ChangedEvent.Insert) {
                labelLink(e.newValue);
              }
            } else if (e.modelChange === "linkFromKey") {
              decorateFirstHalf(e.object);
            } else if (e.modelChange === "linkToKey") {
              decorateSecondHalf(e.object);
            }
          }
        });

    function labelLink(linkdata) {
      var link = myDiagram.findLinkForData(linkdata);
      if (link !== null && link.labelNodes.count === 0 && link.selectable) {
        // this is not a template and thus cannot support Bindings
        var lab = $(go.Node, { selectable: false, copyable: false, movable: false, isLayoutPositioned: false },
                    $(go.Shape, { width: 0, height: 0, stroke: null, strokeWidth: 0 })
                  );
        myDiagram.add(lab);
        lab.labeledLink = link;
        if (link.fromNode !== null) decorateFirstHalf(linkdata);
        if (link.toNode !== null) decorateSecondHalf(linkdata);
      } else {
        if (window.console) window.console.log("no link? " + link);
      }
    }

    function decorateFirstHalf(linkdata) {
      var link = myDiagram.findLinkForData(linkdata);
      if (link !== null) {
        var lab = link.labelNodes.first();
        if (lab !== null) {
          var first = lab.findLinksInto().first();
          // this is not a template and thus cannot support Bindings
          if (!first) first = $(go.Link, { selectable: false, pickable: false, isLayoutPositioned: false },
                                $(go.Shape, { stroke: "red", strokeWidth: 2 })
                              );
          first.fromNode = link.fromNode;
          first.toNode = lab;
          myDiagram.add(first);
        }
      }
    }

    function decorateSecondHalf(linkdata) {
      var link = myDiagram.findLinkForData(linkdata);
      if (link !== null) {
        var lab = link.labelNodes.first();
        if (lab !== null) {
          var second = lab.findLinksOutOf().first();
          // this is not a template and thus cannot support Bindings
          if (!second) second = $(go.Link, { selectable: false, pickable: false, isLayoutPositioned: false },
                                  $(go.Shape, { stroke: "green", strokeWidth: 2, strokeDashArray: [4, 2] })
                                );
          second.fromNode = lab;
          second.toNode = link.toNode;
          myDiagram.add(second);
        }
      }
    }

    // templates

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }),
        $(go.TextBlock,
          { margin: 5 },
          new go.Binding("text", "", go.Binding.toString))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        { relinkableFrom: true, relinkableTo: true, selectionAdorned: false },
        $(go.Shape, { stroke: "transparent", strokeWidth: 2 }),
        $(go.Shape, { toArrow: "OpenTriangle", stroke: "blue", strokeWidth: 1.5 })
      );

    // model

    myDiagram.model.nodeDataArray = [
      { key: "Alpha" },
      { key: "Beta" },
      { key: "Gamma" }
    ];
    myDiagram.model.linkDataArray = [
      { from: "Alpha", to: "Beta" }
    ];

    myDiagram.model.undoManager.isEnabled = true;

    // for debug-time understanding what's happening to the model:
    myDiagram.addModelChangedListener(function(e) {
      if (e.isTransactionFinished) {
        // update the model information shown on the page
        document.getElementById("savedData").textContent = myDiagram.model.toJson();
      }
    });
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px blue; width:100%; height:300px;"></div>
  <div style="display: inline">
    Saved JSON data:<br />
    <pre id="savedData" />
  </div>
</body>
</html>

It could be extended to demonstrate having the two strokes change at 30% instead of at 50% distance and dynamically modifying the Shape properties of individual Links. Contact us if you are interested at GoJS at our nwoods.com domain.

Upvotes: 1

Related Questions