Figjam Diagrams

FigJam Diagrams

Generate collaborative diagrams in FigJam using the generate_diagram MCP tool, which converts Mermaid.js syntax into editable FigJam boards.

Supported Diagram Types

Not supported: Class diagrams, timelines, Venn diagrams, ER diagrams, pie charts, mindmaps, or other Mermaid types. Also cannot move individual shapes, change fonts, or do fine layout adjustments after generation — users should open the FigJam file for those edits.

Required Workflow

Step 1: Identify Diagram Type

Match the user's request to the best diagram type:

• Process / workflow / pipeline / how-it-works → Flowchart (flowchart LR)
• Conditional logic / if-then / routing / triage → Decision Tree (flowchart TD)
• Timeline / schedule / sprints / milestones → Gantt Chart (gantt)
• API call chain / request-response / auth flow → Sequence Diagram (sequenceDiagram)
• Status transitions / lifecycle / state machine → State Diagram (stateDiagram-v2)

If ambiguous, default to flowchart — it's the most flexible.

Step 2: Write Mermaid Syntax

Follow these rules strictly — the generate_diagram tool will reject invalid syntax:

General rules (all diagram types):

• Do NOT use emojis in the Mermaid code
• Do NOT use \n for newlines — use actual line breaks
• Keep diagrams simple unless the user asks for detail
• Only the 5 supported types are valid

Flowchart / Decision Tree rules:

• Use LR (left-to-right) by default; use TD for decision trees
• Put ALL shape text and edge text in double quotes:
  • Shapes: A["Start"], B["Process Data"]
  • Edge text: A -->|"Yes"| B or A --"Label"--> B
• Color styling is allowed but use sparingly unless requested
• Full range of shapes available: ["rect"], ("rounded"), {"diamond"}, (["stadium"]), [["subroutine"]], (("circle")), >["flag"], {{"hexagon"}}

Gantt Chart rules:

• Do NOT use color styling in Gantt charts
• Format:

  gantt
    title Project Plan
    dateFormat YYYY-MM-DD
    section Phase 1
    Task A :a1, 2026-02-17, 7d
    Task B :after a1, 5d
  

Sequence Diagram rules:

• Do NOT use note statements (notes are not supported)
• Format:

  sequenceDiagram
    participant A as Client
    participant B as Server
    A->>B: Request
    B-->>A: Response
  

State Diagram rules:

• Use stateDiagram-v2 (not stateDiagram)
• Do NOT use the word end in class names
• Format:

  stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: start
    Processing --> Done: complete
    Done --> [*]
  

Step 3: Call generate_diagram

generate_diagram(
  name="Short descriptive title",
  mermaidSyntax="flowchart LR\n  A[\"Start\"] --> B[\"End\"]"
)

Parameters:

• name — Human-readable title (short but descriptive)
• mermaidSyntax — Valid Mermaid.js code following the rules above
• userIntent (optional) — Description of what the user wants

Step 4: Share Result

The tool returns a FigJam link. Share it with the user and mention they can:

• Open it in FigJam to edit, rearrange, and style
• Share with collaborators
• Add sticky notes, stamps, and annotations

Use Cases & Examples

For detailed examples for each diagram type and common startup/product use cases, see references/examples.md.

Quick Examples

User flow:

flowchart LR
  A["Landing Page"] --> B["Sign Up"]
  B --> C["Onboarding Wizard"]
  C --> D["Dashboard"]

API auth flow:

sequenceDiagram
  participant U as User
  participant A as Auth Service
  participant D as Database
  U->>A: POST /login
  A->>D: Validate credentials
  D-->>A: User record
  A-->>U: JWT token

Sprint plan:

gantt
  title Sprint 12
  dateFormat YYYY-MM-DD
  section Backend
  API endpoints :a1, 2026-02-17, 5d
  Database migration :after a1, 3d
  section Frontend
  UI components :2026-02-17, 7d
  Integration :2026-02-24, 4d

Tips

• Start simple — generate a minimal diagram first, then iterate
• Use subgraphs for complex flowcharts: subgraph "Section Name" groups related nodes
• Color sparingly — only in flowcharts, and only when it adds clarity
• After generation, tell users to open in FigJam for fine-tuning (moving nodes, adding sticky notes, changing colors)