Flowchart

Create diagrams including: Flowcharts, Sketchy Diagrams, 3D Isometric Diagrams, Bio/Medical Diagrams, Circuit Diagrams, P&ID Diagrams, UML Diagrams, Sketchy UML, Sequence Diagrams, Cloud Isometric…

Updated 16 Sep 20262 min read

Send "type": "flowchart".

Create diagrams including: Flowcharts, Sketchy Diagrams, 3D Isometric Diagrams, Bio/Medical Diagrams, Circuit Diagrams, P&ID Diagrams, UML Diagrams, Sketchy UML, Sequence Diagrams, Cloud Isometric Diagrams, Web Layout Diagrams, and Mobile Layout Diagrams. NOT for org charts, sitemaps, family trees or other single-rooted hierarchy trees — use render_treediagram; NOT for cross-functional/swimlane (lane-per-role) diagrams — use render_swimlane; NOT for AWS/Azure/GCP cloud infrastructure — use render_cloudarchitecture; NOT for database/ER schemas — use render_database.

Also available as the MCP tool render_flowchart. The same payload works through either surface.

Fields

data

titlestring

A short title for the diagram, shown as the frame header (e.g. "User Signup Flow").

diagramTypeenum<string>required

Must be 'flowchart'. One of flowchart.

classstringrequired

GoJS model class, typically 'GraphLinksModel'

categoryenum<string>

Diagram category (optional, defaults to 'default'). Use 'default', 'sketchy', or '3d' for standard shapes. Use specialized categories (bio, circuit, pandid, uml, etc.) for icon matching with matchKey. Use 'sequence' for sequence/interaction diagrams (simplified format, see SEQUENCE DIAGRAM RULES). One of default, sketchy, 3d, bio, circuit, pandid, uml, uml-sketchy, sequence, cloud-isometric, weblayout or mobilelayout. Defaults to default.

nodeDataArrayobject[]required

Array of nodes with key, text, color, loc, width, height, shape, and optionally matchKey properties. For category "sequence": actors in left-to-right order with string key, text, color and fillColor only.

Child attributes

keyinteger | string

Unique id. Integer normally; a short string for sequence-diagram actors.

textstring

colorstring

Pastel color like #bae6fd, #bbf7d0 (sequence: actor border hex)

fillColorstring

Sequence diagrams only: actor header background hex

locstring

Position as "x y" string (omit for sequence)

widthnumber

Defaults to 140.

heightnumber

Defaults to 60.

shapeenum<string>

One of Circle, RoundedRectangle, Diamond or Rectangle.

matchKeystring

Single lowercase keyword for icon matching (only for bio, circuit, pandid, uml, uml-sketchy, cloud-isometric, weblayout, mobilelayout categories)

linkDataArrayobject[]required

Array of links connecting nodes. For category "sequence": messages in chronological order with from, to, text and messageType.

Child attributes

frominteger | string

tointeger | string

fromSpotenum<string>

One of Top, Bottom, Left or Right.

toSpotenum<string>

One of Top, Bottom, Left or Right.

textstring

Link label like "Yes", "No" (sequence: the message label)

segmentFractionnumber

0.1-0.9 for label position; give near-parallel labelled links different values (0.35 / 0.65) so labels do not stack

messageTypeenum<string>

Sequence diagrams only: arrow style — sync (solid, filled head), async (solid, open head), return (dashed, open head). One of sync, async or return.

Example

{
  "type": "flowchart",
  "data": {
    "title": "Q4 Launch Planning",
    "diagramType": "flowchart",
    "class": "string",
    "category": "default",
    "nodeDataArray": [
      {
        "key": 0,
        "text": "Interview 5 users",
        "color": "string",
        "fillColor": "string",
        "loc": "string",
        "width": 140
      }
    ],
    "linkDataArray": [
      {
        "from": 0,
        "to": 0,
        "fromSpot": "Top",
        "toSpot": "Top",
        "text": "Interview 5 users",
        "segmentFraction": 0
      }
    ]
  }
}

Was this page helpful?