--- title: "Get an item" method: GET path: "/boards/{boardId}/items/{itemId}" tags: ["Items"] --- # Get an item `GET /boards/{boardId}/items/{itemId}` ## Request - Base URL: `https://api.mockflow.com/v1` - URL: `https://api.mockflow.com/v1/boards/{boardId}/items/{itemId}` - Auth: HTTP bearer Geometry, where it sits, and `data` decoded per the type's `readback`. ## Response `200` OK - Item - `id` string - `type` string: An ItemType, or `other` for an editor widget the API has no type for. - `componentType` string: The editor's own class name, exact where `type` is a family. - `boardId` string - `sectionId` string, nullable: The section the item sits inside, by position. - `groupId` string, nullable - `position` Point - `x` number, required - `y` number, required - `size` Size - `width` number - `height` number - `rotation` number - `zIndex` integer - `locked` boolean - `text` string: Plain text extracted from the item, for search and the outline. - `readback` 'exact' | 'unwrapped' | 'text' | 'pointer' | 'parts' | 'none' - `data` union: Selected by the sibling `type`. One schema per item type, generated from the component registry. - ArtifactData: Turn a small collaborative widget YOU write into a live, runnable MockFlow IdeaBoard tile, and get back the board URL. Use this when the user wants a working tool, game, poll, wheel, timer or quiz they will interact WITH on the board: decision tools (spinning wheel, dice, random picker, live poll), meeting tools (planning poker, countdown, standup order), learning tools (flashcards, a live quiz), turn-based games, small calculators. NOT for wireframes or prototypes of an app design (use render_wireframe / render_prototypelite) and NOT for what-if data models (use render_datasimulator). It is NOT a full application: one screen, one job, no routing, no accounts. No AI credits are used: you author the whole tile. Also available as the MCP tool `render_artifact`. The same payload works through either surface. - `files` object: PREFERRED. The artifact bundle as a map of path -> file content: "shell.html", one or more "app/.js" (app/main.js boots last), optional "app/.css", "theme.css", "copy.json", optional "data.json". Key order is the script order. See the tool description for the file contract. - `merge` boolean: MODIFY mode: layer the sent files over the artifact's stored bundle (files you do not send stay as they are). Use it when filling the artifact the user is editing, sending only the files that change. A legacy single-document artifact is lifted into a bundle first (its scripts become app/script-N.js). - `deletes` string[]: With merge: bundle files to remove (e.g. ["app/old.js"]). - `order` string[]: Optional explicit script/style order for the app/ files when the files map order is not the intended one. - `html` string: LEGACY single-document form: a complete self-contained collaborative mini app as one HTML document. Prefer "files". - `data` object: The artifact's content body as one JSON object — the subject matter the app renders from, which could be swapped for different subject matter while the app stays the same app. The test is substitution, not the app's category: if the user could ask for the same app "about something else" and only this JSON would change, it is content, whatever kind of app it is; values that configure or label the app itself live in the HTML, not here. Stored as data.json beside the code and read in the app via MFArtifact.getData(); enables later content-only AI updates without touching the code. REQUIRED when the HTML renders from MFArtifact.getData() (the upload is rejected without it); omit for apps with no content body. - `spec` string: Optional notes about the app as a string; stored with the bundle for later modifies. - `steps` object[]: Optional acceptance steps the server runs against the booted tile (shapes in the description); a failing step is a runtime failure. - `assets` object: Generated pictures for the app, as ONE OBJECT keyed by asset name (not a list): {"felt": {"prompt": "green casino felt, soft vignette, no text", "w": 512, "h": 512, "tile": true}, "hero": {"prompt": "friendly cartoon robot mascot, front view, flat shading", "w": 512, "h": 512, "cutout": true}}. MockFlow paints each with its image model (ONE AI credit per picture, at most 8) and stores it beside the app; reference it from the app as the literal string assets/.webp. Only for illustrative art a vector drawing cannot carry (card backs, backdrops, characters, textures) — systematic pieces (cards by rank and suit, dice faces, tiles, boards) are inline SVG the app draws. Omit when the app draws everything itself. - `dataHint` string: Example instruction for the editor's "Update content with AI" action, which rewrites this artifact's data.json without touching its code — send it whenever you send "data". Write the instruction a user of THIS artifact would plausibly type to change what its content is about, phrased as that instruction itself rather than a description of one, and short enough to read inside an input field. When the data is machinery the app needs to run rather than subject matter the user chose, or a few small values a person would edit faster by hand than by prompting an AI, send "none" and the editor hides that action for this artifact. - `title` string: Short 2-4 word name for what the artifact IS (e.g. "Decision Wheel", "Sprint Poll"). Falls back to the HTML tag when omitted. - `width` number: Recommended tile width in board pixels (240-1400) at which the artifact reads best. - `height` number: Recommended tile height in board pixels (240-1400) at which the artifact reads best. - `customTheme` boolean: Set true ONLY when the user asked for a distinct visual style (retro, terminal, pixel art, a brand) you styled yourself — it skips the injected IdeaBoard base theme. - AudioData: Generate sound to listen to - music, a sound effect, speech, voiceover, narration or a jingle - and place it on the board as an audio player component. Also available as the MCP tool `render_audio`. The same payload works through either surface. - `prompt` string, required: What the audio is: music style, mood and instruments, or for speech the exact words plus the voice and delivery. - CalendarData: Create a calendar with events for schedules, appointments, holidays, and event planning. Also available as the MCP tool `render_calendar`. The same payload works through either surface. - `events` object[], required: Array of calendar events. Use same color for all events. - `id` string, required: Unique event ID (e.g., event_1) - `title` string, required: Event title - `description` string: Event description - `start` string, required: Start date/time in ISO 8601 format with Z suffix - `end` string: End date/time. For timed events: same day as start. For all-day: equals start. - `allDay` boolean: True for all-day events - `color` string: Event color. Use one of: #4285f4, #ea4335, #fbbc04, #34a853, #ff6d01, #46bdc6, #7986cb, #8e24aa - `location` string: Event location - `attendees` string[] - `reminders` object[] - `recurrence` string: Recurrence rule or null - `createdAt` string: ISO date string - `settings` object, required: Calendar settings - `theme` string - `weekStartsOn` 0 | 1: 0 for Sunday, 1 for Monday - `dateFormat` 'MM/DD/YYYY' | 'DD/MM/YYYY' - `timeFormat` '12h' | '24h' - `highlightWeekends` boolean - `showWeekNumbers` boolean - ChartData: Create charts including pie, bar, line, area, scatter, bubble, and radar charts. Only for plotting VALUES: a "chart" that plots nothing and instead shows how people or parts relate (org chart, reporting structure, hierarchy tree) is a diagram — use render_flowchart. Also available as the MCP tool `render_chart`. The same payload works through either surface. - `componentType` 'MF_PieChart2' | 'MF_HorizontalLineChart' | 'MF_VerticalBarChart' | 'MF_HorizontalBarChart' | 'MF_AreaChart' | 'MF_ScatterChart' | 'MF_BubbleChart' | 'MF_RadarChart', required: Chart type - `chartData` string, required: CSV-formatted chart data. For pie: "Label1,Label2\n20,30". For line/bar: "Legends,Series\nJan,100\nFeb,120" - `title` string, required: Chart title - `chartColors` object[]: ONLY when the user names a color scheme/theme/brand: one entry per data series/slice matching that theme. Omit entirely otherwise (component defaults apply). - `legend` string: Series/slice name exactly as it appears in chartData - `backgroundColor` string: Hex color like #1B4F72 - ChecklistData: Create a checklist / to-do list of actionable tasks with checkboxes. Use this for task lists, action items, checklists, shopping lists, project task breakdowns, or any content organizing things that need to be completed. For status-column task boards use render_kanban; for scheduled tasks with durations use render_gantt. Also available as the MCP tool `render_checklist`. The same payload works through either surface. - `title` string, required: Descriptive title for the checklist (e.g., "Weekly Shopping List", "New Product Launch - Project Tasks") - `data` object[], required: Array of checklist task items (3-8 recommended) - `item` string, required: Clear, actionable task description - `checked` boolean, required: Completion state - false for all items unless already done - CloudArchitectureData: Create cloud/software system architecture diagrams — backend, microservices, deployment, infrastructure, integration or network architecture — for AWS, Azure, GCP, Kubernetes, SAP, or generic systems (use "aws" icons when no provider is named). ONLY for technical software/cloud/network diagrams — NOT for physical buildings, construction, or real-world/building architecture. Also available as the MCP tool `render_cloudarchitecture`. The same payload works through either surface. - `title` string: A short title for the diagram, shown as the frame header (e.g. "AWS Web App Architecture"). - `diagramType` 'aws' | 'azure' | 'gcloud' | 'kubernetes' | 'sap' | 'sapbtp' | 'oracle' | 'cisco', required: Cloud provider / platform — picks the icon set the client renders with. Default "aws" when the request names no provider. - `flowDirection` 'horizontal' | 'vertical': The axis the architecture reads along, and the axis the layout engine lays the sections along. "vertical" for sections that are stages of one thing (tiers, layers, planes, phases, a stack, an ingest/process/store pipeline); "horizontal" for sections a request travels between (an outside actor, a network, a region, a provider boundary). Prefer "vertical" when both fit. A direction the user asks for always wins. - `class` string: GoJS model class, typically 'GraphLinksModel' - `nodeDataArray` object[], required: Cloud components and groups. Each node: key (string), text, type, color, fillColor, fontColor, loc ("x y" rough reading order), isGroup (true for containers), group (parent group key). "color" is REQUIRED on every group/section and is what the section is painted from, so give each one a tone its neighbours do not have; fontColor is optional and follows color. No width/height — the renderer sizes everything. - `linkDataArray` object[]: Connections: from, to (node keys), text (optional label, at most 2 words and 16 characters, and only on about a third of the links). One link per pair, no link between a node and a section that contains it. No fromSpot/toSpot — the renderer picks sides from the final layout. - CodeBlockData: Create a syntax-highlighted code block from a snippet of source code. Also available as the MCP tool `render_codeblock`. The same payload works through either surface. - `code` string, required: Raw source code. Preserve newlines and indentation exactly. - `language` string: Programming language, lowercase (e.g. "javascript", "python", "sql", "bash") - `title` string: Short title for the code block title bar (e.g. "Bubble Sort") - CommentData: A comment pin. On create, `message` starts the thread. On read, `comments` is the thread: the first entry is the comment, the rest are replies. - `message` string - `color` string - `comments` object[] - `id` string - `message` string - `username` string - `firstName` string - `lastName` string - `createDate` string - ConnectorData - `from` string, required: Item id. - `to` string, required: Item id. - `style` 'stepcurve' | 'stepline' | 'curve' | 'line' - `label` string - `color` string - `thickness` integer - CustomerJourneyData: Create customer journey maps with stages, activities, and satisfaction metrics. Also available as the MCP tool `render_customerjourney`. The same payload works through either surface. - `id` string, required: Unique UUID for the journey map - `title` string, required: Title of the customer journey - `creator` string: null - `createDate` string: null - `updateDate` string: null - `theme` string: "default" - `cellWidth` integer: 200 - `stageName` string: "Journey Stages" - `stageColor` string: "#616161" - `stages` object[], required: Journey stages with id, stage name, color (#hex), fontColor ("white" or "black") - `id` string - `stage` string - `default` boolean - `add` boolean - `color` string - `fontColor` string - `sections` object[], required: Sections: type 'icon' (activities with FontAwesome icons), 'graph' (satisfaction 0-4), or 'text' (HTML content). Items keyed by stage ID. - DataSimulatorData: Create a live, parameterized what-if simulation: a runnable model the user drives with sliders and play/scrub controls, every output recomputing as they move. Use this for business models (growth, churn, revenue, unit economics), funnels with conversion rates, forecasts and projections, capacity/queue models, epidemic/population dynamics, financial models (compound interest, runway), sensitivity/what-if analysis, and data infographics (metric cards, charts, gauges and funnels composed around one topic). Use this INSTEAD of a chart or table whenever the point is to explore how outcomes CHANGE as the inputs change over time. Also available as the MCP tool `render_datasimulator`. The same payload works through either surface. - `title` string: Short title of the simulation - `description` string: One short sentence describing what it models - `seed` number: Random seed so stochastic runs replay identically (default 42) - `time` object: Simulation horizon - `steps` number: Number of steps to run (1-1000) - `unit` string: Name of one step, e.g. month, day, week, year - `layout` object: Dashboard grid layout - `columns` number: Grid density, 2-6 - `controls` 'right' | 'left' | 'bottom': Where the what-if control panel docks - `parameters` object[]: The user's what-if levers, rendered as live controls. Each must be read by at least one rule, derived expression or view. - `id` string, required: Unique id, referenced by expressions - `label` string, required: Human label shown on the control - `control` 'slider' | 'knob' | 'number' | 'select' | 'toggle' | 'stepper' | 'segmented', required - `min` number - `max` number - `step` number - `value` number, required: Default value - `format` 'number' | 'integer' | 'percent' | 'currency' - `options` object[]: For select/segmented: [{ label, value }] - `group` string: Optional heading clustering related controls - `state` object[], required: The evolving model variables. init is the step-0 value (a number, or a parameter-id expression string). - `id` string, required - `label` string - `init` unknown, required - `format` 'number' | 'integer' | 'percent' | 'currency' - `rules` object[]: Run once per step in order; each assigns expr to a state id (target). t is 1..steps. - `target` string, required: A state id - `expr` string, required: Expression evaluated each step - `derived` object[]: Recomputed from state and parameters after the rules each step (cannot accumulate across steps). - `id` string, required - `label` string - `expr` string, required - `format` 'number' | 'integer' | 'percent' | 'currency' - `views` object[], required: Dashboard tiles. CRITICAL: each view type binds to its data through a SPECIFIC field, and a view with the wrong field (or no binding field) renders as 0. Use exactly: metric/sparkline/progress/gauge -> "value" (a single id); progress also "target"; gauge also "min"/"max"/"thresholds". table -> "columns" (array of ids). funnel -> "stages". line/area/bar/pie/doughnut/compare/radar -> "series" (array of ids). scatter -> "x" and "y". sensitivity -> "parameter" and "metric". distribution -> "metric". mapregions -> "regions"; mappoints -> "points". text -> "content" (and optional "variant"). Do NOT put a single value under "series", and never leave a view without its binding field. - `type` 'line' | 'area' | 'bar' | 'metric' | 'sparkline' | 'progress' | 'gauge' | 'pie' | 'doughnut' | 'compare' | 'radar' | 'scatter' | 'table' | 'funnel' | 'sensitivity' | 'distribution' | 'mapregions' | 'mappoints' | 'text', required - `title` string - `span` number: 1..columns grid width - `tall` boolean - `value` string: metric/sparkline/progress/gauge: the SINGLE state/derived/parameter id this tile shows - `series` unknown[]: line/area/bar/pie/doughnut/compare/radar: ids to plot; an entry is an id string or { id, as: "line"|"bar" } - unknown - `columns` string[]: table: the ids to show one column each - `stages` object[]: funnel: [{ label, value }] stage bars - `target` unknown - `min` number: gauge: dial minimum - `max` number: gauge: dial maximum - `thresholds` number[]: gauge: [greenUpTo, amberUpTo] in the value's units - `stacked` boolean: line/area/bar: stack the series - `horizontal` boolean: compare: horizontal bars - `x` string: scatter: the x-axis series id - `y` string: scatter: the y-axis series id - `parameter` string: sensitivity: the parameter id to sweep - `metric` string: sensitivity/distribution: the id whose final value is measured - `samples` number: sensitivity: number of sweep points - `runs` number: distribution: number of seeded runs - `regions` object[]: mapregions: [{ region, value }] - `points` object[]: mappoints: [{ label, lat, lng, value }] - `level` string: mapregions: "country" | "state" - `ramp` string: mapregions: color ramp name - `content` string: text: the copy to show - `variant` string: text: "heading" | "note" - DatabaseDiagramData: Create database diagrams (ER diagrams) showing tables, columns, primary keys, foreign keys, and relationships. Also available as the MCP tool `render_database`. The same payload works through either surface. - `title` string: A short title for the schema, shown as the frame header (e.g. "E-commerce Database"). - `class` string, required: Always 'GraphLinksModel' - `category` 'database', required: Must be 'database' - `nodeDataArray` object[], required: Array of database tables with key, text, color, fillColor, and columns array - `key` string, required: Unique table identifier - `text` string, required: Table display name - `color` string: Header border color - `fillColor` string: Header background color - `columns` object[], required: Array of column definitions - `name` string, required: Column name - `type` string, required: SQL data type (INT, VARCHAR, DECIMAL, etc.) - `pk` boolean, required: True if primary key - `fk` boolean, required: True if foreign key - `linkDataArray` object[], required: Array of foreign key relationships between tables - `from` string, required: Source table key (table with FK) - `to` string, required: Target table key (referenced table) - `text` string: Relationship label (e.g., "user_id → id") - `relation` 'one-to-one' | 'one-to-many' | 'many-to-one' | 'many-to-many', required: Cardinality — drives the crow's-foot arrowheads. one-to-many = one row in "from" relates to many rows in "to" - DesignData: Create an editable graphic DESIGN (render_design) in a MockFlow IdeaBoard design frame: posters, flyers, banners, social posts and ads (Instagram, Facebook, LinkedIn, X, Pinterest, TikTok), YouTube thumbnails, menus, infographics, memes, podcast/album/book covers, product listing images, business cards, invitations, brand layouts. You write ONE page of positioned text, shapes, pictures and lines as JSON, never HTML or CSS; MockFlow draws it and the user edits every element afterwards. For UI screens use render_wireframe; for a single picture use render_image. Also available as the MCP tool `render_design`. The same payload works through either surface. - `title` string: Short design name shown as the frame title - `w` number, required: Canvas width in px - `h` number, required: Canvas height in px - `bg` unknown - `bgImg` object: Page picture behind everything {"src","op"} (keep it when modifying) - `look` object: Shared look of pictures that belong together: {"style","cast":[{"id","description"}]} (keep it, with any "ref", when modifying) - `els` object[], required: The elements in drawing order (first at the back) - `id` string: Only when modifying: the id of an element kept from the existing page - `type` 'text' | 'shape' | 'image' | 'line' | 'icon' | 'chart' | 'table' | 'qr' | 'map', required - `x` number, required - `y` number, required - `w` number, required - `h` number - `rot` number - `op` number - `text` string - `font` string - `size` number - `weight` number - `color` string - `align` 'left' | 'center' | 'right' - `lh` number - `ls` number - `upper` boolean - `italic` boolean - `shape` string - `fill` unknown - `list` 'bullet' | 'number': Text: each line a list item - `accent` string: Text: the colour of ==marked== words - `stroke` unknown - `sw` number - `radius` number - `src` string: Image: a picture URL, or "mfimg::" plus a description when this render includes imagery - `fit` 'cover' | 'contain' - `mask` string - `filter` string - `shadow` object - `icon` string: Icon: a name from the icon list in the description (another word draws the closest) - `style` string: Icon: solid | line. Line: straight | curve | elbow | wave | zigzag | sketch - `color2` string: Icon: duotone second colour - `bend` number: Line: how far a curve or elbow strays (-100..100) - `from` string: Line: id of the element it starts at (a connector) - `to` string: Line: id of the element it ends at (a connector) - `kind` 'column' | 'grouped' | 'stacked' | 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'scatter' | 'radar' | 'heatmap' | 'treemap' | 'waffle' | 'progress' | 'ring' | 'gauge': Chart kind - `data` unknown - `series` string[]: Chart: the series names when rows carry "values" - `rows` array[]: Table: rows of cells, the first the header - string[] - `head` boolean - `headBg` string - `headColor` string - `stripe` string - `regions` object[]: Map: [{"id":"US","value":27.4}] by ISO two-letter code - `pins` object[]: Map: [{"lat","lng","label"}] - `focus` string[]: Map: country codes to frame - `look` 'flat' | 'dots' | 'outline': Map: filled countries, a dotted map or outlines - `land` string - `low` string - `ink` string - `colors` string[] - `track` string - `unit` string - `prefix` string - `max` number - `values` boolean - `labels` boolean - `g` string: Group name: elements sharing one move and select together - `name` string: The layer name shown in the layers panel - `deco` 'underline' | 'strike' - `bg` unknown - `dash` 'solid' | 'dashed' | 'dotted' - `cap1` 'none' | 'arrow' | 'open' | 'diamond' | 'bar' | 'round' | 'circle' - `cap2` 'none' | 'arrow' | 'open' | 'diamond' | 'bar' | 'round' | 'circle' - `prompt` string: Image: what the picture shows (kept for Fill images) - `cast` string[]: Image: ids from the look's cast that appear in it - `ox` number - `oy` number - `zoom` number - `nw` number - `nh` number - `flipX` boolean - `flipY` boolean - `lock` boolean - `hidden` boolean - FloorplanData: Create a FLOOR PLAN — a top-down spatial layout of a building or space: rooms (axis-aligned rectangles sharing walls), doors, windows, furniture stamps from a fixed catalog, and short text labels, all on a grid. Also available as the MCP tool `render_floorplan`. The same payload works through either surface. - `title` string: Short name of the plan (e.g. "Two-bedroom Apartment") — displayed as the frame title - `planType` 'apartment' | 'house' | 'office' | 'retail' | 'event' | 'other': Kind of space the plan describes - `theme` 'soft' | 'blueprint' | 'marker': Drawing style the plan is rendered in; follow the style the user asked for, otherwise pick the one that suits the space - `rooms` object[], required: Axis-aligned rectangular rooms in grid units (1 unit = 0.5 m) that tile the outline with shared walls and never overlap. Leave out (or send empty) to receive the current asset catalog instead of drawing - `id` string, required: Unique id, "r1", "r2", … - `label` string, required: Room name shown in the room (e.g. "Bedroom 1") - `type` 'living' | 'bedroom' | 'kitchen' | 'dining' | 'bath' | 'office' | 'hall' | 'storage' | 'outdoor' | 'other', required: Room type; drives the theme colour - `x` number, required: Left edge in grid units (integer or .5) - `y` number, required: Top edge in grid units (integer or .5); y grows down - `w` number, required: Width in grid units (> 0) - `h` number, required: Height in grid units (> 0) - `items` object[]: Furniture, door and window stamps from the fixed catalog - `id` string, required: Unique id, "i1", "i2", … - `asset` string, required: Catalog key exactly as returned by the step-1 catalog call (this tool called with no rooms) - `x` number, required: Furniture: top-left x inside a room. Door/window: start point x on the wall line - `y` number, required: Furniture: top-left y inside a room. Door/window: start point y on the wall line - `r` 0 | 90 | 180 | 270: Rotation in degrees; for doors/windows 0 = horizontal wall (runs +x), 90 = vertical wall (runs +y) - `w` number: Optional own width in grid units when this piece should differ from the catalog footprint (multiples of 0.25, at least half the catalog side, at most three times it or 8 units, whichever is larger; keys marked keeps proportions stay within half to one and a half times); for doors/windows this is the length along the wall - `h` number: Optional own height in grid units, same rules as w; ignored for doors/windows and for keys marked "keeps proportions" - `labels` object[]: Optional short text notes placed at free points - `id` string, required: Unique id, "l1", "l2", … - `text` string, required: Note text (a few words) - `x` number, required: x in grid units - `y` number, required: y in grid units - FlowchartData: 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. - `title` string: A short title for the diagram, shown as the frame header (e.g. "User Signup Flow"). - `diagramType` 'flowchart', required: Must be 'flowchart' - `class` string, required: GoJS model class, typically 'GraphLinksModel' - `category` 'default' | 'sketchy' | '3d' | 'bio' | 'circuit' | 'pandid' | 'uml' | 'uml-sketchy' | 'sequence' | 'cloud-isometric' | 'weblayout' | 'mobilelayout': 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). - `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` union: Unique id. Integer normally; a short string for sequence-diagram actors. - integer - string - `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 - `height` number - `shape` 'Circle' | 'RoundedRectangle' | 'Diamond' | '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` union - integer - string - `to` union - integer - string - `fromSpot` 'Top' | 'Bottom' | 'Left' | 'Right' - `toSpot` 'Top' | 'Bottom' | 'Left' | '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` 'sync' | 'async' | 'return': Sequence diagrams only: arrow style — sync (solid, filled head), async (solid, open head), return (dashed, open head) - GanttData: Create a Gantt chart with project phases and tasks for project planning, scheduling, and milestone tracking. Use this for task management with durations, progress, assignees, and grouped phases. For simple chronological event visualization (history, milestones, biography events), use render_timeline instead. Also available as the MCP tool `render_gantt`. The same payload works through either surface. - `columns` object[], required: Array of Gantt chart columns/phases. Each column must have a different color. - `id` string, required: Unique column ID (e.g., col_1, col_2) - `title` string, required: Phase/category title (e.g., Planning, Development) - `color` string, required: Column accent color. Use: #1c7ce2, #ff9800, #9c27b0, #4caf50, #2196f3 - `fontColor` string: Font color for column - `cards` object[], required: Array of task cards in this phase - `id` string, required: Unique card ID (e.g., card_1) - `title` string, required: Task title - `description` string: Task description - `startDate` string, required: Start date in ISO format - `endDate` string, required: End date in ISO format (>= startDate) - `dueDate` string: Due date (same as endDate) - `progress` number: Progress 0-100 - `assignees` string[] - `labels` string[] - `comments` object[] - `priority` 'low' | 'medium' | 'high' - `createdAt` string: ISO date string - `settings` object, required: Chart settings - `boardTitle` string: Title of the Gantt chart - `viewMode` string: View mode: day, week, or month - `theme` string - `showWeekends` boolean - ImageData: Generate a standalone picture - an illustration, photo, artwork, icon or logo - and place it on the board as an image component. Use this whenever the user asks for an image/picture/photo/illustration of something. Also available as the MCP tool `render_image`. The same payload works through either surface. - `prompt` string, required: What the picture shows: subject, composition, lighting and art style, in one self-contained sentence or two. Avoid asking for text, letters or numbers inside the image. - KanbanData: Create a Kanban board with columns and task cards for project management, sprint planning, and task tracking. Also available as the MCP tool `render_kanban`. The same payload works through either surface. - `columns` object[], required: Array of Kanban columns. Each column must have a different color. - `id` string, required: Unique column ID (e.g., col_1, col_2) - `title` string, required: Column title — topic-relevant category, NEVER a generic workflow stage like "To Do"/"In Progress"/"Done" (e.g. a marketing board gets "Content Strategy", "Social Media", "Paid Ads") - `color` string, required: Column accent color. Use: #e91e63, #ff9800, #9c27b0, #4caf50, #2196f3 - `cards` object[], required: Array of cards in this column - `id` string, required: Unique card ID (e.g., card_1) - `title` string, required: Card title - `description` string: Card description - `assignees` string[] - `labels` string[] - `comments` object[] - `dueDate` string: ISO date or null - `priority` 'low' | 'medium' | 'high' - `createdAt` string: ISO date string - `settings` object, required: Board settings - `showLabels` boolean - `showAssignees` boolean - `showDueDate` boolean - `cardSize` string - `backgroundColor` string - `fontColor` string - `listColor` string - `listFontColor` string - `boardTitle` string: Title of the Kanban board - KnowledgeGraphData: Create a knowledge graph (bubble network) showing how concepts relate to each other, like an Obsidian graph view. Also available as the MCP tool `render_knowledgegraph`. The same payload works through either surface. - `nodes` object[], required: Array of nodes with id, label, and weight (1-8). Labels are 1-3 words, under 24 characters — longer text is pushed under the bubble and cut off after two lines. - `id` string, required - `label` string, required - `weight` integer, required - `edges` object[], required: Array of edges with id, from, to, and label. Edge labels are 1-2 words, under 16 characters, and are left as "" when the relationship is obvious — a label on every edge crowds the canvas. - `id` string, required - `from` string, required - `to` string, required - `label` string - MapData: Create maps with location markers (pins) for plotting SPECIFIC INDIVIDUAL PLACES on a real-world map. Also available as the MCP tool `render_map`. The same payload works through either surface. - `title` string: Short descriptive title for the map (e.g., "Top Tech Hubs", "Most Populated Countries") - `markers` object[], required: Array of location markers - `location` string: FULLY DISAMBIGUATED geocoder-ready name matching the prompt's geographic level: bare country name for country-level; "City, State/Region, Country" for cities ("London, England, United Kingdom", never just "London"); "Place, City, State/Region, Country" for specific places - `description` string - `emoji` string: Single emoji for marker - use same emoji for all markers - `geo` object - `coordinates` number[]: [longitude, latitude] - LONGITUDE FIRST! - `name` string - MapRegionsData: Create a CHOROPLETH map — a real-world map where whole geographic AREAS (countries, states, provinces, continents, world regions) are FILLED with color to encode a value or category. Also available as the MCP tool `render_mapregions`. The same payload works through either surface. - `title` string: Short descriptive title (e.g. "Population by Country", "US States by Time Zone") - `level` 'continent' | 'region' | 'country' | 'state': The single geographic level used for every region. "state" has boundary coverage only for USA, India, China, Brazil, Russia, Canada, Australia, Indonesia, South Africa — prefer "country" for other nations - `colorMode` 'categorical' | 'gradient': "gradient" for a value scale (use paletteColor + value), "categorical" for discrete groups (use per-region color) - `paletteColor` string: For gradient/value maps only: a named color scheme (Blues, Greens, Reds, Oranges, Purples, Greys, YlOrRd, YlGnBu, Viridis, RdBu) or a hex color. Omit for categorical maps. - `regions` object[], required: Array of region objects to color - `name` string, required: Region's common English name - `iso` string: ISO code — alpha-3 for country level, ISO 3166-2 for state level; omit for continent/region levels - `color` string: Hex fill color "#RRGGBB" (categorical maps) - `value` number: Underlying metric (gradient maps) - `category` string: Discrete group label (categorical maps) - `description` string: Optional short note (<= 80 chars) - `legend` object[]: Key explaining the colors - `label` string - `color` string: Hex "#RRGGBB" - MarkdownData: Create markdown documents with headings, paragraphs, lists, and AI-generated images. Also available as the MCP tool `render_markdown`. The same payload works through either surface. - `content` string, required: Markdown content. Use standard markdown syntax. For AI-generated images, use: ![alt](prompt:: "description") - MindmapData: Create a mindmap for brainstorming, topic exploration, and hierarchical idea organization. Also available as the MCP tool `render_mindmap`. The same payload works through either surface. - `nodeData` object, required: Root node with id, topic, root=true, and children array. Children have direction (0=left, 1=right) - `id` string - `topic` string - `image` string: Optional emoji icon for the node (e.g. "💡", "🎯"). Use sparingly on key nodes. - `root` boolean - `children` object[] - `id` string - `topic` string - `image` string: Optional emoji icon for the node (e.g. "💡", "🎯"). Use sparingly on key nodes. - `direction` 0 | 1: 0=left, 1=right - `children` object[]: Nested children nodes - Model3dData: Generate an actual 3D model - an object, character, prop or scene mesh (GLB/GLTF) - and place it on the board as a 3D model viewer component. Also available as the MCP tool `render_3dmodel`. The same payload works through either surface. - `prompt` string, required: The object to model: what it is, its form and proportions, materials, colours and style. - MoodFrameData: Create a mood/inspiration board inside a MockFlow IdeaBoard mood frame: color palette swatches, typography specimens, keyword/mood text tiles, and photographic image tiles. NOT a way to make a picture: this composes a whole board of swatches, type and tiles, so "an image/photo of X" is render_image, not this tool, even though a moodboard can contain imagery. Also available as the MCP tool `render_moodframe`. The same payload works through either surface. - `title` string: A short title shown as the frame header (e.g. "Brand Mood Board"). - `components` object, required: Compressed moodboard layout with 'c' array (MF_Rectangle2/MF_Section color swatches, MF_Text specimens/keywords, and MF_ImageComp photo tiles when images were requested). - `c` object[], required - `t` string, required: MF_Rectangle2, MF_Section, MF_Text, MF_ColorCode_ID, MF_FontPreview_ID, or MF_ImageComp - `x` number, required - `y` number, required - `w` number, required - `h` number, required - `a` number: Angle, always 0 - `e` string, required - `tx` string - `ta` 'left' | 'center' | 'right' | 'justify': Text alignment - `fs` number: REQUIRED on any component with text. Font size in px, full range 6-500: hero/display 48-120, subtitles 24-36, body 14-18, labels 10-14. Leaving it out renders every word at the same small default. - `fcl` string: Font colour, hex. Must contrast with whatever sits behind it. - `fw` 'normal' | 'bold' | '200' | '300' | '600' | '900': Font weight - vary it to build hierarchy - `fst` 'normal' | 'italic' - `td` 'none' | 'underline' | 'line-through' - `fnt` string: REQUIRED on any component with text. A Google Font family name chosen for the mood (e.g. "Playfair Display", "Inter", "Bebas Neue"). Omitting it gives every board the same default face. - `lh` number: Line height multiplier: tight for headlines (0.8-1.0), looser for body (1.2-1.6) - `cs` number: Letter spacing in px, -10 to 100 - useful for display type - `pd` number: Padding in px - `fc` string[]: Fill colours [from, to] - two hex values (repeat the same one for a flat fill) - `ft` 'solid' | 'linear-vertical' | 'linear-horizontal' | 'linear-diagonally' | 'radial' | 'none': Fill type - `fa` number: Fill opacity 0-1 - `st` 'none' | 'drop-shadow' | 'inner-shadow' | 'glow': Shadow - `br` number[]: Corner radii [all, tl, tr, br, bl] in px (MF_Section / MF_Rectangle2) - `bw` number[]: Border widths [all, top, right, bottom, left] - use 0 on anything touching a canvas edge - `bt` string[]: Border types [all, top, right, bottom, left]: none | solid | dashed | dotted - `bc` string[]: Border colours [all, top, right, bottom, left], hex - `selectedColor` string: MF_ColorCode_ID only: the swatch colour, hex - `showHexCode` boolean: MF_ColorCode_ID only: print the hex value under the swatch - `shapeType` 'full' | 'circle' | 'square': MF_ColorCode_ID only: swatch shape - `previewType` 'specimen' | 'alphabet' | 'pangram' | 'weights' | 'scale': MF_FontPreview_ID only: what the card shows of the font set in fnt - `showFontName` boolean: MF_FontPreview_ID only: print the font name under the sample - `showFontDetails` boolean: MF_FontPreview_ID only: print the font source and style count - `captionSize` number: MF_FontPreview_ID only: font name / row label size in px - `img` string: MF_ImageComp only, and only when this render includes images: "mfimg::" followed by a description of the picture (no text, letters or numbers in it). - PollData: Create a poll / voting question where users pick from predefined options. Use this for polls, surveys, opinion votes, multiple-choice questions, audience polls, feedback forms, or quick votes. For collecting AND upvoting open-ended ideas use render_upvoteideas; for a random picker use render_spinningwheel. Also available as the MCP tool `render_poll`. The same payload works through either surface. - `question` string, required: The poll question (e.g., "What is your favorite programming language?") - `options` string[], required: Array of 3-6 distinct, non-empty string options to vote on - `optionImages` string[]: OPTIONAL, index-aligned with options. When this render includes images, each entry is "mfimg::" followed by a description of that option's picture (no text, letters or numbers in it); otherwise a real image URL. Omit for a text poll. - PrototypeData: Turn a self-contained interactive prototype YOU generate into an editable MockFlow IdeaBoard component, and get back the board URL. Also available as the MCP tool `render_prototypelite`. The same payload works through either surface. - `html` string, required: Complete self-contained interactive prototype as a single HTML document. Multiple screens as <section data-screen="id"> elements (mark the entry with data-screen-start); navigation via data-nav="targetId" (and data-nav="back"). Inline CSS/JS only; no external network or backend calls. - `deviceType` 'mobile' | 'tablet' | 'desktop': Device frame the prototype is presented in AND the viewport you MUST design every screen for. Match the user's stated device (a "mobile app" → "mobile"). Defaults to "mobile". Design widths: mobile ~390px, tablet ~820px, desktop ~1280px. - `viewportWidth` number: Exact viewport width in px you laid the screens out for. The frame is sized to it precisely instead of the nearest deviceType preset, so ANY device works: watch ~200, phone 390, foldable 512, tablet 820, laptop 1280, desktop 1440, TV 1920, kiosk portrait 1080. When converting existing wireframes, pass THEIR width. - `viewportHeight` number: Exact viewport height in px of that device (e.g. 844 for a 390px phone, 1080 for a 1920px TV). This is the DEVICE screen height, NOT the length of your content — a screen scrolls inside its viewport. Omit and a height suiting viewportWidth is used. - `title` string: Short prototype title shown on the frame's header (e.g. "Habit Tracker"). Falls back to the HTML <title> tag when omitted. - ReactionData - `emoji` string, required: The emoji name from the reaction picker, for example "Thumbs up". - SectionData - `title` string - `theme` 'white' | 'ash' | 'ink' | 'mockflow' | 'mint' | 'citrus' | 'blossom' | 'orchid' | 'teal' | 'sunny' | 'cherry' | 'sand' - ShapeData - `shape` 'rectangle' | 'rounded_rectangle' | 'ellipse' | 'circle', required - `text` string - `fill` string - `stroke` string - `textColor` string - `radius` integer - SpinningWheelData: Create a spinning wheel / random picker with labeled segments. Use this for prize wheels, decision wheels, random selectors, wheel-of-fortune games, icebreakers, or any wheel-based random choice tool. For structured voting use render_poll; for upvotable ideas use render_upvoteideas. Also available as the MCP tool `render_spinningwheel`. The same payload works through either surface. - `title` string, required: Fun, engaging title for the spinning wheel (e.g., "What is for Lunch?") - `options` string[], required: Array of 4-8 short string segment labels (1-4 words each) - SpreadsheetData: Create spreadsheets with cell data, formulas, and formatting. Also available as the MCP tool `render_spreadsheet`. The same payload works through either surface. - `cellData` string, required: JSON string of all cell values keyed by A1, B1, etc. Include formulas in cells that need them. - `formulas` string: JSON string listing cells that contain formulas (e.g., {"D2":"=B2*C2"}) - `rows` integer, required: Total number of rows - `cols` integer, required: Total number of columns - `formatting` string: JSON string for cell formatting. Use {"A1":{"fontWeight":"bold"}} for headers. - `cellFormats` string: JSON string mapping cells to a display format: "number", "currency", "percentage", or "date". e.g. {"B2":"number","C2":"currency"}. Use for numeric/money/percent/date columns. - `cellFormatOptions` string: JSON string of per-cell format options: {"B2":{"decimals":2},"C2":{"currency":"USD","decimals":2}}. Pairs with cellFormats. - StickyNoteData - `text` string, required - `color` string: A note swatch name (yellow, peach, pink, lavender, blue, cyan, green, gray) or a hex colour. - `fontSize` integer - `author` string: Shown on the note. Defaults to the token owner. - StoryboardData: Create a film/video storyboard with scenes and frames for visualizing stories, movie sequences, commercials, and video content. Also available as the MCP tool `render_storyboard`. The same payload works through either surface. - `scenes` object[], required: Array containing one scene with frames - `id` string, required: Scene ID (e.g., "scene_default") - `title` string, required: Scene title - `isDefault` boolean: true for main scene - `color` string: Scene color (e.g., "#e94560") - `frames` object[], required: Array of frame objects - `id` string, required: Unique frame ID (e.g., "frame_1") - `sequence` integer, required: Frame sequence number starting from 1 - `title` string, required: Short frame title - `description` string, required: Detailed cinematic description with camera angles, action, lighting, mood - `coverType` string: null, or "image" when this render includes images - `coverFileID` string: null, or when this render includes images: "mfimg::" followed by a description of this frame's shot (no text, letters or numbers in it) - `metadata` object - `field1` string - `field2` string - `field3` string - `field4` string - `comments` object[] - `createdAt` string: ISO date string - `settings` object, required: Storyboard settings - `boardTitle` string: Storyboard title - `theme` 'light' | 'dark' - `showMetadata` boolean - `frameSize` 'small' | 'medium' | 'large' - `storyboardSettings` object - `customFields` object[] - `frameNumber` object - `format` string - `prefix` string - `startFrom` integer - `brandGuide` object - `primaryColor` string - `secondaryColor` string - `accentColor` string - `bgColor` string - `artStyle` string: Visual style: cinematic, sketch, realistic, anime, noir - `styleNotes` string: Additional style instructions - `features` object - `enableCharacters` boolean - `enableScenes` boolean - `characters` object[] - `customScenes` object[] - StrategyMapData: Create a STRATEGY MAP — a plan DRAWN ON a real-world map: zones, coverage circles, route arrows, markers and short text notes over real geography. Also available as the MCP tool `render_strategymap`. The same payload works through either surface. - `title` string: Short descriptive title for the plan (e.g. "West Coast Expansion Plan") — displayed on the map - `shapes` object[], required: Array of shapes drawn on the map - `type` 'zone' | 'circle' | 'arrow' | 'marker' | 'text', required: Shape kind - `coordinates` unknown[], required: zone/arrow: array of [lng,lat] points; circle/marker/text: single [lng,lat] — LONGITUDE FIRST - unknown - `radiusKm` number: Circle radius in kilometers (REQUIRED for "circle") - `color` string: Hex "#RRGGBB"; same color groups shapes of one side/team/phase - `label` string: Optional short name; label sparingly. For "text" shapes this is the content - `emoji` string: For "marker": one emoji depicting what the marker IS (not a generic pin) - `dash` boolean: Dashed outline for planned/proposed/tentative elements - SwimlaneData: Create swimlane (cross-functional) diagrams with horizontal rows representing actors, departments, or roles, and flowchart nodes positioned within them. Also available as the MCP tool `render_swimlane`. The same payload works through either surface. - `class` string, required: Always 'GraphLinksModel' - `swimlaneRows` object[], required: Array of horizontal swim lane definitions - `id` string, required: Unique row ID (e.g., "row_1") - `title` string, required: Lane label (actor, department, role) - `color` string, required: Background color (soft pastel hex) - `nodeDataArray` object[], required: Array of flowchart nodes assigned to swim lanes - `key` string, required: Unique node identifier - `text` string, required: Node label - `row` string, required: swimlaneRows id this node belongs to - `loc` string, required: Position as "x y" string - `width` number: 120 for processes, 100 for diamonds - `height` number: 60 for processes, 80 for diamonds - `shape` 'RoundedRectangle' | 'Diamond' | 'Ellipse' | 'Rectangle', required: Node shape - `color` string, required: Node hex color - `linkDataArray` object[], required: Array of connections between nodes - `from` string, required: Source node key - `to` string, required: Target node key - `fromSpot` 'Top' | 'Bottom' | 'Left' | 'Right', required - `toSpot` 'Top' | 'Bottom' | 'Left' | 'Right', required - `text` string: Link label (e.g., "Yes", "No") - `segmentFraction` number: 0.1-0.9, label position along the path — give adjacent labelled links different values (0.35 / 0.65) so labels do not stack - TableData: Create a board table of typed records: rows and columns where each column has a type (text, number, single/multi select with coloured options, date, checkbox, URL, media links, votes, sticky-note cells). Use it for rosters, comparison tables, inventories, directories, idea lists the team votes on, retro columns and simple 2x2 or SWOT grids that collect sticky notes. NOT for spreadsheets needing formulas or calculations (use render_spreadsheet); NOT for tasks moving through stages (use render_kanban); NOT for elaborate strategy canvases like RACI, BCG, Ansoff or segmentation frameworks (use render_whiteboard). Also available as the MCP tool `render_table`. The same payload works through either surface. - `style` object: Table styling. - `theme` 'clean' | 'soft' | 'mint' | 'peach' | 'bold' | 'sticky': Colours the header, grid and banded rows: clean = white, soft = light blue, mint = light green, peach = warm, bold = dark header, sticky = note yellow. - `banded` boolean: Alternate row tint. - `borders` 'all' | 'rows' | 'outer' | 'none': Grid lines. - `compact` boolean: Tighter rows. - `fontSize` number: Base text size in px, 12-22. 16 is normal. - `font` 'default' | 'sketchy': sketchy = hand-drawn look. - `textColor` string: Default text colour as #RRGGBB. - `scroll` boolean: Keep the table at a set size with rows and fields scrolling inside, for data too long or wide to read at full size. - `height` number: scroll only: visible height in px, 200-1200. - `fields` object[], required: Columns, left to right. - `name` string, required - `type` 'text' | 'number' | 'select' | 'multi' | 'date' | 'checkbox' | 'url' | 'media' | 'icon' | 'votes' | 'stickies' | 'person', required - `width` number: Column width in px, 60-400. - `options` object[]: select/multi only. - `label` string, required - `color` 'blue' | 'green' | 'amber' | 'grey' | 'violet' | 'pink' - `summary` 'sum' | 'avg' | 'count' | 'none': number only: footer total. - `rowHeaders` boolean: Style this column as bold row labels. - `imageSize` 's' | 'm' | 'l': media and icon only. - `voteLimit` number: votes only: votes per person, 0 = unlimited. - `align` 'left' | 'center' | 'right' - `format` object: number only: how values display. Values stay bare numbers. - `style` 'number' | 'currency' | 'percent': percent values are whole numbers: 25 shows as 25%. - `currency` string: ISO code, e.g. USD. - `decimals` number - `thousands` boolean - `unit` string: Shown after the number, e.g. MB, kg, hrs. - `dateFormat` 'short' | 'weekday' | 'long' | 'numeric' | 'iso': date only. - `rows` unknown[], required: Records. Each row is an array with one value per field (text/url string, number number, select option label, multi array of labels, date YYYY-MM-DD, checkbox boolean, media array of image or YouTube URLs, stickies array of short note texts, votes [], person "" and icon "" which are filled in on the board), or {"cells": [...], "fill": "#RRGGBB"} to highlight the row. Any cell may instead be {"value": ..., "bold", "italic", "strike", "color": "#RRGGBB", "fill": "#RRGGBB", "align"} - use formatting sparingly, to mark a key row or a cell that needs attention. - unknown - TextData - `text` string, required - `fontSize` integer - `align` 'left' | 'center' | 'right' - `color` string - `bold` boolean - TimelineData: Create a timeline for visualizing chronological events, milestones, history, evolution, or sequential stages. Use this for simple chronological visualization of events or milestones WITHOUT task management. For project plans with tasks, durations, progress, and assignees, use render_gantt instead. Also available as the MCP tool `render_timeline`. The same payload works through either surface. - `events` object[], required: Array of timeline events - `id` string, required: Unique event ID (e.g., "evt_1") - `title` string, required: Event title - `description` string, required: Detailed event description - `date` string, required: ISO date string (real date for date mode, placeholder for label mode) - `labelValue` string, required: Empty string for date mode, meaningful label for label mode (e.g., "Stage 1", "3300 BCE") - `coverType` string: null, or "image" when this render includes images - `coverFileID` string: null, or when this render includes images: "mfimg::" followed by a description of this event's picture (no text, letters or numbers in it) - `settings` object, required: Timeline settings - `boardTitle` string: Title of the timeline - `theme` string - `layout` 'horizontal' | 'vertical' - `labelType` 'date' | 'label': "date" for chronological events with real dates, "label" for stages/phases/abstract sequences - TreeDiagramData: Create a top-down hierarchy tree diagram. Four categories: "sitemap" (website page hierarchy), "orgchart" (reporting structure of people/teams), "tree" (generic hierarchy: taxonomy, family tree, folder structure), "wbs" (project work breakdown structure). Also available as the MCP tool `render_treediagram`. The same payload works through either surface. - `title` string: A short title for the diagram, shown as the frame header (e.g. "Online Bookstore Sitemap"). - `category` 'sitemap' | 'orgchart' | 'tree' | 'wbs': Diagram flavor: sitemap (website pages), orgchart (reporting structure), tree (generic hierarchy), wbs (work breakdown) - `nodeData` object, required: Root node with id, name, root=true, category-specific fields, and children array - `id` string - `name` string - `url` string: sitemap only: relative page path like "/about"; root page is "/" - `role` string: orgchart only: job title - `department` string: orgchart only: organizational unit - `note` string: tree only: short note line - `owner` string: wbs only: responsible team or role; a person's name only when the user provides it - `root` boolean - `blocks` object[]: sitemap only: page content sections - `name` string - `children` object[] - `id` string - `name` string - `url` string - `role` string - `department` string - `note` string - `owner` string - `blocks` object[]: sitemap only: page content sections - `children` object[]: Nested child nodes - UpvoteIdeasData: Create an idea board where users submit and upvote ideas. Use this for idea lists, feature request boards, suggestion boxes, brainstorm lists, feedback boards, or any content where users vote up/down open-ended ideas or suggestions. For fixed multiple-choice voting use render_poll; for a random picker use render_spinningwheel. Also available as the MCP tool `render_upvoteideas`. The same payload works through either surface. - `question` string, required: Board heading / prompt, shown as the component title (e.g., "Project Management Feature Ideas") - `title` string: Optional title (same topic as question); used as a fallback heading - `options` string[], required: Array of 4-6 distinct idea strings that users can upvote - VideoData: Generate a short video clip - animation, motion graphics, cinematic or any moving content - and place it on the board as a video player component. Also available as the MCP tool `render_video`. The same payload works through either surface. - `prompt` string, required: What happens in the clip: scene, subject, motion, camera movement and visual style, in one self-contained description. - WhiteboardData: Create whiteboards for freeform brainstorming AND structured strategy work: sticky notes and sections, named frameworks (SWOT, SCAMPER, Six Thinking Hats, Fishbone, empathy maps, Lean/Business Model Canvas, retrospectives, priority/RACI/Eisenhower matrices). NOT for diagrams — system/cloud architecture diagrams are render_cloudarchitecture, flowcharts/UML render_flowchart; NOT for mood/inspiration boards with imagery and color palettes (use render_moodframe); NOT for kanban-style status columns (use render_kanban) or UI/screen mockups and wireframes (use render_wireframe). Also available as the MCP tool `render_whiteboard`. The same payload works through either surface. - `components` object, required: Whiteboard components with 'c' array containing MF_Section, MF_Note2, MF_Text, shapes, MF_ConnectorPath arrows and chart elements - `c` object[] - `t` string: Component type: MF_Section, MF_Note2, MF_Text, MF_Rectangle2, MF_Circle2, MF_ConnectorPath, or a chart (MF_PieChart2, MF_VerticalBarChart, MF_HorizontalBarChart, MF_HorizontalLineChart, MF_AreaChart, MF_ScatterChart, MF_BubbleChart, MF_RadarChart) - `x` number - `y` number - `w` number - `h` number - `a` number: Angle, always 0 - `e` string: Unique element ID - `tx` string: Text content: the note, the label, the section title - `ta` 'left' | 'center' | 'right' | 'justify' - `fs` number: REQUIRED on anything with text. Font size in px: section titles 16-24, note text 12-16, board headings larger. Omit it and every word renders at the same default size. - `fcl` string: Font colour, hex - dark text on a light sticky. Not for MF_Section: its theme sets the title colour. - `fw` 'normal' | 'bold' | '200' | '300' | '600' | '900' - `fst` 'normal' | 'italic' - `td` 'none' | 'underline' | 'line-through' - `fnt` string: REQUIRED on anything with text. A Google Font family name; keep to one or two across the board. - `lh` number: Line height multiplier, 1.2-1.5 keeps notes readable - `tp` number: MF_Note2: padding inside the sticky, 8-15 - `fold` boolean: MF_Note2: the folded-corner effect - `theme` 'white' | 'ash' | 'ink' | 'mockflow' | 'mint' | 'citrus' | 'blossom' | 'orchid' | 'teal' | 'sunny' | 'cherry' | 'sand': MF_Section ONLY: the named palette that colours the section. It paints fill, border and title colour, so a themed section carries no colour properties of its own. Most sections take "white" or "ash". - `fc` string[]: MF_Note2 and shapes only - fill colours [from, to]. A sticky takes the SAME swatch twice from the note palette, e.g. ["#FFF8C4","#FFF8C4"]. Never send fc on an MF_Section: its theme paints it. - `ft` 'solid' | 'linear-vertical' | 'linear-horizontal' | 'linear-diagonally' | 'radial' | 'none' - `fa` number: Fill opacity 0-1 - `st` string: Shadow: none | drop-shadow | inner-shadow | glow (a soft drop shadow suits notes) - `br` number[]: Corner radii [all, tl, tr, br, bl] - `bw` number[]: Border widths [all, top, right, bottom, left] - `bt` string[]: Border types [all, top, right, bottom, left] - `bc` string[]: Border colours [all, top, right, bottom, left] - `from` string: MF_ConnectorPath ONLY: the "e" id of the component the arrow starts at - `to` string: MF_ConnectorPath ONLY: the "e" id of the component the arrow points to - `arrowType` 'stepcurve' | 'stepline' | 'curve' | 'line': MF_ConnectorPath ONLY: line routing, "stepcurve" for most boards - `arrowColor` string: MF_ConnectorPath ONLY: line colour, hex - `arrowThickness` number: MF_ConnectorPath ONLY: line thickness 1-3 - `title` string: Chart components ONLY: the chart heading - WhiteboardFrameData: Create a whiteboard WRAPPED IN a MockFlow IdeaBoard whiteboard frame (a single framed board component), for brainstorming and strategy canvases: sticky notes, sections, and named frameworks (SWOT, retro, empathy map, business model canvas, matrices). Differs from render_whiteboard, which drops the same content as LOOSE components on the canvas rather than inside a frame. NOT for diagrams: system/cloud architecture diagrams are render_cloudarchitecture, flowcharts/UML render_flowchart. Also available as the MCP tool `render_whiteboardframe`. The same payload works through either surface. - `title` string: A short title shown as the frame header (e.g. "Sprint Retro Board"). - `components` object, required: Compressed whiteboard layout with 'c' array (MF_Section, MF_Note2, MF_Text, MF_Rectangle2, MF_Circle2). - `c` object[], required - `t` string, required: MF_Section, MF_Note2, MF_Text, MF_Rectangle2, or MF_Circle2 - `x` number, required - `y` number, required - `w` number, required - `h` number, required - `a` number: Angle, always 0 - `e` string, required - `tx` string: Text content: the note, the label, the section title - `ta` 'left' | 'center' | 'right' | 'justify' - `fs` number: REQUIRED on anything with text. Font size in px: section titles 16-24, note text 12-16, board headings larger. Omit it and every word renders at the same default size. - `fcl` string: Font colour, hex - dark text on a light sticky. Not for MF_Section: its theme sets the title colour. - `fw` 'normal' | 'bold' | '200' | '300' | '600' | '900' - `fst` 'normal' | 'italic' - `td` 'none' | 'underline' | 'line-through' - `fnt` string: REQUIRED on anything with text. A Google Font family name; keep to one or two across the board. - `lh` number: Line height multiplier, 1.2-1.5 keeps notes readable - `tp` number: MF_Note2: padding inside the sticky, 8-15 - `fold` boolean: MF_Note2: the folded-corner effect - `theme` 'white' | 'ash' | 'ink' | 'mockflow' | 'mint' | 'citrus' | 'blossom' | 'orchid' | 'teal' | 'sunny' | 'cherry' | 'sand': MF_Section ONLY: the named palette that colours the section. It paints fill, border and title colour, so a themed section carries no colour properties of its own. Most sections take "white" or "ash". - `fc` string[]: MF_Note2 and shapes only - fill colours [from, to]. A sticky takes the SAME swatch twice from the note palette, e.g. ["#FFF8C4","#FFF8C4"]. Never send fc on an MF_Section: its theme paints it. - `ft` 'solid' | 'linear-vertical' | 'linear-horizontal' | 'linear-diagonally' | 'radial' | 'none' - `fa` number: Fill opacity 0-1 - `st` string: Shadow: none | drop-shadow | inner-shadow | glow (a soft drop shadow suits notes) - `br` number[]: Corner radii [all, tl, tr, br, bl] - `bw` number[]: Border widths [all, top, right, bottom, left] - `bt` string[]: Border types [all, top, right, bottom, left] - `bc` string[]: Border colours [all, top, right, bottom, left] - WireframeData: Create a UI WIREFRAME screen (render_wireframe) as a document of TYPED WIDGETS: navbar, appbar, sidebar, tabbar, button, input, card, list, table, chart, image box, hero, pricing and about sixty more, drawn by MockFlow in the frame's current style (outline, sketchy, blueprint, hi-fi, iOS liquid glass, Windows Fluent or Android Material, each in light or dark mode, with an optional brand colour and font, switched by the user at any time). You write the document, never HTML or CSS. Also available as the MCP tool `render_wireframe`. The same payload works through either surface. - `title` string: Short screen name shown as the frame title - `device` 'phone' | 'tablet' | 'desktop' | 'mac' | 'windows' | 'car' | 'tv' | 'none': Device frame drawn around the screen; also the default size - `w` number: Frame width in px (default: the device width) - `h` number: Frame height in px (default: the device height; more for a long page) - `theme` 'outline' | 'sketchy' | 'blueprint' | 'hifi' | 'glass' | 'fluent' | 'android': Drawing style; leave out unless the user asked for a look - `mode` 'light' | 'dark': Dark mode of the style; leave out unless the user asked for dark mode - `accent` string: Brand colour for buttons, links and selection; leave out unless the user named one or the brand colour is known - `font` string: Google Fonts family name for the text; leave out unless the user named a font or a brand whose typeface is known - `sections` object[]: A NEW screen as structure, top to bottom: { name, bleed?, pin?, space?, rows: [ { cols: [ { span, align?, items: [ widget | { inline: [widgets] } ] } ], valign?, align? } ] }, as the step-1 reply describes. Leave out (with nodes) to receive the widget catalog instead of drawing - `aside` object: With sections: an optional full-height rail down the left of an app screen, e.g. { "type": "sidebar", "w": 240, "props": {...} } - `nodes` object[]: Only when MODIFYING an existing frame: its widgets in drawing order with px positions and ids. A new screen uses sections instead - `id` string: Only when modifying: the id of a widget kept from the existing document - `type` string, required: Widget key exactly as returned by the step-1 catalog call - `x` number, required - `y` number, required - `w` number, required - `h` number, required - `props` object: Widget props per the catalog schema - `style` object: The widget's own look over the theme, as STYLE in the catalog describes; keep it as it is when modifying unless the user changes that widget's look - object: Any other registry type. - `from` string, nullable: Connectors only: the item or `group:` the line starts at. - `to` string, nullable: Connectors only. - `directed` boolean: Connectors only. - `label` string: Connectors only. - `url` string, uri: Opens the board focused on this item. ## Other responses - `404`: The resource does not exist or the token cannot see it. - `429`: Too many requests. --- [API](https://skmtc.dev/mockflow/apis/mockflow-boards-api.md) - [All operations](https://skmtc.dev/mockflow/apis/mockflow-boards-api/llms.txt) - [OpenAPI document](https://skmtc.dev/mockflow/apis/mockflow-boards-api/revisions/1a890390518c?raw)