Block Diagram Editor, Drawing Nodes and Links with Different Shapes and Colors

Double-click in the background to create a new node. Create groups by selecting nodes and invoking Ctrl-G; Ctrl-Shift-G to ungroup a selected group. A selected node will have four orange triangles that when clicked will automatically copy the node and link to it. Use the context menu to change the shape, color, thickness, and dashed-ness.

Links can be drawn by dragging from the side of each node. A selected link can be reconnected by dragging an end handle. Use the context menu to change the color, thickness, dashed-ness, and which side the link should connect with. Press the F2 key to start editing the label of a selected link.

{ "class": "GraphLinksModel",
  "pointsDigits": 0,
  "nodeDataArray": [
{"text":"Find Problem","key":-9,"loc":"-20 -140","color":"#3358ff","fill":"white","figure":"Procedure","thickness":3},
{"text":"What do we want?","key":-10,"loc":"-110 -320","group":-16,"figure":"Ellipse","fill":"white"},
{"text":"What do our users want?","key":-11,"loc":"70 -320","group":-20,"figure":"Ellipse","fill":"#ffffff","color":"black"},
{"text":"Meetings","key":-12,"loc":"-110 -440","group":-16,"figure":"TriangleDown","fill":"#ffffff"},
{"text":"Reviews","key":-13,"loc":"70 -440","group":-20,"figure":"TriangleDown","fill":"#ffffff","color":"black"},
{"text":"Can we solve it?","key":-14,"loc":"190 -140","color":"#7d33ff","fill":"#ffffff","figure":"Diamond","size":"140 80","thickness":3},
{"text":"Design Prototype","key":-7,"loc":"337.191 -440","color":"black","fill":"#f2dfe0","group":-17,"figure":"Procedure","size":"140 80"},
{"text":"Does it work?","key":-8,"loc":"337.191 -300","color":"black","fill":"#f2dfe0","group":-17,"figure":"Diamond","size":"140 80"},
{"text":"Market/Sell\nSolution","key":-15,"loc":"470 -157.5","color":"#25ad23","fill":"#ffffff","group":-19,"figure":"Rectangle","size":"120 60"},
{"isGroup":true,"text":"Problem-Solving Process","key":-17,"loc":"365.40458203125 -370","fill":"#fcbbbd","thickness":3,"color":"#000000"},
{"text":"Implement \nSolution","key":-18,"loc":"470 -82.5","color":"#25ad23","fill":"#ffffff","group":-19,"figure":"Rectangle","size":"120 60"},
{"isGroup":true,"text":"Internal","key":-16,"loc":"-110 -380","fill":"#d5ebff","dash":null,"thickness":1,"group":-22},
{"isGroup":true,"text":"External","key":-20,"loc":"70 -380","fill":"#d5ebff","dash":null,"thickness":1,"group":-22},
{"isGroup":true,"text":"Distribute Solution","key":-19,"loc":"470 -120","fill":"#b3e6b3","thickness":2,"dash":[4,4]},
{"text":"Yes!","key":-21,"loc":"350 -120","size":"60 40","figure":"ManualOperation","fill":"#ffffff","color":"#25ad23","thickness":3},
{"isGroup":true,"text":"Sources","key":-22,"loc":"-20 -388.66328125","fill":"#a5d2fa","dash":[4,4],"color":"#3358ff"}
  ],
    "linkDataArray": [
{"from":-12,"to":-10,"points":[-110,-410,-110,-400,-110,-380,-110,-380,-110,-360,-110,-350],"dash":null,"dir":1},
{"from":-13,"to":-11,"points":[70,-410,70,-400,70,-380,70,-380,70,-360,70,-350],"dash":null,"color":"#000000","dir":1},
{"from":-10,"to":-9,"points":[-110,-290,-110,-280,-110,-230,-40,-230,-40,-180,-40,-170],"dir":2,"dash":[4,4]},
{"from":-11,"to":-9,"points":[70,-290,70,-280,70,-230,0,-230,0,-180,0,-170],"dash":[4,4],"dir":2},
{"from":-9,"to":-14,"points":[40,-140,50,-140,80,-140,80,-140,110,-140,120,-140],"dir":1,"color":"#3358ff"},
{"from":-14,"to":-9,"points":[190,-100,190,-90,190,-72.39579391479492,-20,-72.39579391479492,-20,-100,-20,-110],"fromSpot":"BottomSide","toSpot":"BottomSide","text":"No","color":"#ff3333","thickness":2,"dir":1},
{"from":-14,"to":-7,"points":[190,-180,190,-190,190,-440,223.5955,-440,257.191,-440,267.191,-440],"fromSpot":"TopSide","toSpot":"LeftSide","color":"#7d33ff","dir":1},
{"from":-7,"to":-8,"points":[337.191,-400,337.191,-390,337.191,-370,337.191,-370,337.191,-350,337.191,-340],"dir":1},
{"from":-8,"to":-15,"points":[360.5243333333333,-260,360.5243333333333,-250,360.5243333333333,-157.5,380.26216666666664,-157.5,400,-157.5,410,-157.5],"toSpot":"LeftSide","dir":1},
{"from":-8,"to":-18,"points":[313.85766666666666,-260,313.85766666666666,-242,313.85766666666666,-82.5,356.92883333333333,-82.5,400,-82.5,410,-82.5],"toSpot":"LeftSide","fromSpot":"BottomSide","text":"","dir":1},
{"from":-8,"to":-7,"points":[407.191,-300,417.191,-300,443,-300,443,-440,417.191,-440,407.191,-440],"toSpot":"RightSide","fromSpot":"RightSide","text":"No\n","color":"#ff3333","dir":1},
{"from":-15,"to":-13,"points":[530,-157.5,540,-157.5,563.3333740234375,-157.5,563.3333740234375,-557.7291679382324,182.66668701171875,-557.7291679382324,182.66668701171875,-440,140,-440,130,-440],"toSpot":"RightSide","fromSpot":"RightSide","dash":[2,4],"dir":1},
{"from":-18,"to":-12,"points":[530,-82.5,540,-82.5,587.3333740234375,-82.5,587.3333740234375,-579.0624961853027,-238.66665649414062,-579.0624961853027,-238.66665649414062,-440,-180,-440,-170,-440],"fromSpot":"RightSide","toSpot":"LeftSide","dash":[2,4],"dir":1}
  ]}

GoJS Features in this sample

Geometry Path Strings

The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.

One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.

More information can be found in the GoJS Intro.

Related samples