# 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…

Source: https://mockflow.com/developers/reference/item-types/flowchart

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

- `title` (string): A short title for the diagram, shown as the frame header (e.g. "User Signup Flow").
- `diagramType` (enum<string>, required): Must be 'flowchart'. One of `flowchart`.
- `class` (string, required): GoJS model class, typically 'GraphLinksModel'
- `category` (enum<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`.
- `nodeDataArray` (object[], 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.
    - `key` (integer | string): Unique id. Integer normally; a short string for sequence-diagram actors.
  - `text` (string)
  - `color` (string): Pastel color like #bae6fd, #bbf7d0 (sequence: actor border hex)
  - `fillColor` (string): Sequence diagrams only: actor header background hex
  - `loc` (string): Position as "x y" string (omit for sequence)
  - `width` (number): Defaults to `140`.
  - `height` (number): Defaults to `60`.
  - `shape` (enum<string>): One of `Circle`, `RoundedRectangle`, `Diamond` or `Rectangle`.
  - `matchKey` (string): Single lowercase keyword for icon matching (only for bio, circuit, pandid, uml, uml-sketchy, cloud-isometric, weblayout, mobilelayout categories)
- `linkDataArray` (object[], required): Array of links connecting nodes. For category "sequence": messages in chronological order with from, to, text and messageType.
    - `from` (integer | string)
  - `to` (integer | string)
  - `fromSpot` (enum<string>): One of `Top`, `Bottom`, `Left` or `Right`.
  - `toSpot` (enum<string>): One of `Top`, `Bottom`, `Left` or `Right`.
  - `text` (string): Link label like "Yes", "No" (sequence: the message label)
  - `segmentFraction` (number): 0.1-0.9 for label position; give near-parallel labelled links different values (0.35 / 0.65) so labels do not stack
  - `messageType` (enum<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

```json
{
  "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
      }
    ]
  }
}
```