Go.js Introduction and example Demonstration

This is a creation in Article, where the information may have evolved or changed.

Gojs is a JavaScript library that lets you easily create interactive diagrams of modern web browsers. GOJS supports the data binding of graphical templates and graphical object property data models. You only need to save and restore the model, including the simple JavaScript object that holds the application requirements of any nature. Many of the predefined tools and commands perform the standard behavior required by most charts. Customization of appearance and behavior is a matter of most setting properties.

Download Address: http://gojs.net/latest/doc/download.html

Examples of flowchart and topology diagrams developed using GOJS: http://gojs.net/latest/samples/index.html

Gojs Watermark Version: http://download.csdn.net/detail/qq_14966339/9569675

Gojs Example Demo:

function init () {if (window.gosamples) gosamples (); Init for these samples--you don ' t need to call this var $ = go.  Graphobject.make; For conciseness in defining templates MyDiagram = $ (go. Diagram, "Mydiagramdiv",//must name or refer to the DIV HTML element {Initialcontentalignment:go. Spot.center, Allowdrop:true,//must be true to accept drops from the Palette "Linkdrawn": Showlinklab El,//This diagramevent listener is defined below "linkrelinked": Showlinklabel, "Animationmanager.dur ation ": +,//slightly longer than default (600ms) animation" undomanager.isenabled ": TRUE//Enable Undo &amp ;    Redo}); When the document was modified, add a "*" to the title and enable the "Save" button Mydiagram.adddiagramlistener ("Mod      Ified ", function (e) {var button = document.getElementById (" Savebutton ");      if (button) button.disabled =!mydiagram.ismodified; var idx = document. Title.indexof ("*");      if (mydiagram.ismodified) {if (idx < 0) Document.title + = "*";      } else {if (idx >= 0) document.title = document.title.substr (0, IDX);    }    }); Helper Definitions for node templates function NodeStyle () {return [//-node.location comes from th        E "Loc" property of the node data,//converted by the Point.parse static method. If The node.location is changed, it updates the ' Loc ' property of the Node data,//converting back using the Po        Int.stringify static method. New go. Binding ("Location", "Loc", go.) Point.parse). Maketwoway (go. Point.stringify), {//The node.location is at the center of each Node Locationspot:go. Spot.center,//isshadowed:true,//shadowcolor: "#888",//Handle mouse Enter/leave events to S How/hide the Ports mouseenter:function (E, obj) {showports (Obj.part, True);}, Mouseleave:function (E, obj) {showports (Obj.part, false);}    }      ];    }//Define a function for creating a "port" which is normally transparent. The "name" is used as the Graphobject.portid, the "spot" was used to control how links connect//and where the port is positioned on the node, and the Boolean "Output" and "input" arguments//control whether the user can draw links fr    Om or to the port. function Makeport (name, spot, output, input) {//The port is basically just a small circle that have a white stroke w Hen it is made visible return $ (go. Shape, "Circle", {fill: "Transparent", stroke:null,//This is changed To ' White ' in the Showports function desiredsize:new go.                  Size (8, 8), Alignment:spot, alignmentfocus:spot,//Align the port on the main Shape Portid:name,//Declare this object to be a "port" Fromspot:spot, Tospot:spot,//DECLARE WHEre links may connect at this port fromlinkable:output, tolinkable:input,//Declare whether the user May draw links to/from here cursor: ' pointer '//show a different cursor to indicate potential link poin    T});    }//define the Node templates for regular nodes var lighttext = ' WhiteSmoke '; MyDiagram.nodeTemplateMap.add ("",//the default category $ (go.        Node, "Spot", NodeStyle (),//The main object is a Panel this surrounds a TextBlock with a rectangular Shape $ (go. Panel, "Auto", $ (go. Shape, "Rectangle", {fill: "#00A9C9", stroke:null}, new go. Binding ("figure", "figure")), $ (go.              TextBlock, {font: "bold 11pt Helvetica, Arial, Sans-serif", Stroke:lighttext, Margin:8, maxsize:new go. Size (, NaN), Wrap:go. Textblock.wrapfit, editable:true}, new go. Binding ("text"). Maketwoway ())),//four named ports, one on each side:makeport ("T", go. Spot.top, False, True), Makeport ("L", go. Spot.left, True, True), Makeport ("R", go. Spot.right, True, True), Makeport ("B", go.    Spot.bottom, True, false)); MyDiagram.nodeTemplateMap.add ("Start", $ (go. Node, "Spot", NodeStyle (), $ (go. Panel, "Auto", $ (go. Shape, "Circle", {minsize:new go. Size ((+), fill: "#79C900", Stroke:null}), $ (go. TextBlock, "Start", {font: "bold 11pt Helvetica, Arial, Sans-serif", stroke:lighttext}, new go. Binding ("text")),//three named ports, one on each side except the top, all output Only:makeport ( "L", go. Spot.left, True, false), Makeport ("R", go. Spot.right, True, false), Makeport ("B", go.    Spot.bottom, True, false)); MyDiagram.nodeTemplateMap.add ("End", $ (go. Node, "Spot", NodeStyle (), $ (go. Panel, "Auto", $ (go. Shape, "Circle", {minsize:new go. Size ((+), fill: "#DC3C00", Stroke:null}), $ (go. TextBlock, "End", {font: "bold 11pt Helvetica, Arial, Sans-serif", stroke:lighttext}, new go. Binding ("text")),//three named ports, one on each side except the bottom, all input Only:makepor T ("T", go.) Spot.top, False, True), Makeport ("L", go. Spot.left, False, True), Makeport ("R", go.    Spot.right, False, true)); MyDiagram.nodeTemplateMap.add ("Comment", $ (go. Node, "Auto", NodeStyle (), $ (go. Shape, "File", {fill: "#EFFAB4", Stroke:null}), $ (go. TextBlock, {margin:5, maxsize:new go. Size (Wrap:go, NaN),. Textblock.wrapfit, TextAlign: "Center", Editable:true, Font: "Bold 12pt Helvetica, Arial , Sans-serif ", Stroke: ' #454545 '}, new go. Binding ("text"). Maketwoway ())        No ports, because no links is allowed to connect with a comment)); Replace the default Link template in the Linktemplatemap mydiagram.linktemplate = $ (go. Link,//the whole link panel {routing:go. Link.avoidsnodes, Curve:go.          Link.jumpover, Corner:5, Toshortlength:4, Relinkablefrom:true, Relinkableto:true, Reshapable:true, Resegmentable:true,//mouse-overs subtly highlight links:mouseEnter:funct Ion (E, link) {link.findobject ("HIGHLIGHT"). Stroke = "Rgba (30,144,255,0.2)";}, Mouseleave:function (e, link) {L Ink.findobject ("HIGHLIGHT"). Stroke = "Transparent"; }}, new go. Binding ("points"). Maketwoway (), $ (go. Shape,//The highlight shape, normally transparent {ispanelmain:true, strokewidth:8, stroke: "Transparent", Name: "HIGHLIGHT"}), $ (go. Shape,//The link path shape {ispanelmain:true, stroke: "GRAy ", strokewidth:2}), $ (go. Shape,//The arrowhead {toarrow: "Standard", Stroke:null, Fill: "Gray"}), $ (go. Panel, "Auto",//the link label, normally not visible {visible:false, Name: "Label", Segmentindex:2, Segment fraction:0.5}, new go. Binding ("Visible", "visible"). Maketwoway (), $ (go. Shape, "roundedrectangle",//the label shape {fill: "#F8F8F8", Stroke:null}), $ (go. TextBlock, "Yes",//The label {textAlign: "center", font: "10pt Helvetica, Arial, Sans-serif ", Stroke:" #333333 ", editable:true}, new go.    Binding ("text"). Maketwoway ()));    Make link labels the visible if coming out of a "conditional" node.    This listener was called by the "Linkdrawn" and "linkrelinked" diagramevents.      function Showlinklabel (e) {var label = e.subject.findobject ("label"); if (label!== null) label.visible= (E.subject.fromnode.data.figure = = = = "Diamond"); }//temporary links used by Linkingtool and Relinkingtool is also orthogonal:myDiagram.toolManager.linkingTool.te Mporarylink.routing = go.    link.orthogonal; MyDiagram.toolManager.relinkingTool.temporaryLink.routing = go.    link.orthogonal;  Load (); Load an initial diagram from some JSON text//Initialize the Palette that's on the left side of the page Mypale Tte = $ (go. Palette, "Mypalettediv",//must name or refer to the DIV HTML element {"Animationmanager.duration": 800 ,//slightly longer than default (600ms) animation nodeTemplateMap:myDiagram.nodeTemplateMap,//share the TEM Plates used by MyDiagram model:new go. Graphlinksmodel ([//Specify the contents of the Palette {category: "Start", Text: "Start"}, {Te XT: "Step"}, {text: "???", Figure: "Diamond"}, {category: "End", Text: "End"}, {cat Egory: "CommenT ", Text:" Comment "}])}); The following code overrides GOJS focus to stop the browser from scrolling//the page when either the Diagram or Pa    Lette is clicked or dragged onto.      function Customfocus () {var x = Window.scrollx | | window.pagexoffset; var y = window.scrolly | |      Window.pageyoffset; Go.      Diagram.prototype.doFocus.call (this);    Window.scrollto (x, y);    } mydiagram.dofocus = Customfocus;  Mypalette.dofocus = Customfocus; }//End init//make all ports in a node visible when the mouse are over the node function showports (node, show) {VA    R diagram = Node.diagram;    if (!diagram | | diagram.isreadonly | |!diagram.allowlink) return; Node.ports.each (function (port) {Port.stroke = (show?      "White": null);  }); }//Show the diagram ' s model in JSON format, the user may edit function save () {document.getElementById ("Mysave    Dmodel "). Value = MyDiagram.model.toJson ();  Mydiagram.ismodified = false; } FuNction load () {Mydiagram.model = go.  Model.fromjson (document.getElementById ("Mysavedmodel"). Value);        }//Add an SVG rendering of the diagram at the end of this page function makesvg () {var SVG = Mydiagram.makesvg ({    scale:0.5});    Svg.style.border = "1px solid black";    obj = document.getElementById ("Svgarea");    Obj.appendchild (SVG);    if (Obj.children.length > 0) {obj.replacechild (SVG, obj.children[0]); }}<div id= "sample" > <div style= "width:100%; White-space:nowrap; " > <span style= "Display:inline-block; Vertical-align:top; width:100px "> <div id=" mypalettediv "style=" Border:solid 1px black; height:720px "></div> </span> <span style=" Display:inline-block; Vertical-align:top; width:80% "> <div id=" mydiagramdiv "style=" Border:solid 1px black; height:720px "></div> </span> </div> <p> The FlowChart sample demonstrates several key FE  Atures of Gojs,namely <a href= ". /intro/palette.html ">palette</a>s, <a href=". /intro/links.html ">linkable nodes</a>, drag/drop behavior, <a href=". /intro/textblocks.html ">text Editing</a>, and the use of <a href=".  /intro/templatemaps.html ">node Template maps</a> in diagrams.  </p> <p> Mouse-over A Node to view its ports.  Drag from these ports to create new Links.  Selecting Links allows you to re-shape and re-link them.  Selecting a Node and then clicking its TextBlock would allow you to edit text (except on the Start and End Nodes). </p> <button id= "Savebutton" onclick= "Save ()" >Save</button> <button onclick= "load ()" >load  </button> Diagram Model saved in JSON format: <textarea id= "Mysavedmodel" style= "width:100%;height:300px" >{ "Class": "Go." Graphlinksmodel "," Linkfromportidproperty ":" Fromport "," Linktoportidproperty ":" ToPort "," Nodedataarray ": [{" Category ":" Comment "," loc ":" 360-10 "," TexT ":" Kookie Brittle "," Key ": -13},{" Key ":-1," category ":" Start "," Loc ":" 175 0 "," text ":" Start "},{" key ": 0," loc ":" 0 77 ","  Text ":" Preheat oven to 375 F "},{" key ": 1," loc ":" 175 "," text ":" In a bowl, blend:1 Cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt "},{" key ": 2," loc ":" 175 "," text ":" Gradually beat in 1 cup sugar and 2 cups sifted flour "},{" key ": 3," L OC ":" 175 "," text ":" Mix in 6 oz (1 cup) Nestle ' s semi-sweet chocolate morsels "},{" key ": 4," loc ":" 175 370 "," text ":" Pres s evenly into ungreased 15x10x1 pan "},{" key ": 5," loc ":" 352 "," text ":" Finely chop "cup of your choice of nuts"},{"key ": 6," loc ":" 175 "," text ":" Sprinkle nuts on top "},{" key ": 7," loc ":" 175 "," text ":" Bake for minutes and let cool "} {"Key": 8, "loc": "175 570", "text": "Cut into rectangular grid"},{"key": -2, "category": "End", "loc": "175 640", "Text": " Enjoy! "}]," Linkdataarray ": [{' From ': 1, ' to ': 2, ' fromport ': ' B ', ' toPort ': ' T '},{' from ': 2, ' to ': 3, ' fromport ': ' B ', ' ToPort ":" T "},{" from ": 3, ' to ': 4," fromPort ":" B "," ToPort ":" T "},{" from ": 4," to ": 6," Fromport ":" B "," ToPort ":" T "},{" from ": 6," to ": 7," Fromport ":" B "," ToPort " : "T"},{"from": 7, ' to ': 8, "Fromport": "B", "ToPort": "T"},{"from": 8, ' to ': -2, "Fromport": "B", "ToPort": "T"},{"from":-1, ' To ': 0, ' fromport ': ' B ', ' toPort ': ' t '},{' from ':-1, ' to ': 1, ' fromport ': ' B ', ' toPort ': ' t '},{' from ':-1, ' to ': 5, ' Fromport ":" B "," ToPort ":" T "},{" from ": 5, ' to ': 4," Fromport ":" B "," ToPort ":" T "},{" from ": 0," to ": 4," Fromport ":" B "," ToPort ":" T "     }]} </textarea> <p>click the button below to render the current Gojs Diagram into SVG in one-half scale.     The SVG is not a interactive like the Gojs diagram and can be used for printing or display. For more information, see the page on <a href= ". /intro/makingsvg.html ">making svg</a>.</p> <button onclick=" makesvg () ">Render as SVG</ button> <div id= "Svgarea" ></div></div>

：