BPMN Editor

(Unsaved File)

File
- New
- Open...
- Save
- Save As...
- Delete...
Edit
- Undo
- Redo
- Cut
- Copy
- Paste
- Delete
- Select All
Align
- Left Sides
- Right Sides
- Tops
- Bottoms
- Center X
- Center Y
Space
- In Row...
- In Column...
Options
- Grid
- Snapping

This sample describes templates and relationships typically used in Business Process Model and Notation (BPMN), to be used as a starting point for developing BPMN or flow-like web applications.

In addition to this HTML file, this sample uses the files:

BPMN.css for styling
BPMN.js for the Diagram logic
BPMNClasses.js - Custom PoolLink and BPMNLinkingTool classes
DrawCommandHandler.js - Custom CommandHandler class

Open File

Choose file to open...

Delete File

Choose file to remove...

JSON:

{ "class": "go.GraphLinksModel",
          "linkFromPortIdProperty": "fromPort",
          "linkToPortIdProperty": "toPort",
          "modelData": {"position":"230 200"},
          "nodeDataArray": [
        {"category":"event", "item":"start", "key":101, "loc":"450 540", "text":"Start", "eventType":1, "eventDimension":1},
        {"category":"event", "item":"End", "key":104, "loc":"1130 540", "text":"End", "eventType":1, "eventDimension":8},
        {"category":"activity", "item":"generic task", "key":5, "loc":"1010 540", "text":"Send Invoice", "taskType":0, "boundaryEventArray":[  ]},
        {"category":"activity", "item":"generic task", "key":-4, "loc":"860 540", "text":"Fulfill Order", "taskType":0, "boundaryEventArray":[  ]},
        {"category":"activity", "item":"generic task", "key":-5, "loc":"710 540", "text":"Credit Check", "taskType":0, "boundaryEventArray":[  ]},
        {"category":"activity", "item":"generic task", "key":-6, "loc":"560 540", "text":"Receive Order", "taskType":0, "boundaryEventArray":[  ]},
        {"category":"annotation", "key":701, "loc":"494 434", "text":"Basic Order Process"}
        ],
          "linkDataArray": [
        {"from":101, "to":-6, "fromPort":"", "toPort":""},
        {"from":-6, "to":-5, "fromPort":"", "toPort":""},
        {"from":-5, "to":-4, "fromPort":"", "toPort":""},
        {"from":-4, "to":5, "fromPort":"", "toPort":""},
        {"from":5, "to":104, "fromPort":"", "toPort":""}
        ]}