ai-figure

Category: Docs & Knowledge | Uploader: hustcc | Downloads: 0 | Version: v1.0（Latest）

Generate clean SVG diagrams (flowchart, tree, mindmap, architecture, sequence, quadrant, gantt, state machine, ER, timeline, swimlane, bubble chart, radar chart) from a markdown string or a JSON config via fig(). Auto-layout, zero coordinates needed. Works in browser and Node.js.

Changelog: Source: GitHub https://github.com/hustcc/ai-figure

Directory Structure

Current level: tree/main/

📁 .github/
- 📁 workflows/
  - 📄 build.yml 436 B
  - 📄 deploy.yml 1.0 KB
  - 📄 publish.yml 617 B
📁 assets/
- 📄 arch.svg 3.9 KB
- 📄 bubble.svg 6.3 KB
- 📄 er.svg 8.7 KB
- 📄 flow.svg 4.1 KB
- 📄 gantt.svg 9.7 KB
- 📄 mindmap.svg 8.5 KB
- 📄 quadrant.svg 5.3 KB
- 📄 radar.svg 5.3 KB
- 📄 sequence.svg 4.7 KB
- 📄 state.svg 4.3 KB
- 📄 swimlane.svg 4.6 KB
- 📄 timeline.svg 3.0 KB
- 📄 tree.svg 4.7 KB
📁 site/
- 📁 public/
  - 📄 file.svg 391 B
  - 📄 globe.svg 1.0 KB
  - 📄 next.svg 1.3 KB
  - 📄 vercel.svg 128 B
  - 📄 window.svg 385 B
- 📁 src/
  - 📁 app/
    
    📁 ai/
    
    📄 page.tsx 25.5 KB
    
    📁 docs/
    
    📄 page.tsx 28.8 KB
    
    📁 gallery/
    
    📄 page.tsx 2.3 KB
    
    📁 s/
    
    📄 page.tsx 4.7 KB
    
    📄 favicon.ico 25.3 KB
    
    📄 globals.css 140 B
    
    📄 layout.tsx 876 B
    
    📄 page.tsx 5.9 KB
  - 📁 components/
    
    📄 CodeBlock.tsx 1.1 KB
    
    📄 CopyButton.tsx 1.4 KB
    
    📄 DiagramCard.tsx 841 B
    
    📄 FigEditor.tsx 2.3 KB
    
    📄 Footer.tsx 555 B
    
    📄 Header.tsx 2.3 KB
  - 📁 lib/
    
    📄 decode.ts 2.2 KB
    
    📄 diagrams.ts 48.0 KB
    
    📄 encode.ts 249 B
    
    📄 figHighlight.ts 3.3 KB
- 📄 .gitignore 480 B
- 📄 AGENTS.md 327 B
- 📄 CLAUDE.md 11 B
- 📄 eslint.config.mjs 465 B
- 📄 next.config.ts 161 B
- 📄 package.json 577 B
- 📄 postcss.config.mjs 94 B
- 📄 README.md 1.4 KB
- 📄 tsconfig.json 670 B
📁 src/
- 📄 arch.ts 10.3 KB
- 📄 bubble.ts 12.1 KB
- 📄 er.ts 12.5 KB
- 📄 gantt.ts 18.1 KB
- 📄 index.ts 4.7 KB
- 📄 layout.ts 4.2 KB
- 📄 mindmap.ts 10.1 KB
- 📄 parse.ts 20.8 KB
- 📄 quadrant.ts 11.2 KB
- 📄 radar.ts 9.5 KB
- 📄 render.ts 12.8 KB
- 📄 sequence.ts 10.4 KB
- 📄 state.ts 9.7 KB
- 📄 swimlane.ts 10.2 KB
- 📄 theme.ts 12.8 KB
- 📄 timeline.ts 11.8 KB
- 📄 tree.ts 1.7 KB
- 📄 types.ts 20.0 KB
- 📄 utils.ts 5.4 KB
📁 tests/
- 📁 parse/
  - 📄 arch.test.ts 2.7 KB
  - 📄 bubble.test.ts 2.3 KB
  - 📄 er.test.ts 3.6 KB
  - 📄 flow.test.ts 3.6 KB
  - 📄 gantt.test.ts 2.9 KB
  - 📄 mindmap.test.ts 2.5 KB
  - 📄 quadrant.test.ts 3.3 KB
  - 📄 radar.test.ts 4.4 KB
  - 📄 sequence.test.ts 2.7 KB
  - 📄 state.test.ts 3.2 KB
  - 📄 swimlane.test.ts 4.0 KB
  - 📄 timeline.test.ts 3.3 KB
  - 📄 tree.test.ts 2.5 KB
- 📁 snapshots/
  - 📄 arch-cloud-antv.svg 5.0 KB
  - 📄 arch-data-pipeline-drawio.svg 4.7 KB
  - 📄 arch-microservices-default.svg 5.3 KB
  - 📄 arch-ml-platform-mono-blue.svg 4.6 KB
  - 📄 arch-observability-dark.svg 5.3 KB
  - 📄 arch-stack-default.svg 3.9 KB
  - 📄 arch-titled-default.svg 2.8 KB
  - 📄 bubble-budget-figma.svg 6.3 KB
  - 📄 bubble-energy-vega.svg 7.2 KB
  - 📄 bubble-market-analysis-default.svg 6.3 KB
  - 📄 bubble-servers-mono-blue-dark.svg 8.2 KB
  - 📄 bubble-tech-antv-dark.svg 6.3 KB
  - 📄 er-blog-schema-default.svg 8.5 KB
  - 📄 er-ecommerce-schema-antv.svg 10.1 KB
  - 📄 er-hospital-schema-figma-dark.svg 9.9 KB
  - 📄 er-parse-figmd.svg 3.5 KB
  - 📄 er-school-db-drawio.svg 9.9 KB
  - 📄 er-social-network-vega.svg 8.7 KB
  - 📄 flow-auth-default.svg 10.7 KB
  - 📄 flow-ci-pipeline-antv.svg 10.1 KB
  - 📄 flow-decision-branch-default.svg 3.8 KB
  - 📄 flow-ecommerce-checkout-default.svg 8.1 KB
  - 📄 flow-hermes-agent-default.svg 10.1 KB
  - 📄 flow-microservices-default.svg 7.8 KB
  - 📄 flow-order-processing-dark.svg 8.5 KB
  - 📄 flow-parse-vega.svg 3.8 KB
  - 📄 flow-rag-pipeline-figma.svg 6.4 KB
  - 📄 flow-titled-default.svg 2.4 KB
  - 📄 gantt-annual-roadmap-drawio.svg 11.5 KB
  - 📄 gantt-infra-upgrade-antv.svg 9.4 KB
  - 📄 gantt-migration-custom-dark.svg 4.9 KB
  - 📄 gantt-minimal-default.svg 5.6 KB
  - 📄 gantt-product-launch-antv.svg 9.7 KB
  - 📄 gantt-project-default.svg 6.4 KB
  - 📄 gantt-sprint-drawio-dark.svg 5.0 KB
  - 📄 mindmap-balanced-mono-blue-dark.svg 10.1 KB
  - 📄 mindmap-knowledge-figma.svg 8.4 KB
  - 📄 mindmap-learning-antv.svg 9.1 KB
  - 📄 mindmap-org-vega-dark.svg 7.9 KB
  - 📄 mindmap-product-default.svg 6.3 KB
  - 📄 quadrant-content-default.svg 5.3 KB
  - 📄 quadrant-okr-mono-green.svg 5.3 KB
  - 📄 quadrant-priority-default.svg 5.3 KB
  - 📄 quadrant-risk-matrix-default.svg 5.3 KB
  - 📄 quadrant-tech-debt-dark.svg 5.6 KB
  - 📄 quadrant-tech-stack-figma.svg 5.3 KB
  - 📄 quadrant-titled-default.svg 4.5 KB
  - 📄 radar-cloud-figma-dark.svg 6.0 KB
  - 📄 radar-framework-antv.svg 5.3 KB
  - 📄 radar-quality-mono-blue.svg 3.7 KB
  - 📄 radar-skills-default.svg 5.1 KB
  - 📄 radar-velocity-vega-dark.svg 5.4 KB
  - 📄 sequence-auth-default.svg 4.7 KB
  - 📄 sequence-checkout-dark.svg 6.3 KB
  - 📄 sequence-ci-build-vega.svg 6.3 KB
  - 📄 sequence-order-drawio.svg 5.9 KB
  - 📄 sequence-password-reset-default.svg 6.8 KB
  - 📄 sequence-titled-default.svg 3.8 KB
  - 📄 sequence-websocket-default.svg 3.9 KB
  - 📄 state-document-review-drawio.svg 4.5 KB
  - 📄 state-order-status-default.svg 5.1 KB
  - 📄 state-parse-figmd.svg 3.8 KB
  - 📄 state-traffic-light-antv.svg 3.4 KB
  - 📄 state-user-session-dark.svg 5.0 KB
  - 📄 state-vending-machine-figma.svg 5.0 KB
  - 📄 swimlane-deploy-pipeline-drawio.svg 5.8 KB
  - 📄 swimlane-expense-approval-figma.svg 4.8 KB
  - 📄 swimlane-hiring-process-default.svg 5.5 KB
  - 📄 swimlane-incident-response-dark.svg 5.3 KB
  - 📄 swimlane-order-flow-antv.svg 5.1 KB
  - 📄 swimlane-parse-figmd.svg 2.4 KB
  - 📄 timeline-company-history-antv.svg 5.4 KB
  - 📄 timeline-javascript-evolution-default.svg 5.9 KB
  - 📄 timeline-long-label-bounds-default.svg 2.7 KB
  - 📄 timeline-parse-figmd.svg 2.9 KB
  - 📄 timeline-product-history-default.svg 3.8 KB
  - 📄 timeline-quarterly-roadmap-figma.svg 3.7 KB
  - 📄 timeline-space-exploration-dark.svg 5.7 KB
  - 📄 timeline-web-tech-evolution-drawio.svg 5.4 KB
  - 📄 tree-category-default.svg 6.7 KB
  - 📄 tree-deps-antv.svg 5.2 KB
  - 📄 tree-filesystem-default.svg 7.2 KB
  - 📄 tree-knowledge-default.svg 6.6 KB
  - 📄 tree-org-mono-purple.svg 4.7 KB
  - 📄 tree-tech-stack-dark.svg 8.7 KB
  - 📄 tree-titled-default.svg 3.0 KB
- 📄 arch-cloud-antv.test.ts 1.2 KB
- 📄 arch-data-pipeline-drawio.test.ts 1.2 KB
- 📄 arch-microservices-default.test.ts 1.3 KB
- 📄 arch-ml-platform-mono-blue.test.ts 1.2 KB
- 📄 arch-observability-dark.test.ts 1.4 KB
- 📄 arch-stack-default.test.ts 984 B
- 📄 bubble-budget-figma.test.ts 639 B
- 📄 bubble-energy-vega.test.ts 678 B
- 📄 bubble-market-analysis-default.test.ts 643 B
- 📄 bubble-servers-mono-blue-dark.test.ts 776 B
- 📄 bubble-tech-antv-dark.test.ts 659 B
- 📄 er-blog-schema-default.test.ts 1.5 KB
- 📄 er-ecommerce-schema-antv.test.ts 1.8 KB
- 📄 er-hospital-schema-figma-dark.test.ts 1.8 KB
- 📄 er-school-db-drawio.test.ts 1.8 KB
- 📄 er-social-network-vega.test.ts 1.6 KB
- 📄 flow-auth-default.test.ts 1.7 KB
- 📄 flow-ci-pipeline-antv.test.ts 1.8 KB
- 📄 flow-decision-branch-default.test.ts 867 B
- 📄 flow-ecommerce-checkout-default.test.ts 1.5 KB
- 📄 flow-hermes-agent-default.test.ts 2.1 KB
- 📄 flow-microservices-default.test.ts 1.7 KB
- 📄 flow-order-processing-dark.test.ts 1.7 KB
- 📄 flow-parse-vega.test.ts 797 B
- 📄 flow-rag-pipeline-figma.test.ts 1.5 KB
- 📄 gantt-annual-roadmap-drawio.test.ts 1.5 KB
- 📄 gantt-infra-upgrade-antv.test.ts 1.4 KB
- 📄 gantt-migration-custom-dark.test.ts 1.2 KB
- 📄 gantt-minimal-default.test.ts 778 B
- 📄 gantt-product-launch-antv.test.ts 1.7 KB
- 📄 gantt-project-default.test.ts 1.1 KB
- 📄 gantt-sprint-drawio-dark.test.ts 793 B
- 📄 helpers.ts 1.1 KB
- 📄 index.test.ts 16.9 KB
- 📄 mindmap-balanced-mono-blue-dark.test.ts 1.3 KB
- 📄 mindmap-knowledge-figma.test.ts 1.1 KB
- 📄 mindmap-learning-antv.test.ts 1.1 KB
- 📄 mindmap-org-vega-dark.test.ts 1.0 KB
- 📄 mindmap-product-default.test.ts 900 B
- 📄 quadrant-content-default.test.ts 1.0 KB
- 📄 quadrant-okr-mono-green.test.ts 1.1 KB
- 📄 quadrant-priority-default.test.ts 1022 B
- 📄 quadrant-risk-matrix-default.test.ts 1.0 KB
- 📄 quadrant-tech-debt-dark.test.ts 1.1 KB
- 📄 quadrant-tech-stack-figma.test.ts 1.0 KB
- 📄 radar-cloud-figma-dark.test.ts 681 B
- 📄 radar-framework-antv.test.ts 643 B
- 📄 radar-quality-mono-blue.test.ts 496 B
- 📄 radar-skills-default.test.ts 611 B
- 📄 radar-velocity-vega-dark.test.ts 663 B
- 📄 sequence-auth-default.test.ts 920 B
- 📄 sequence-checkout-dark.test.ts 1.2 KB
- 📄 sequence-ci-build-vega.test.ts 1.1 KB
- 📄 sequence-order-drawio.test.ts 1.0 KB
- 📄 sequence-password-reset-default.test.ts 1.3 KB
- 📄 sequence-websocket-default.test.ts 811 B
- 📄 state-document-review-drawio.test.ts 1.1 KB
- 📄 state-order-status-default.test.ts 1.2 KB
- 📄 state-traffic-light-antv.test.ts 848 B
- 📄 state-user-session-dark.test.ts 1.2 KB
- 📄 state-vending-machine-figma.test.ts 1.2 KB
- 📄 swimlane-deploy-pipeline-drawio.test.ts 1.1 KB
- 📄 swimlane-expense-approval-figma.test.ts 1008 B
- 📄 swimlane-hiring-process-default.test.ts 1.2 KB
- 📄 swimlane-incident-response-dark.test.ts 1.1 KB
- 📄 swimlane-order-flow-antv.test.ts 1.0 KB
- 📄 timeline-company-history-antv.test.ts 926 B
- 📄 timeline-javascript-evolution-default.test.ts 989 B
- 📄 timeline-long-label-bounds-default.test.ts 947 B
- 📄 timeline-product-history-default.test.ts 875 B
- 📄 timeline-quarterly-roadmap-figma.test.ts 921 B
- 📄 timeline-space-exploration-dark.test.ts 964 B
- 📄 timeline-web-tech-evolution-drawio.test.ts 923 B
- 📄 titles-subtitles.test.ts 14.5 KB
- 📄 tree-category-default.test.ts 1014 B
- 📄 tree-deps-antv.test.ts 886 B
- 📄 tree-filesystem-default.test.ts 1.0 KB
- 📄 tree-knowledge-default.test.ts 1017 B
- 📄 tree-org-mono-purple.test.ts 767 B
- 📄 tree-tech-stack-dark.test.ts 1.2 KB
- 📄 utils.test.ts 450 B
📄 .gitignore 1014 B
📄 AGENT.md 15.2 KB
📄 LICENSE 1.0 KB
📄 package.json 1.1 KB
📄 README.md 44.4 KB
📄 SKILL.md 10.7 KB
📄 tsconfig.json 433 B
📄 tsup.config.ts 291 B

SKILL.md

---
name: ai-figure
version: "0.4.0"
description: Generate clean SVG diagrams (flowchart, tree, mindmap, architecture, sequence, quadrant, gantt, state machine, ER, timeline, swimlane, bubble chart, radar chart) from a markdown string or a JSON config via fig(). Auto-layout, zero coordinates needed. Works in browser and Node.js.
author: hustcc
license: MIT
package: ai-figure
api: fig(markdown|options) → string (SVG)
tags: [flowchart, tree-diagram, mindmap, architecture-diagram, sequence-diagram, quadrant-chart, gantt-chart, state-machine, er-diagram, timeline, swimlane, bubble-chart, radar-chart, svg, layout, visualization, markdown]
---

# ai-figure Skill

Generates self-contained SVG diagrams. No coordinates needed — layout is computed automatically.

```typescript
import { fig } from 'ai-figure';

// Markdown string (preferred — compact, streaming-safe)
const svg = fig(`
  figure flow
  direction: LR
  palette: antv
  title: CI Pipeline
  subtitle: automated build and deploy
  code[Write Code] --> test{Tests Pass?}
  test --> build[Build Image]: yes
  test --> fix((Fix Issues)): no
  fix --> code
  build --> deploy[/Deploy/]
  group Pipeline: code, test, build
`);

// JSON config object (programmatic / strongly-typed)
const svg2 = fig({ figure: 'flow', nodes: [...], edges: [...] });

// DOM: document.getElementById('chart').innerHTML = svg;
// Node.js: fs.writeFileSync('chart.svg', svg);
```

`fig()` accepts either a **markdown string** or a **JSON config**. When given a string it never throws — partial or empty input (e.g. during AI streaming) returns a valid empty SVG that fills in progressively.

## Markdown syntax

**First line must be:** `figure <type>` — this is the required header, **not** a `key: value` config line.

Valid types: `flow` `tree` `mindmap` `arch` `sequence` `quadrant` `gantt` `state` `er` `timeline` `swimlane` `bubble` `radar`

Config lines use `key: value` syntax. Data lines use diagram-specific patterns.

| Key | Values | Default | Applies to |
|-----|--------|---------|------------|
| `title` | any string | — | all types |
| `subtitle` | any string | — | all types |
| `theme` | `light` `dark` | `light` | all types |
| `palette` | `default` `antv` `drawio` `figma` `vega` `mono-blue` `mono-green` `mono-purple` `mono-orange` | `default` | all types |
| `direction` | `TB` `LR` | `TB` | flow, tree, arch only |

Lines starting with `%%` are comments.

### Node notation (flow / tree / mindmap / arch)

| Notation | Shape |
|----------|-------|
| `id[label]` | process (rectangle) |
| `id{label}` | decision (diamond) |
| `id((label))` | terminal (pill) |
| `id[/label/]` | io (parallelogram) |
| `id` | process, id used as label |

### flow

```
figure flow
direction: LR
palette: antv
title: My Flow
subtitle: data pipeline example
A[Source] --> B[Target]          %% simple edge
A --> B[Target]: label           %% labeled edge
group Name: id1, id2, id3        %% logical group (dashed border)
```

### tree

```
figure tree
direction: LR
title: Org Chart
subtitle: company structure
root[Root]
root --> child[Child]
child --> leaf[Leaf]
```

### mindmap

```
figure mindmap
title: Product Strategy
subtitle: 2026 planning map
root[Product Strategy]
root --> market[Market]
root --> tech[Technology]
market --> smb[SMB]
market --> ent[Enterprise]
tech --> ai[AI Features]
```

### arch

```
figure arch
direction: TB
palette: antv
title: Web Stack
subtitle: three-tier architecture
layer Frontend
  ui[React App]
  assets[Static Assets]
layer Backend
  api[REST API]
  auth[Auth Service]
layer Data
  db[PostgreSQL]
```

### sequence

```
figure sequence
title: Login
subtitle: OAuth2 password flow
actors: Browser, API, DB         %% optional; inferred from messages if omitted
Browser -> API: POST /login      %% solid arrow
API --> Browser: 200 OK          %% dashed return arrow
```

### quadrant

```
figure quadrant
title: Priority
subtitle: effort vs value
x-axis Effort: Low .. High
y-axis Value: Low .. High
quadrant-1: Quick Wins    %% top-left
quadrant-2: Strategic     %% top-right
quadrant-3: Low Prio      %% bottom-left
quadrant-4: Long Shots    %% bottom-right
Feature A: 0.2, 0.9       %% label: x, y  (x/y in [0,1])
```

### gantt

```
figure gantt
title: Q1 Roadmap
subtitle: Jan – Mar 2025
section Design
  Wireframes: t1, 2025-01-06, 2025-01-24    %% label: id, start, end
  Mockups: t2, 2025-01-25, 2025-02-07
section Dev
  Frontend: t3, 2025-02-03, 2025-02-28
milestone: Launch, 2025-03-01
```

- Task format: `<label>: <id>, <yyyy-mm-dd>, <yyyy-mm-dd>` — **id is required**, even if you don't reference it
- `end` ≥ `start`; `section` groups tasks under a bold header; `milestone: <label>, <date>` marks a point in time

### state

```
figure state
title: Order Status
subtitle: e-commerce order lifecycle
idle[Idle]
processing[Processing]
accent: failed                   %% mark as accent/focal state
start --> idle                   %% start pseudo-state
idle --> processing: order placed
processing --> end: shipped
processing --> failed: error
failed --> idle: retry
```

- `id[label]` — normal state (rounded rectangle)
- `start` / `end` — reserved pseudo-state ids (filled circle / ringed circle)
- `id --> id2: event` — transition with optional label
- `accent: id` — mark a state as the focal/error state (max 1–2)

### er

```
figure er
title: Blog Schema
subtitle: users and posts
entity User
  id pk: uuid
  email: text
entity Post
  id pk: uuid
  author_id fk: uuid
  title: text
User --> Post: writes
```

- `entity Name` — declare an entity box (name used as id and label)
- Fields: `name pk: type` (primary key), `name fk: type` (foreign key), `name: type`, or bare `name`
- `A --> B: label` — relationship line with optional label
- `accent: EntityName` to mark the aggregate root entity

### timeline

```
figure timeline
title: Product History
subtitle: major releases
2020-01-15: v1.0 Launch milestone   %% major milestone (larger accent dot)
2021-06-01: v1.5 Improvements
2022-03-10: v2.0 Redesign milestone
2023-11-01: v3.0 AI Features
```

- Lines: `yyyy-mm-dd: label` or `yyyy-mm-dd: label milestone`
- Events are sorted chronologically and spaced proportionally on a horizontal axis
- Labels alternate above and below the baseline to reduce collision

### swimlane

```
figure swimlane
title: Order Flow
subtitle: cross-team process
section Customer
  order[Place Order]
  pay[Confirm Payment]
section Warehouse
  receive[Receive Order]
  pack[Pack Items]
section Shipping
  ship[Ship Package]
order --> pay
pay --> receive
receive --> pack
pack --> ship
```

- `section LaneName` — declares a new lane; subsequent node lines belong to it
- `id[Node Label]` — node declaration inside the current lane
- `A --> B` or `A --> B: label` — directed edges (may cross lanes)

### bubble

```
figure bubble
title: Market Analysis
subtitle: by product segment
%% label: value (positive number)
Product A: 75
Product B: 50
Product C: 85
```

- Data lines: `Label: value` — any positive number; bubble **area is proportional to value**
- Positions computed automatically; no coordinates needed

### radar

```
figure radar
title: Framework Comparison
subtitle: 2025 technical evaluation
axes: Performance, Scalability, DX, Ecosystem, Tooling
React: 75, 80, 90, 95, 88
Vue: 82, 72, 90, 82, 80
Angular: 65, 92, 72, 90, 86
```

- `axes:` — comma-separated list of axis labels (3 or more recommended); each becomes a spoke of the web
- Series lines: `Series Name: v1, v2, v3, ...` — one numeric value per axis, range **0–100** (treated as a percentage of the axis maximum; values are clamped)
- Multiple series can be overlaid; each is assigned a different palette color
- A legend with colored dots and series names appears below the chart

## Common pitfalls

These mistakes may produce unexpected or broken diagrams:

| ❌ Wrong | ✅ Correct | Note |
|----------|-----------|------|
| `type: flow` | `figure flow` (first line) | `figure <type>` is the header, not a config key |
| `A -->|label| B` | `A --> B: label` | Mermaid pipe-label syntax is not supported |
| `[*] --> idle` | `start --> idle` | Use `start` / `end` pseudo-ids, not `[*]` |
| `Task: start, end` (gantt) | `Task: id, start, end` | Task **id** is always required in gantt |
| `direction: LR` in gantt/sequence | (omit it) | `direction` is only meaningful for flow, tree, arch |

## JSON config (fig(options))

Same result as markdown but typed. Use when building diagrams programmatically.

All options share: `title?`, `subtitle?`, `theme?: 'light'|'dark'`, `palette?: string|string[]`, and (where applicable) `direction?: 'TB'|'LR'`.

```typescript
// flow
{ figure: 'flow', nodes: FlowNode[], edges: FlowEdge[], groups?: FlowGroup[] }
// FlowNode:  { id, label, type?: 'process'|'decision'|'terminal'|'io' }
// FlowEdge:  { from, to, label? }
// FlowGroup: { id, label, nodes: string[] }

// tree
{ figure: 'tree', nodes: TreeNode[] }
// TreeNode: { id, label, parent? }

// mindmap
{ figure: 'mindmap', nodes: MindmapNode[] }
// MindmapNode: { id, label, parent?, side?: 'left'|'right' }

// arch
{ figure: 'arch', layers: ArchLayer[] }
// ArchLayer: { id, label, nodes: { id, label }[] }

// sequence
{ figure: 'sequence', actors: string[], messages: SeqMessage[] }
// SeqMessage: { from, to, label?, style?: 'solid'|'return' }

// quadrant — quadrants: [top-left, top-right, bottom-left, bottom-right]; x=0 left, y=0 bottom
{ figure: 'quadrant', xAxis: { label, min, max }, yAxis: { label, min, max },
  quadrants: [string, string, string, string], points: QuadrantPoint[] }
// QuadrantPoint: { id, label, x, y }  x/y in [0,1]

// gantt
{ figure: 'gantt', tasks: GanttTask[], milestones?: GanttMilestone[] }
// GanttTask:      { id, label, start, end, groupId? }  start/end: 'yyyy-mm-dd'
// GanttMilestone: { date, label }

// state
{ figure: 'state', nodes: StateNode[], transitions: StateTransition[] }
// StateNode:       { id, label, type?: 'state'|'start'|'end', accent?: boolean }
// StateTransition: { from, to, label? }

// er
{ figure: 'er', entities: ErEntity[], relations: ErRelation[] }
// ErEntity:  { id, label, fields: ErField[], accent?: boolean }
// ErField:   { name, type?, key?: 'pk'|'fk' }
// ErRelation: { from, to, label? }

// timeline
{ figure: 'timeline', events: TimelineEvent[] }
// TimelineEvent: { id, label, date, milestone? }  date: 'yyyy-mm-dd'

// swimlane
{ figure: 'swimlane', lanes: string[], nodes: SwimlaneNode[], edges: SwimlaneEdge[] }
// SwimlaneNode: { id, label, lane, type? }  lane = one of lanes[]
// SwimlaneEdge: { from, to, label? }

// bubble
{ figure: 'bubble', items: BubbleItem[] }
// BubbleItem: { label, value }  — value is a positive number; area proportional to value

// radar
{ figure: 'radar', axes: string[], series: RadarSeries[] }
// RadarSeries: { label, values }  — values are 0-100 (one per axis); clamped to [0,100]
```

Comments 0

Latest | Hot

Please login before commenting.

Loading comments...

ai-figure

Directory Structure

SKILL.md

Report

Notice