Flowchart

chart.flowchart

ProductionBounded custom (Class B)Deterministicstrictmoderatev1.0.0

No network

Overview

Validates typed process nodes and branches, delegates SCC discovery to the established graph engine, and draws deterministic orthogonal routes. It has no swimlane grammar. svg is a complete static, script-free chart. Mark highlight, the dotted guide, and the value panel are not in that SVG, and entry motion, focus, and updates stay inactive there. Pass the entire output.behavior.artifact unchanged to SquillifyChartRuntime.mount(container, artifact, options), then call the returned handle's replay() once to play the entry. A later value change uses update(nextArtifact, {intent}). Injecting svg directly leaves hover and motion off. Interaction is on by default for every host chart: after mount, pointer and keyboard focus open the value panel and the dotted guide. Set behavior.interaction.enabled to false to turn that off. motion.preset accepts only the family's entrance.

Process grammar needs typed nodes and branches while sharing proven graph algorithms.

Reliability

We preserve every node and branch you supply; SCCs come from DependencyGraphEngine and no second SCC algorithm exists. Declared failures: FLOWCHART_NODE_INVALID — trigger: a node id, kind, label, or bound is invalid; retryable: no; unchanged input: will not succeed; next: follow the recovery intent in the error details. FLOWCHART_EDGE_INVALID — trigger: an edge id or endpoint is invalid; retryable: no; unchanged input: will not succeed; next: follow the recovery intent in the error details. FLOWCHART_DECISION_INVALID — trigger: a decision does not have valid labelled branches; retryable: no; unchanged input: will not succeed; next: follow the recovery intent in the error details. FLOWCHART_COMPONENT_INVALID — trigger: components violate the requested connectedness policy; retryable: no; unchanged input: will not succeed; next: follow the recovery intent in the error details. CHART_CAPACITY_EXCEEDED — trigger: the process ranks, routes, labels, or targets cannot fit the requested canvas; retryable: no; unchanged input: will not succeed; next: follow the recovery intent in the error details.

Context footprint

Nodes, edges, SCCs, ranks, bends, labels, and targets are bounded. A successful call costs 4 execution credits.

When to use it

When structure is supplied explicitly.

When lanes, simulation, or process correctness proof is needed.

Scope

Note

Typed process nodes, labelled branches, SCCs, components, ranks, and orthogonal routes.

Non-goals

Swimlanes
BPMN
Execution
Simulation
Termination proof
Arbitrary coordinates

Properties

IdempotentRetry safeStreaming supportedFile input supportedRequires external service

Capabilities

generation

Cost & billing

Flat rate per invocation

MetercallsBillable onsuccessCost per call4 credits

File handling

Accepts file_refProduces file_refMax input683.6 KB

How we handle your data

Sensitive output possible

What this means

This skill may receive sensitive content and may return submitted, transformed, extracted, or reformatted content.

Squillify guarantees

Runs inside Squillify
This skill runs inside Squillify.
Payloads are not sent to an external service by this skill.
Squillify does not permanently store submitted payloads.
Telemetry records metadata only, not submitted content.
Submitted payloads are not used for training.
Submitted payloads are not reviewed by humans.
This skill does not target sensitive data.
The response may contain submitted or transformed content.

Your responsibility

Squillify does not determine whether submitted content is sensitive. Your application is responsible for deciding what data it is allowed to submit. Your application is responsible for securing the response.

Read the Microskill Data Handling Policy

Input schema

Field	Type	Required	Description
nodes	array	Yes	Array of 1..500 objects with id, kind, label, and optional shortLabel, status, meaning, annotation, and externalRef properties.
edges	array	Yes	Array of 0..1500 objects with id, from, to, and optional label, meaning, and isDefault properties; parallel IDs remain distinct.
orientation	string	No	topToBottom or leftToRight; default topToBottom when omitted.
components	string	No	requireConnected or separate; default requireConnected when omitted.
selfLoops	string	No	Only reject is supported and is the default when omitted; self-loops are never rendered.
layout	object	No	Optional object with order and insufficientSpace properties; omit it for optimized deterministic ordering.
legend	object	No	Optional object with visible and placement properties for node kinds and meanings; omit it for automatic visibility.
width	integer	No	Canvas width in pixels, 100..1600 (optional; default 900). Outside that range the request is refused as invalid input rather than clamped. The ceiling is the size a chart is read at — a full-HD dashboard or a report page; beyond it the canvas stops being what limits how much fits, and type sized for the canvas is illegible once the export is displayed smaller. It applies per side, so a tall portrait canvas for a long horizontal ranking is allowed.
height	integer	No	Canvas height in pixels, 100..1600 (optional; default 600). Outside that range the request is refused as invalid input rather than clamped. The ceiling is the size a chart is read at — a full-HD dashboard or a report page; beyond it the canvas stops being what limits how much fits, and type sized for the canvas is illegible once the export is displayed smaller. It applies per side, so a tall portrait canvas for a long horizontal ranking is allowed.
title	string	No	Heading drawn above the plot (optional; at most 1024 code points). Omit it and the chart renders untitled — we never invent a title from your data. One code point past that ceiling is refused as TOOL_INPUT_INVALID.
subtitle	string	No	Second line under the title, useful for the period covered or the unit (optional; at most 1024 code points). Omit it and no second line is drawn.
caption	string	No	Optional bounded caption drawn below the process; omit it and no caption is emitted.
source	string	No	Optional bounded source attribution; omit it and no source line is emitted.
period	string	No	Optional bounded reporting-period label; omit it and no period line is emitted.
theme	string	No	Visual language: basic, modern or squillify (optional; default squillify). An unregistered value is rejected with the registered names listed — we never substitute silently.
surface	string	No	Surface the theme renders on: dark or light (optional; default light).
density	string	No	How tightly the chrome is packed: compact, standard or spacious (optional; default standard). Density scales spacing only — it never lowers a legibility minimum.
visualProfile	string	No	What the SVG promises about the host font: portable or certified (optional; default portable). The default is layout-deterministic and tolerates substitution; certified refuses text the certified metrics cannot fully measure.
style	object	No	Optional bounded paint and typography styling; omit it to use the selected theme defaults. text.size is expressed in normalized design pixels at an 800-pixel reference width, so equivalent roles match at equal CSS width. It never changes data or accessibility. 'contract' selects the published semantics. 'tokens' sets design tokens; 'rules' applies typed properties to a role and optional series/category facets; 'palette' accepts a digest-checked palette; 'css' is a bounded post-layout stylesheet. The styleCapabilities section publishes this family's accepted roles, properties and copyable examples. For Bar, target one mark with role 'bar' plus seriesIndex and categoryIndex; categoryIndex alone targets that category across series. A minimal rule is {"target":{"role":"bar"},"set":{"paint.fill":"#2563eb"}}. Unsupported typed rules are refused; unsupported CSS is dropped and reported. Do not discover the grammar through trial calls: style validation failures are currently billable. Before calling, read this contract's styleSurface and styleCapabilities sections for the complete rule shape, accepted roles and properties, limits, and copyable examples.
behavior	object	No	Optional motion and interaction object for enter_process, update_status, focus_node, focus_edge, and trace_path; omit for static SVG. svg is a complete static, script-free chart. Mark highlight, the dotted guide, and the value panel are not in that SVG, and entry motion, focus, and updates stay inactive there. Pass the entire output.behavior.artifact unchanged to SquillifyChartRuntime.mount(container, artifact, options), then call the returned handle's replay() once to play the entry. A later value change uses update(nextArtifact, {intent}). Injecting svg directly leaves hover and motion off. Interaction is on by default for every host chart: after mount, pointer and keyboard focus open the value panel and the dotted guide. Set behavior.interaction.enabled to false to turn that off. motion.preset accepts only the family's entrance.
accessibility	object	No	Optional object with detail and maxItems properties; omit it for the default cycle-aware bounded reading order.
output	object	No	Output scoping (optional). Nested key output.idNamespace ([a-z][a-z0-9-]{0,31}) is prefixed onto every generated element id when several charts share one host document; omit for a standalone chart. An invalid namespace is rejected.

Output schema

Field	Type	Required	Description
svg	string	Yes	Allowlist-checked SVG. svg is a complete static, script-free chart. Mark highlight, the dotted guide, and the value panel are not in that SVG, and entry motion, focus, and updates stay inactive there. Pass the entire output.behavior.artifact unchanged to SquillifyChartRuntime.mount(container, artifact, options), then call the returned handle's replay() once to play the entry. A later value change uses update(nextArtifact, {intent}). Injecting svg directly leaves hover and motion off. Interaction is on by default for every host chart: after mount, pointer and keyboard focus open the value panel and the dotted guide. Set behavior.interaction.enabled to false to turn that off. motion.preset accepts only the family's entrance.
width	integer	Yes	Rendered width in pixels.
height	integer	Yes	Rendered height in pixels.
viewBox	string	Yes	SVG viewBox string (for example "0 0 800 400").
nodeResults	array	Yes	Array of node objects with id, kind, status, rank, component, input order, box geometry, and stable target identity.
edgeResults	array	Yes	Array of edge objects with id, endpoint and branch semantics, orthogonal route, bend count, back-edge flag, and target identity.
componentResults	array	Yes	Array of weak-component objects with component index and deterministic ordered node IDs.
cycleResults	array	Yes	Array of cycle objects containing established Tarjan strongly-connected node IDs in deterministic order.
layoutResult	object	Yes	Object with orientation, rank count, largest rank, ordering strategy, and an explicit lanesUnsupported flag.
routingResult	object	Yes	Object with orthogonal routing mode, bend count, and back-edge count properties.
accessibility	object	No	Optional object containing cycle-aware reading-order text, detail level, and bounded truncation metadata.
styleReport	object	No	Always reports the resolved typographyProfile and fontMetrics contract, plus tokensApplied, rulesApplied, typedRulesApplied, typedAssignmentsApplied, rulesDropped, declarationsDropped and, when anything was dropped, a bounded list of reasons.
renderSummary	object	Yes	Object with bounded node, edge, component, rank, cycle, and back-edge counts or flags.
transformationSummary	object	Yes	Object proving no lane inference, simulation, semantic repair, dropped nodes, or dropped branches occurred.
behavior	object	No	Resolved default-on motion and interaction report. Includes the digest-bound host artifact when behavior is enabled and always preserves a complete script-free SVG. svg is a complete static, script-free chart. Mark highlight, the dotted guide, and the value panel are not in that SVG, and entry motion, focus, and updates stay inactive there. Pass the entire output.behavior.artifact unchanged to SquillifyChartRuntime.mount(container, artifact, options), then call the returned handle's replay() once to play the entry. A later value change uses update(nextArtifact, {intent}). Injecting svg directly leaves hover and motion off. Interaction is on by default for every host chart: after mount, pointer and keyboard focus open the value panel and the dotted guide. Set behavior.interaction.enabled to false to turn that off. motion.preset accepts only the family's entrance.
warnings	array	No	Present when the render succeeded with a known degradation. Each entry is an object with a stable code, a message and details. Every chart can emit FONT_SUBSTITUTION_POSSIBLE under visualProfile 'portable', FONT_GLYPH_UNMEASURED when a code point falls outside the certified metrics, and CHART_STYLE_PARTIALLY_APPLIED when part of your styling was dropped — styleReport then names which part and why. Codes are stable for agent routing.

API contract

POST /v1/execute

curl

curl -sS -X POST "$BASE/v1/execute" \
  -H "Authorization: Bearer $KEY" -H "Content-Type: application/json" \
  -d '{"skillKey":"chart.flowchart","input":{"nodes":[{"id":"start","kind":"start","label":"Start"},{"id":"end","kind":"end","label":"End"}],"edges":[{"id":"e","from":"start","to":"end"}]}}'

Integrations

TypeScript SDK

import { Squillify } from "@squillify/sdk";

const sq = new Squillify({ apiKey: process.env.SQUILLIFY_API_KEY });

const { output } = await sq.execute("chart.flowchart", {"nodes":[{"id":"start","kind":"start","label":"Start"},{"id":"end","kind":"end","label":"End"}],"edges":[{"id":"e","from":"start","to":"end"}]});

Errors

Code	HTTP	Retryable	Description
VALIDATION_ERROR	400	No	The request payload failed schema validation.
UNAUTHORIZED	401	No	Missing or invalid API key.
SKILL_NOT_ACCESSIBLE	403	No	The API key is not granted access to this skill.
SKILL_NOT_AVAILABLE_FOR_PLAN	403	No	This skill is not included in your current plan.
PLAN_ELIGIBILITY_UNAVAILABLE	503	Yes	Plan eligibility could not be decided. Retry after backoff.
SKILL_NOT_FOUND	404	No	The requested skill or version does not exist.
TENANT_RATE_LIMITED	429	Yes	Request rate limit exceeded. Retry after backoff.
QUOTA_EXCEEDED	429	Yes	Plan quota exhausted. Retryable once the quota period resets.
EXECUTION_TIMEOUT	504	Yes	Execution exceeded the allowed time budget.
FLOWCHART_NODE_INVALID	400	No	The request payload failed this skill's input validation.
FLOWCHART_EDGE_INVALID	400	No	The request payload failed this skill's input validation.
FLOWCHART_DECISION_INVALID	400	No	The request payload failed this skill's input validation.
FLOWCHART_COMPONENT_INVALID	400	No	The request payload failed this skill's input validation.
CHART_CAPACITY_EXCEEDED	429	No	A size, quota, rate, or time limit was exceeded.

Other limits

Limit	Value
Recommended inline bytes	32 KiB

Limitations

Swimlanes
BPMN
Execution
Simulation
Termination proof
Arbitrary coordinates
Lane ownership
Executable workflow definitions

How to call

POST /v1/execute (requires authentication)

Request bodyjson

{
  "skillKey": "chart.flowchart",
  "input": {
    "nodes": [
      {
        "id": "start",
        "kind": "start",
        "label": "Start"
      },
      {
        "id": "end",
        "kind": "end",
        "label": "End"
      }
    ],
    "edges": [
      {
        "id": "e",
        "from": "start",
        "to": "end"
      }
    ]
  }
}

Examples

Request handling

Inputjson

{
  "nodes": [
    {
      "id": "start",
      "kind": "start",
      "label": "Start"
    },
    {
      "id": "end",
      "kind": "end",
      "label": "End"
    }
  ],
  "edges": [
    {
      "id": "e",
      "from": "start",
      "to": "end"
    }
  ]
}

Expected outputjson

{
  "componentResults": [
    {
      "index": 0,
      "nodeIds": [
        "start",
        "end"
      ]
    }
  ],
  "layoutResult": {
    "orientation": "topToBottom",
    "readingOrder": [
      "start",
      "end"
    ],
    "order": "optimized",
    "swimlanes": false
  },
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" role=\"img\" class=\"sq-chart sq-chart--flowchart sq-family--flow sq-theme--squillify sq-surface--light sq-density--standard\" data-sq-style-contract=\"CHART_STYLE@1\" data-sq-chart=\"flowchart\" data-sq-family=\"flow\" data-sq-theme=\"squillify\" data-sq-theme-version=\"1\" data-sq-surface=\"light\" data-sq-density=\"standard\" data-sq-a11y-detail=\"grouped\" aria-labelledby=\"sq-d77857a14348-title-0 sq-d77857a14348-desc-1\"><title id=\"sq-d77857a14348-title-0\">Flowchart</title><desc id=\"sq-d77857a14348-desc-1\">2 process nodes and 1 typed edges across 1 components; 0 strongly connected cycle groups.</desc><style>.sq-chart{--sq-chart-axis:#c9d1df;--sq-chart-font-family:'Squillify Mono', 'IBM Plex Mono', monospace;--sq-chart-grid:#d8dee9;--sq-chart-surface:#ffffff;--sq-chart-text-muted:#667085;--sq-chart-text-primary:#101828;--sq-series-1:#2563eb;--sq-series-2:#6d5ce7;--sq-series-3:#168a5b;--sq-series-4:#c45412;--sq-series-5:#d92d20;--sq-series-6:#667085;font-family:var(--sq-chart-font-family);font-weight:500;}.sq-chart .sq-background{fill:var(--sq-chart-surface);}.sq-chart .sq-node-label{fill:var(--sq-chart-text-primary);}</style><rect x=\"0\" y=\"0\" width=\"900\" height=\"600\" fill=\"#ffffff\" class=\"sq-background\" data-sq-role=\"background\"/><g class=\"sq-plot\" data-sq-role=\"plot\"><path d=\"M 422 185 L 422 415\" fill=\"none\" stroke=\"#c9d1df\" stroke-width=\"1.5\" class=\"sq-flow-edge\" data-sq-role=\"flow-edge\" data-sq-target-key=\"t-flow-edge-ebeb164321affbe8\" data-sq-point-index=\"0\"/><path d=\"M 422 415 L 418 406 L 426 406 Z\" fill=\"#c9d1df\" class=\"sq-flow-arrow\" data-sq-role=\"flow-arrow\" data-sq-point-index=\"0\"/><rect x=\"359\" y=\"127\" width=\"126\" height=\"58\" rx=\"29\" fill=\"#2563eb\" stroke=\"#101828\" stroke-width=\"1.2\" class=\"sq-start-node\" data-sq-role=\"start-node\" data-sq-target-key=\"t-flow-node-ee863f58a47cccf8\" data-sq-point-index=\"0\"/><rect x=\"359\" y=\"415\" width=\"126\" height=\"58\" rx=\"29\" fill=\"#6d5ce7\" stroke=\"#101828\" stroke-width=\"1.2\" class=\"sq-end-node\" data-sq-role=\"end-node\" data-sq-target-key=\"t-flow-node-af1fdc3f2ebf2454\" data-sq-point-index=\"1\"/><path d=\"M 425 185 L 424.598 186.5 L 423.5 187.598 L 422 188 L 420.5 187.598 L 419.402 186.5 L 419 185 L 419.402 183.5 L 420.5 182.402 L 422 182 L 423.5 182.402 L 424.598 183.5 Z\" fill=\"#ffffff\" stroke=\"#c9d1df\" stroke-width=\"1.2\" class=\"sq-flow-port\" data-sq-role=\"flow-port\"/><path d=\"M 425 415 L 424.598 416.5 L 423.5 417.598 L 422 418 L 420.5 417.598 L 419.402 416.5 L 419 415 L 419.402 413.5 L 420.5 412.402 L 422 412 L 423.5 412.402 L 424.598 413.5 Z\" fill=\"#ffffff\" stroke=\"#c9d1df\" stroke-width=\"1.2\" class=\"sq-flow-port\" data-sq-role=\"flow-port\"/><text x=\"422\" y=\"160\" font-size=\"10\" text-anchor=\"middle\" textLength=\"30\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-node-label\" data-sq-role=\"node-label\" data-sq-point-index=\"0\">Start</text><text x=\"422\" y=\"448\" font-size=\"10\" text-anchor=\"middle\" textLength=\"18\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-node-label\" data-sq-role=\"node-label\" data-sq-point-index=\"1\">End</text></g></svg>",
  "transformationSummary": {
    "applied": false,
    "operations": [],
    "affectedCategoryCount": 0,
    "affectedPointCount": 0,
    "affectedLabelCount": 0
  },
  "cycleResults": [],
  "height": 600,
  "edgeResults": [
    {
      "from": "start",
      "targetKey": "t-flow-edge-ebeb164321affbe8",
      "id": "e",
      "label": "",
      "meaning": "",
      "isDefault": false,
      "route": [
        [
          422,
          185
        ],
        [
          422,
          415
        ]
      ],
      "bendCount": 0,
      "to": "end"
    }
  ],
  "renderSummary": {
    "variation": "flowchart",
    "nodeCount": 2,
    "edgeCount": 1,
    "componentCount": 1,
    "cycleCount": 0,
    "swimlanes": false
  },
  "accessibility": {
    "title": "Flowchart",
    "detail": "grouped",
    "description": "2 process nodes and 1 typed edges across 1 components; 0 strongly connected cycle groups."
  },
  "nodeResults": [
    {
      "readingOrder": 0,
      "box": {
        "x": 359,
        "y": 127,
        "width": 126,
        "height": 58
      },
      "rank": 0,
      "kind": "start",
      "id": "start",
      "status": "unknown",
      "targetKey": "t-flow-node-ee863f58a47cccf8"
    },
    {
      "readingOrder": 1,
      "box": {
        "x": 359,
        "y": 415,
        "width": 126,
        "height": 58
      },
      "rank": 1,
      "kind": "end",
      "id": "end",
      "status": "unknown",
      "targetKey": "t-flow-node-af1fdc3f2ebf2454"
    }
  ],
  "width": 900,
  "routingResult": {
    "kind": "orthogonal",
    "estimatedBends": 0
  },
  "viewBox": "0 0 900 600"
}

Approval decision