Interactive Diagram for Building Flowcharts

Theme:

The Flowchart sample demonstrates several key features of GoJS, namely Palettes, Linkable nodes, Drag/Drop behavior, Text Editing, and the use of Node Template Maps in Diagrams.

Drag from the edges of a Node to create new Links. Selecting Links allows you to re-shape and re-link them. Selecting a Node and then clicking its TextBlock will allow you to edit text (except on the Start and End Nodes). Context clicking a Link creates an editable link label.

The dark and light themes are controlled using the ThemeManager.

Diagram Model saved in JSON format:

{ "class": "GraphLinksModel",
  "pointsDigits": 0,
  "nodeDataArray": [
    {"key":-1,"category":"Start","loc":"-237 41","text":"Start"},
    {"key":-2,"category":"End","loc":"277 696","text":"End"},
    {"category":"Conditional","text":"Is data\ntree-like?","key":-14,"loc":"40 165"},
    {"text":"Use a TreeModel","key":-5,"loc":"-100 230"},
    {"text":"Use a GraphLinksModel","key":-6,"loc":"180 230"},
    {"category":"Comment","text":"GraphLinksModel\nalso allows Groups","key":-7,"loc":"362 230"},
    {"text":"Create DIV for Diagram","key":-8,"loc":"-64 41"},
    {"text":"Create new Diagram associated with DIV","key":-9,"loc":"164 41"},
    {"text":"Style node templates","key":-10,"loc":"40 617"},
    {"text":"Add data to node/linkDataArray","key":-12,"loc":"180 320"},
    {"text":"Add data to nodeDataArray, including parent","key":-13,"loc":"-100 320"},
    {"text":"Style link templates","key":-15,"loc":"277 617"},
    {"category":"Conditional","text":"Should nodes be auto-positioned?","key":-16,"loc":"40 460"},
    {"text":"Choose a layout","key":-18,"loc":"-100 525"},
    {"text":"Set location in node data and bind","key":-17,"loc":"180 525"}
  ],
  "linkDataArray": [
    {"from":-1,"to":-8},
    {"from":-8,"to":-9},
    {"from":-5,"to":-13},
    {"from":-6,"to":-12},
    {"from":-15,"to":-2},
    {"from":-14,"to":-5,"text":"Yes"},
    {"from":-14,"to":-6,"text":"No"},
    {"from":-9,"to":-14},
    {"from":-13,"to":-16},
    {"from":-12,"to":-16},
    {"from":-16,"to":-18,"text":"Yes"},
    {"from":-16,"to":-17,"text":"No"},
    {"from":-18,"to":-10},
    {"from":-17,"to":-10},
    {"from":-10,"to":-15}
  ]}

this forces the font to load in Chromium browsers

GoJS Features in this sample

Palette

A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS Intro.

Related samples

Exporting SVGs

GoJS has one function for creating SVG: Diagram.makeSVG, which returns a new SVGElement with a representation of a GoJS Diagram. The method has a single argument, a JavaScript Object that contains several definable properties, enumerated in the documentation. More information can be found in the GoJS Intro.

Related samples

Theming

GoJS allows diagrams to be themed. This is commonly used to provide a light and dark mode for diagrams.

The Diagram.themeManager handles themes within a Diagram. The ThemeManager can by shared by multiple diagrams, and is responsible to managing the current theme and default theme, along with any theme updates. More information can be found in the GoJS Intro.

Related samples