Workflow Diagram

Workflow Diagram

Build workflow diagrams in Figma using the create_workflow_diagram command. One command builds the entire diagram — shapes, arrows, labels, and layout are handled automatically.

Prerequisites

• figma-ai-bridge plugin running in Figma and connected
• The create_workflow_diagram command registered in code.js
• Helper: scripts/figma_cmd.mjs create_workflow_diagram ''

Shape Types

| Type | Shape | Use for | |------|-------|---------| | start | Green pill | Entry point of a workflow | | end | Red pill | Termination / completion points | | process | White rectangle | Actions, tasks, operations | | decision | Yellow diamond | Yes/no branches, conditions. Always has 2+ labeled outgoing edges | | subprocess | Purple double-border rectangle | Referenced sub-processes, external calls | | note | Dashed yellow box | Comments, annotations, side notes |

Command Schema

{
  "title": "My Workflow",
  "direction": "TB",
  "nodes": [
    { "id": "start", "type": "start", "label": "Begin" },
    { "id": "step1", "type": "process", "label": "Do something" },
    { "id": "check", "type": "decision", "label": "OK?" },
    { "id": "done", "type": "end", "label": "Done" }
  ],
  "edges": [
    { "from": "start", "to": "step1" },
    { "from": "step1", "to": "check" },
    { "from": "check", "to": "done", "label": "Yes" },
    { "from": "check", "to": "step1", "label": "No" }
  ],
  "x": 0,
  "y": 0
}

Parameters

| Parameter | Type | Required | Default | Description | |-----------|------|----------|---------|-------------| | title | string | No | "Workflow Diagram" | Diagram title | | nodes | array | Yes | — | Node definitions | | edges | array | Yes | — | Edge definitions | | direction | "TB" \| "LR" | No | "TB" | Top-to-bottom or left-to-right | | swimlanes | array | No | — | Optional lane groupings | | x, y | number | No | 0 | Canvas placement offset | | spacing | object | No | — | Override nodeWidth, nodeHeight, horizontalGap, verticalGap |

Node Object

| Field | Type | Required | Description | |-------|------|----------|-------------| | id | string | Yes | Unique identifier | | type | string | Yes | start, end, process, decision, subprocess, note | | label | string | Yes | Display text inside the shape | | sublabel | string | No | Smaller text below the shape | | x, y | number | No | Manual position override |

Edge Object

| Field | Type | Required | Description | |-------|------|----------|-------------| | from | string | Yes | Source node id | | to | string | Yes | Target node id | | label | string | No | Text label on the arrow ("Yes", "No", "Error") |

Swimlane Object

| Field | Type | Required | Description | |-------|------|----------|-------------| | id | string | Yes | Lane identifier | | label | string | Yes | Header text | | nodeIds | string[] | Yes | Node IDs belonging to this lane |

Workflow

1. Analyze the User's Description

Parse the description and identify:

• Steps → process nodes
• Decision points → decision nodes
• Start/End → start / end nodes
• Sub-processes → subprocess nodes
• Annotations → note nodes
• Roles/departments → swimlanes
• Direction: default TB; use LR for timelines or horizontal processes

2. Plan Nodes and Edges

• Assign unique short id strings (e.g., validate_email, send_welcome)
• Write concise labels (1–4 words ideal)
• Every decision node must have labeled outgoing edges
• Every node should be reachable from a start node
• Every path should lead to an end node (unless it's a loop)

3. Build the Diagram

FIGMA_TIMEOUT_MS=60000 node scripts/figma_cmd.mjs  create_workflow_diagram ''

Use get_canvas_bounds first to avoid overlap with existing content.

4. Refine (Optional)

• set_fill_color — change a node's color
• set_text_content — update a label
• move_node — reposition a node
• set_focus — zoom to the diagram

Common Patterns

Linear Flow

{
  "title": "Order Processing",
  "nodes": [
    { "id": "start", "type": "start", "label": "Order Received" },
    { "id": "validate", "type": "process", "label": "Validate Order" },
    { "id": "charge", "type": "process", "label": "Charge Payment" },
    { "id": "ship", "type": "process", "label": "Ship Item" },
    { "id": "done", "type": "end", "label": "Complete" }
  ],
  "edges": [
    { "from": "start", "to": "validate" },
    { "from": "validate", "to": "charge" },
    { "from": "charge", "to": "ship" },
    { "from": "ship", "to": "done" }
  ]
}

Branching Decision

{
  "title": "Login Flow",
  "nodes": [
    { "id": "start", "type": "start", "label": "User Login" },
    { "id": "auth", "type": "process", "label": "Authenticate" },
    { "id": "valid", "type": "decision", "label": "Valid?" },
    { "id": "dashboard", "type": "process", "label": "Show Dashboard" },
    { "id": "error", "type": "process", "label": "Show Error" },
    { "id": "retry", "type": "decision", "label": "Retry?" },
    { "id": "done", "type": "end", "label": "Done" }
  ],
  "edges": [
    { "from": "start", "to": "auth" },
    { "from": "auth", "to": "valid" },
    { "from": "valid", "to": "dashboard", "label": "Yes" },
    { "from": "valid", "to": "error", "label": "No" },
    { "from": "error", "to": "retry" },
    { "from": "retry", "to": "auth", "label": "Yes" },
    { "from": "retry", "to": "done", "label": "No" },
    { "from": "dashboard", "to": "done" }
  ]
}

Swimlane Layout

{
  "title": "Support Ticket Flow",
  "swimlanes": [
    { "id": "customer", "label": "Customer", "nodeIds": ["submit"] },
    { "id": "support", "label": "Support Team", "nodeIds": ["triage", "assign"] },
    { "id": "engineering", "label": "Engineering", "nodeIds": ["investigate", "resolve", "close"] }
  ]
}

Layout Algorithm

Built-in layered graph layout (Sugiyama-style):

1. Rank assignment: BFS from start nodes assigns each node to a layer
2. Crossing minimization: Barycenter heuristic (4 passes)
3. Coordinate assignment: Nodes evenly spaced, centered
4. Manual overrides: If a node has explicit x/y, those are used

Default spacing: nodeWidth=240, nodeHeight=72, horizontalGap=120, verticalGap=80

Design Tokens

Shape Colors

| Shape | Fill | Stroke | |-------|------|--------| | Process | #FFFFFF | #D1D6DC | | Decision | #FFF9EB | #E3C78A | | Start | #ECF9EC | #8CC78C | | End | #FAECEC | #D18C8C | | Subprocess | #EFEFFA | #A6A6D6 | | Note | #FDFCF3 | #D1CCB3 (dashed) |

Typography

| Element | Font | Weight | Size | Color | |---------|------|--------|------|-------| | Diagram title | Inter | Bold | 24px | #212631 | | Node label | Inter | Semibold | 14px | #212631 | | Node sublabel | Inter | Regular | 11px | #737A85 | | Edge label | Inter | Regular | 11px | #666E78 | | Swimlane header | Inter | Semibold | 13px | #59616B |

Notes

• Auto-layout is built-in — no coordinate math required
• Direction: Use TB for most workflows, LR for pipelines/timelines
• Swimlanes are optional — only use when roles/departments are mentioned
• Use get_canvas_bounds to avoid overlap with existing content
• Node id values should be short, snake_case identifiers
• Keep labels concise (1–4 words). Use sublabels for additional context.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: renfei-design
• Source: renfei-design/Figma-AI-Bridge
• License: MIT

Install and usage instructions live in the source repository linked above.