First-class IDE support for working with CALM architectures.
-
+
๐งฉ CALM Canvas โ VS Code Extension
+
A visual architecture editor built into VS Code โ drag-and-drop nodes, draw relationships, apply standards, and validate compliance.
+
-
-
-
-
๐งฉ VSCode โ Validation & Timeline
-
-
-
-
Live validation errors
-
-
-
-
Timeline visualisation
-
-
-
diff --git a/docs/docs/working-with-calm/vscode-extension.md b/docs/docs/working-with-calm/vscode-extension.md
index d36a901df..17b83104f 100644
--- a/docs/docs/working-with-calm/vscode-extension.md
+++ b/docs/docs/working-with-calm/vscode-extension.md
@@ -1,13 +1,13 @@
---
id: vscode-extension
title: VS Code Extension
-sidebar_label: CALM Tools (VS Code)
+sidebar_label: CALM Canvas (VS Code)
sidebar_position: 2
---
-# VS Code Extension
+# VS Code Extension โ CALM Canvas
-The **CALM Tools** VS Code extension turns your editor into a live workbench for CALM architecture models. It validates documents on the fly, renders an interactive preview, and surfaces model elements in a navigable sidebar โ all without leaving the file you're editing.
+The **CALM Canvas** VS Code extension is a visual architecture editor for CALM models. It renders your architecture as an interactive, editable diagram โ add nodes, draw relationships, apply standards, validate compliance, and export diagrams โ all without leaving VS Code.
---
@@ -17,7 +17,7 @@ The extension is published to the Visual Studio Code Marketplace.
1. Open VS Code.
2. Open the Extensions view (`Cmd+Shift+X` on macOS, `Ctrl+Shift+X` on Windows/Linux).
-3. Search for **CALM Tools**.
+3. Search for **CALM Canvas**.
4. Click **Install**.
Alternative install paths:
@@ -25,363 +25,224 @@ Alternative install paths:
- **Marketplace web page:** [marketplace.visualstudio.com/items?itemName=FINOS.calm-vscode-plugin](https://marketplace.visualstudio.com/items?itemName=FINOS.calm-vscode-plugin)
- **VSIX file:** download the latest `.vsix` from the [GitHub releases](https://github.com/finos/architecture-as-code/releases) and run **Extensions: Install from VSIXโฆ** in the Command Palette.
-Once installed, open any CALM JSON file (one whose `$schema` points at `https://calm.finos.org/.../meta/calm.json`) and the extension activates automatically.
+Once installed, open any supported CALM file and the extension activates automatically.
----
-
-## Interface Layout
+### Supported File Formats
-The extension contributes a dedicated **CALM** entry to the activity bar. Selecting it opens the **Model Elements** view, which lists the contents of the active CALM document.
+The CALM Canvas opens for files matching these naming patterns:
-
+| Pattern | Example |
+| --- | --- |
+| `*.calm.json` | `payments.calm.json` |
+| `*.architecture.json` | `platform.architecture.json` |
+| `*.solution.json` | `checkout.solution.json` |
+| `*.template.json` | `microservice.template.json` |
+| `*.standard.json` | `tls-policy.standard.json` |
+| `*.guideline.json` | `naming.guideline.json` |
+| `*.pattern.json` | `event-driven.pattern.json` |
-The right-hand preview panel is opened explicitly โ see [Interactive Preview](#interactive-preview) below.
+Right-click any matching file in the explorer and select **CALM: Open Canvas** to launch the visual editor.
---
-## Tree View Navigation
-
-The **Model Elements** view groups the active document's contents into three top-level branches: **Nodes**, **Relationships**, and **Flows**. Expanding a branch reveals every element of that type defined in the document.
-
-
+## Interface Layout
-Clicking any element focuses the corresponding range in the JSON editor. The view stays in sync with the active document โ switching tabs updates the tree.
+The canvas opens in a panel beside your JSON editor. The interface consists of:
-### Search & Filter
+- **Node Palette** (left) โ drag-and-drop components, standards, and guidelines onto the canvas
+- **Canvas** (center) โ interactive ReactFlow diagram showing nodes and relationships
+- **Properties Panel** (right) โ edit selected node/edge properties, controls, and metadata
+- **Toolbar** (top) โ layout, validate, apply patterns, export, and more
-For larger architectures, use **Search Model Elements** (the magnifier icon at the top of the view, or the command of the same name in the palette) to filter the tree to elements matching a substring. The input box prompt reads *"Search CALM Architecture Elements"*; type any node-id substring and press **Enter**.
+### Demo Video
-
+
-A **Filtering by โฆ** banner appears at the bottom of the view while a filter is active. Click its clear button (or run **Clear Search**) to restore the full tree.
+*Watch the CALM Canvas in action: drag-and-drop nodes, draw relationships, apply standards, validate, and export.*
---
-## Interactive Preview
+## Visual Canvas Editor
-The preview panel renders the active CALM document as an interactive diagram next to the JSON source.
+The canvas renders your CALM architecture as an interactive diagram that you can edit directly.
-
+### Adding Nodes
-**Open the preview** with any of:
+Drag nodes from the **Components** palette on the left:
-- Keyboard: `Cmd+Shift+C` (macOS) / `Ctrl+Shift+C` (Windows / Linux)
-- Command Palette โ **CALM: Open Preview**
-- Right-click in the editor โ **CALM: Open Preview**
+- **Infrastructure nodes** โ services, databases, actors, web clients, containers
+- **Workspace building blocks** โ reusable components from your workspace's `building-blocks/` folder
+- **Standards & Guidelines** โ drag onto a node to attach compliance controls
-**Diagram interactions:**
+You can also drop nodes from **Extension Packs** if configured.
-- Click any node to focus its definition in the JSON editor.
-- The preview re-renders automatically when you save the file.
-- Use the floating controls in the top-right of the diagram to zoom or reset the view.
+### Drawing Relationships
-The preview has three tabs at the top โ **Docify** (the rendered view shown above), **Template** (the raw template source for the active document), and **Model** (the parsed model). See [Documentation Generation](#documentation-generation) below for the full breakdown.
+Connect nodes by dragging from a handle (the small dots on node edges) to another node. New connections default to a `connects` relationship type.
----
+### Editing Properties
-## Themes
+Click any node or edge to open its properties in the right panel:
-The preview's colour palette is controlled by the `calm.docify.theme` setting. Four explicit themes are available, plus `auto` which follows your VS Code colour theme.
+**Node properties:**
+- Name, Type, Description
+- Interfaces (add/remove)
+- Controls (with validation constraints)
+- Custom metadata
+- Visual appearance (background/text colour overrides)
-| Light | Dark |
-| --- | --- |
-|  |  |
+**Edge properties:**
+- Relationship type (`connects`, `interacts`, `deployed-in`, `composed-of`)
+- Direction (Source โ Target, Bidirectional, No Arrows)
+- Line style (Solid, Dashed, Dotted)
+- Protocol (for `connects` and `interacts`)
+- Description (shown as edge label)
-The two high-contrast themes (`high-contrast-light` and `high-contrast-dark`) follow the same pattern but use VSCode's higher-contrast palettes for accessibility โ set the `calm.docify.theme` setting and your editor's high-contrast workbench theme together to use them.
-Configure in `settings.json`:
+### Containers
-```json
-"calm.docify.theme": "auto"
-```
+Drop a container node to create a grouping region. Drag child nodes into it to establish `deployed-in` or `composed-of` relationships. Container roles include:
-Acceptable values: `light`, `dark`, `high-contrast-light`, `high-contrast-dark`, `auto`.
+- Default, Region (Primary/Secondary), Cluster, Availability Zone, Solution
---
-## Layout Engines
+## Standards & Guidelines
-The diagram supports two layout engines, configured by `calm.preview.layout`:
+The palette shows standards and guidelines discovered from your workspace's `standards/` and `guidelines/` folders (markdown files with YAML front-matter defining controls).
-| ELK (default) | Dagre |
-| --- | --- |
-|  |  |
+### Dropping Standards onto Nodes
-- **ELK** (Eclipse Layout Kernel) โ better automatic placement for complex diagrams; improved edge routing and hierarchy handling. Recommended for most architectures.
-- **Dagre** โ the classic Mermaid layout engine. Choose this if you prefer Mermaid's traditional layout behaviour.
+Drag a standard from the palette and drop it directly onto an existing node:
-The setting applies workspace-wide. Individual templates can override it from the widget's frontmatter โ see [widget configuration](../core-concepts/widgets) โ for example:
+1. The standard's **controls are merged** into the target node
+2. A **standards node** is created on the canvas (or reused if already present)
+3. A **dotted "adheres to" edge** connects the target node to the standards node
+
+This creates a visible compliance relationship in your architecture diagram. In CALM JSON, it produces a standard `connects` relationship with `metadata: { "line-style": "dotted" }`.
-```yaml
----
-widget-options:
- block-architecture:
- layout-engine: dagre
---
-```
-Or inline in a Handlebars template:
+## Bidirectional Relationships
-```handlebars
-{{block-architecture this layout-engine="dagre"}}
-```
+To model a bidirectional connection between two nodes:
----
+1. Select the edge between them
+2. In the Properties panel, change **Direction** to "Bidirectional โ"
-## Real-Time Validation
+In the CALM JSON, this produces two `connects` relationships (AโB and BโA) โ fully schema-compliant. The canvas merges paired relationships into a single visual edge with arrows on both ends.
-Open or save a CALM document and the extension validates it against the bundled CALM schemas. Errors and warnings appear in the **Problems** panel; clicking an entry jumps to the offending line.
+---
-
+## Line Styles
-Validation is triggered on:
+Edges support three line styles:
-- Opening a CALM document
-- Saving (`Cmd+S` / `Ctrl+S`)
-- Switching to a different editor tab
+| Style | Appearance | Use case |
+| --- | --- | --- |
+| **Solid** | โโโ | Standard connections |
+| **Dashed** | - - - | Optional or planned connections |
+| **Dotted** | ยท ยท ยท | Compliance/governance references |
-The extension identifies a file as CALM by its `$schema` reference, so non-CALM JSON files are left untouched. Schemas are bundled with the VSIX โ validation works offline.
+Change line style in the edge Properties panel. Non-default styles are stored in the relationship's `metadata["line-style"]`.
---
-## Timeline Navigation
-
-When the active editor is a CALM timeline document โ a JSON file whose `$schema` references `calm-timeline.json` and whose top-level shape includes a `moments` array โ the **Model Elements** sidebar switches into **timeline mode**. Each moment in the timeline becomes a navigable item in the sidebar, with the **current moment** marked by a star.
+## Theming
-
+The canvas automatically follows your VS Code colour theme. When you switch between light and dark themes, the canvas background, panels, toolbars, and text update immediately โ no configuration needed.
-### Authoring a timeline document
+Node diagram colours (service green, database green, webclient blue, etc.) remain fixed as they represent semantic node types.
-A minimal `calm-timeline.json` document looks like this:
+---
-```json
-{
- "$schema": "https://calm.finos.org/release/1.2/meta/calm-timeline.json",
- "current-moment": "initial",
- "moments": [
- {
- "unique-id": "initial",
- "node-type": "moment",
- "name": "Initial Architecture",
- "description": "The first version of the system",
- "valid-from": "2024-01-01",
- "details": {
- "detailed-architecture": "arch-v1.json"
- }
- },
- {
- "unique-id": "enhanced",
- "node-type": "moment",
- "name": "Enhanced Architecture",
- "description": "Adds a caching layer and an API gateway",
- "valid-from": "2024-06-01",
- "details": {
- "detailed-architecture": "arch-v2.json"
- }
- }
- ],
- "metadata": {
- "title": "Payments Platform Timeline",
- "description": "Architecture evolution across 2024"
- }
-}
-```
+## Layout
-Each moment is a versioned snapshot. The `details.detailed-architecture` field points to the architecture file representing the system at that moment โ either a relative path (resolved against the timeline document's folder) or a URL that you map via [Multi-Document Navigation](#multi-document-navigation).
+The toolbar offers two auto-layout options:
-The `current-moment` field tells the extension which moment is the current production-deployed state. That moment renders with the star icon in the sidebar; non-current moments use a hollow circle.
+- **โ Layout** โ top-to-bottom (vertical) arrangement
+- **โ Layout** โ left-to-right (horizontal) arrangement
-### How the extension uses it
+You can also manually reposition nodes by dragging them. Positions are persisted in the CALM JSON's `metadata._layout` field.
-- **Sidebar grouping** โ the **Model Elements** view replaces its usual Nodes / Relationships / Flows groups with the single **๐ Architecture Timeline** group. Each child item is a moment, labelled with its `name` and `valid-from` date.
-- **Click to open** โ clicking a moment opens the architecture file referenced by its `details.detailed-architecture`. The preview, validator, and tree all re-target the newly opened file.
-- **Current-moment indicator** โ the star marker means "this is the baseline" โ useful for orienting yourself when a timeline contains many historical snapshots.
-- **Relative-path resolution** โ paths inside `details.detailed-architecture` are resolved relative to the timeline document. If you need to resolve URLs to local files, configure `calm.urlMapping` (see [Multi-Document Navigation](#multi-document-navigation)).
+---
-### When to use a timeline
+## Validation
-A timeline document is the right tool when:
+Click **Validate** in the toolbar to check your architecture against the CALM schema. Results appear in a panel at the bottom of the canvas:
-- The architecture has evolved through multiple distinct versions you want to keep traceable side-by-side.
-- You need an at-a-glance view of "what we have today" vs "what we had before" vs "what's planned".
-- Reviewers and architects need to navigate between versions without remembering filenames.
+- Errors (red) and warnings (yellow) are listed with messages
+- Click an issue to highlight the relevant node on the canvas
+- A green "Architecture is valid" message confirms compliance
-If you only have a single architecture, you don't need a timeline document โ the extension's standard tree view is sufficient.
+Validation uses bundled CALM schemas โ no network access required.
-For the concept behind timelines (explicit vs implied, how the Hub renders them) see [Explicit vs. Implied Timelines](../core-concepts/timelines#explicit-vs-implied-timelines).
---
-## Multi-Document Navigation
+## Patterns & Templates
-Real-world CALM models are usually split across many files. A top-level system architecture references downstream service architectures by URL, each service architecture may reference deployment-detail files, and so on. The extension uses a **URL-to-local-path mapping** to resolve these references against files on your disk, so clicking through the diagram opens the right file every time.
+### Apply Pattern
-### How it works
+Click **Apply Pattern** to merge a predefined architecture pattern into your current canvas. Patterns are loaded from your workspace.
-A node in a parent architecture uses the `details.detailed-architecture` field to point at a child document:
+### New from Pattern
-```json
-{
- "unique-id": "payment-service",
- "name": "Payment Service",
- "node-type": "container",
- "details": {
- "detailed-architecture": "https://specs.internal/payment-service"
- }
-}
-```
+Use the **โฎ menu โ New from Pattern** to start a fresh architecture from a pattern template.
-In production, that URL would resolve to a real document published in CALM Hub. While authoring locally, you tell the extension *where the local copy of each URL lives* via a mapping document. The extension reads that mapping, swaps URLs for paths, and clicks in the preview open the local file.
+### Templates
-### Creating `calm-mapping.json`
+Use **โฎ menu โ Templates** to apply a template that scaffolds a complete architecture structure.
-The mapping is a flat JSON object โ keys are URLs (exactly as they appear in `detailed-architecture` fields), values are paths to the local files.
-
-```json
-{
- "https://specs.internal/payment-service": "./services/payment-service.json",
- "https://specs.internal/inventory": "./services/inventory.json",
- "https://specs.internal/notifications": "./services/notifications.json"
-}
-```
+---
-**Rules and gotchas:**
+## Building Block Creator
-| Rule | Detail |
-| --- | --- |
-| **One mapping file per workspace** | The extension reads a single mapping document. If you maintain multiple, combine them or switch the active one via the setting. |
-| **Keys must match exactly** | URL matching is a string compare. A trailing slash, casing difference, or extra path segment in the key vs. the `detailed-architecture` value will silently miss. |
-| **Values are paths, not URLs** | Use a relative path (recommended) or an absolute file-system path. Don't put another URL on the right-hand side. |
-| **Relative paths resolve against the mapping file's directory** | `"./services/foo.json"` from a mapping at `/calm/calm-mapping.json` resolves to `/calm/services/foo.json` โ **not** to `/services/foo.json`. Put the mapping file in the folder whose relative paths you want to use. |
-| **The mapping file can sit anywhere in the workspace** | Convention is the workspace root, but a `calm/` or `architecture/` subfolder is equally valid. |
-| **The filename can be anything** | `calm-mapping.json` is the convention but the extension doesn't enforce it โ it reads whichever path you point the setting at. |
-| **Invalid JSON is logged, not fatal** | The extension surfaces a warning in its log channel and proceeds without the mapping. Navigation falls back to "no mapping configured" behaviour. |
-
-### Pointing the extension at it
-
-Add the workspace-relative path to your VS Code settings (either `.vscode/settings.json` for the workspace, or your user settings if you always use the same layout):
-
-```json
-"calm.urlMapping": "calm-mapping.json"
-```
-
-Or, if the mapping sits in a subfolder:
-
-```json
-"calm.urlMapping": "calm/calm-mapping.json"
-```
-
-The path is resolved against the first workspace folder. The extension watches this setting โ changing it resets the navigation service so the next click picks up the new mapping immediately, without needing a window reload.
-
-### A complete example
-
-Workspace layout:
-
-```
-my-architecture/
-โโโ .vscode/
-โ โโโ settings.json
-โโโ calm-mapping.json
-โโโ system.json
-โโโ services/
- โโโ payment-service.json
- โโโ inventory.json
-```
-
-`.vscode/settings.json`:
-
-```json
-{
- "calm.urlMapping": "calm-mapping.json"
-}
-```
-
-`calm-mapping.json` (note: paths are relative to *this file*, which sits in the workspace root):
-
-```json
-{
- "https://specs.internal/payment-service": "./services/payment-service.json",
- "https://specs.internal/inventory": "./services/inventory.json"
-}
-```
-
-`system.json` (excerpt):
-
-```json
-{
- "nodes": [
- {
- "unique-id": "payment-service",
- "name": "Payment Service",
- "node-type": "container",
- "details": {
- "detailed-architecture": "https://specs.internal/payment-service"
- }
- }
- ]
-}
-```
-
-With this setup, clicking the **Payment Service** node in the preview of `system.json` opens `services/payment-service.json` in a new editor column. The same mapping is also used by the CALM CLI's `docify` command (see [`calm docify`](cli#documenting-architectures-docify)) โ so authoring once works for both interactive and batch documentation generation.
-
-### Troubleshooting
-
-- **Clicking a node does nothing, or shows "No URL mapping configured"** โ the setting isn't set, the path is wrong, or the mapping file is missing. Open VS Code's **Output** panel and switch the channel to **CALM** to see the navigation service's diagnostic log.
-- **Click opens the wrong file** โ your mapping value is interpreted relative to the mapping file's location, not the workspace root. Move the mapping file or adjust the paths.
-- **Click logs "Invalid JSON in URL mapping file"** โ there's a syntax error in the mapping (missing comma, trailing comma, etc.). The extension keeps running without the mapping until you fix it.
+Use **โฎ menu โ Create Node** to create a reusable building block from scratch. Define its name, type, description, interfaces, and controls, then save it to your workspace's `building-blocks/` folder for reuse across architectures.
---
-## Documentation Generation
+## Drill-Down Navigation
-The preview panel has three tabs at the top of the webview โ each shows a different view of the active architecture:
+Double-click a node that references a building block or sub-architecture to **drill into** its detail. A breadcrumb trail appears at the top showing your navigation path. Click any breadcrumb segment to navigate back.
-| Tab | What it shows |
-| --- | --- |
-| **Docify** | The rendered documentation view โ heading plus an interactive Mermaid diagram of the architecture, produced through the CALM widget pipeline. This is the default tab shown when you open the preview. |
-| **Template** | The raw source of the active Handlebars / Markdown template, shown as syntax-highlighted text. A source viewer, not a renderer โ use it to confirm which template is in scope, not to preview output. |
-| **Model** | The CALM model as the extension sees it after parsing โ useful for debugging schema or normalisation issues. |
+Building blocks open in **read-only mode** (indicated by a yellow banner).
-The Docify tab is what most users mean when they say "the preview":
+---
-
+## Export
-To produce static documentation outside the preview, use either of:
+Click **Export SVG** in the toolbar to export the current canvas as a vector image. The export uses the current theme background and preserves all node/edge styling.
-- **CALM: Create Documentation Website** (`calm.createWebsite`) โ runs the docify pipeline against the workspace and writes an HTML site to disk.
-- The equivalent CLI command โ see [`calm docify`](cli#documenting-architectures-docify) โ for batch generation in CI or scripts.
+---
-Both consume the same `calm.urlMapping` configuration (see [Multi-Document Navigation](#multi-document-navigation)), so authoring once works for interactive, batch, and CI documentation flows.
+## Generate Spec
-Pair this with the [Handlebars Templates](../tutorials/intermediate/13-handlebars-templates) tutorial if you're new to authoring custom templates.
+Click **Generate Spec** to invoke the CALM Agent (via Copilot Chat) to produce a Solution Design Specification document from your architecture. The agent reads your architecture file and any referenced standards to generate a comprehensive 13-section design document.
---
-## Configuration Reference
+## Real-Time Sync
-All settings live under the `calm.*` prefix in `settings.json` (`Cmd+,` / `Ctrl+,`).
+The canvas stays in sync with the JSON file:
-| Setting | Type | Default | Description |
-| --- | --- | --- | --- |
-| `calm.cli.path` | string | `./cli` | Path to the CALM CLI entry. Falls back to internal validation when absent. |
-| `calm.files.globs` | string[] | `["calm/**/*.json", "calm/**/*.y?(a)ml"]` | Glob patterns the extension uses to discover CALM model files. |
-| `calm.template.globs` | string[] | `["**/*.md", "**/*.markdown", "**/*.hbs", "**/*.handlebars"]` | Glob patterns for template files that may reference architectures. |
-| `calm.docify.theme` | enum | `auto` | Diagram colour theme. See [Themes](#themes). |
-| `calm.preview.layout` | enum | `elk` | Layout engine for the diagram. See [Layout Engines](#layout-engines). |
-| `calm.urlMapping` | string | `""` | Path to a JSON file mapping URLs to local files. See [Multi-Document Navigation](#multi-document-navigation). |
-| `calm.schemas.additionalFolders` | string[] | `[]` | Extra folders to load CALM schemas from. See [Schema Development](#schema-development). |
+- **File โ Canvas**: Edit the JSON and save โ the canvas updates automatically
+- **Canvas โ File**: Edit on the canvas โ the JSON file updates in real time
+- **External changes**: File watcher detects changes from git, other editors, etc.
---
-## Schema Development
-
-If you're authoring custom CALM schemas (extending the official ones, or experimenting with a new domain), the extension can load schemas from arbitrary folders so your models validate against your in-progress definitions:
+## Configuration Reference
-```json
-"calm.schemas.additionalFolders": ["./my-schemas", "./custom-calm-schemas"]
-```
+All settings live under the `calm.*` prefix in `settings.json`.
-Each file in those folders is indexed by its `$id`. Reference the `$id` from your CALM documents' `$schema` field and the extension uses your local copy without a round-trip to the network.
+| Setting | Type | Default | Description |
+| --- | --- | --- | --- |
+| `calm.urlMapping` | string | `""` | Path to a JSON file mapping URLs to local files for multi-document navigation. |
+| `calm.schemas.additionalFolders` | string[] | `[]` | Extra folders to load CALM schemas from for validation. |
---
@@ -389,10 +250,8 @@ Each file in those folders is indexed by its `$id`. Reference the `$id` from you
| Action | macOS | Windows / Linux |
| --- | --- | --- |
-| Open preview | `Cmd+Shift+C` | `Ctrl+Shift+C` |
+| Open Canvas | `Cmd+Shift+K` | `Ctrl+Shift+K` |
| Command Palette | `Cmd+Shift+P` | `Ctrl+Shift+P` |
-| Show Hover | `Cmd+K Cmd+I` | `Ctrl+K Ctrl+I` |
-| Show Problems Panel | `Cmd+Shift+M` | `Ctrl+Shift+M` |
---
@@ -400,5 +259,4 @@ Each file in those folders is indexed by its `$id`. Reference the `$id` from you
- **Issues & feature requests:** [github.com/finos/architecture-as-code/issues](https://github.com/finos/architecture-as-code/issues)
- **Source:** [calm-plugins/vscode](https://github.com/finos/architecture-as-code/tree/main/calm-plugins/vscode)
-- **Beginner walkthrough:** [Install the CALM VS Code Extension](../tutorials/beginner/04-vscode-extension)
- **CLI equivalent:** [`calm` CLI](cli) for batch use outside the editor
diff --git a/docs/static/img/vscode/01-activity-bar.png b/docs/static/img/vscode/01-activity-bar.png
deleted file mode 100644
index 894842c40..000000000
Binary files a/docs/static/img/vscode/01-activity-bar.png and /dev/null differ
diff --git a/docs/static/img/vscode/02-tree-view.png b/docs/static/img/vscode/02-tree-view.png
deleted file mode 100644
index 57a7b05ea..000000000
Binary files a/docs/static/img/vscode/02-tree-view.png and /dev/null differ
diff --git a/docs/static/img/vscode/03-tree-search.png b/docs/static/img/vscode/03-tree-search.png
deleted file mode 100644
index 5b4b3a10c..000000000
Binary files a/docs/static/img/vscode/03-tree-search.png and /dev/null differ
diff --git a/docs/static/img/vscode/04-preview-hero.png b/docs/static/img/vscode/04-preview-hero.png
deleted file mode 100644
index bf6fb4a75..000000000
Binary files a/docs/static/img/vscode/04-preview-hero.png and /dev/null differ
diff --git a/docs/static/img/vscode/05-theme-dark.png b/docs/static/img/vscode/05-theme-dark.png
deleted file mode 100644
index 4a7ce791f..000000000
Binary files a/docs/static/img/vscode/05-theme-dark.png and /dev/null differ
diff --git a/docs/static/img/vscode/05-theme-light.png b/docs/static/img/vscode/05-theme-light.png
deleted file mode 100644
index 0db838697..000000000
Binary files a/docs/static/img/vscode/05-theme-light.png and /dev/null differ
diff --git a/docs/static/img/vscode/06-layout-dagre.png b/docs/static/img/vscode/06-layout-dagre.png
deleted file mode 100644
index 10f70689c..000000000
Binary files a/docs/static/img/vscode/06-layout-dagre.png and /dev/null differ
diff --git a/docs/static/img/vscode/06-layout-elk.png b/docs/static/img/vscode/06-layout-elk.png
deleted file mode 100644
index bf6fb4a75..000000000
Binary files a/docs/static/img/vscode/06-layout-elk.png and /dev/null differ
diff --git a/docs/static/img/vscode/07-validation-problems.png b/docs/static/img/vscode/07-validation-problems.png
deleted file mode 100644
index 62d9bb973..000000000
Binary files a/docs/static/img/vscode/07-validation-problems.png and /dev/null differ
diff --git a/docs/static/img/vscode/09-timeline.png b/docs/static/img/vscode/09-timeline.png
deleted file mode 100644
index ef158a6a5..000000000
Binary files a/docs/static/img/vscode/09-timeline.png and /dev/null differ
diff --git a/docs/static/img/vscode/10-docify.png b/docs/static/img/vscode/10-docify.png
deleted file mode 100644
index 4a5c15fc3..000000000
Binary files a/docs/static/img/vscode/10-docify.png and /dev/null differ
diff --git a/docs/static/img/vscode/_manifest.json b/docs/static/img/vscode/_manifest.json
deleted file mode 100644
index 117aaeffa..000000000
--- a/docs/static/img/vscode/_manifest.json
+++ /dev/null
@@ -1,97 +0,0 @@
-{
- "generatedAt": "2026-05-28T08:54:06.001Z",
- "vscodeVersion": "1.121.0",
- "shots": [
- {
- "name": "01-activity-bar.png",
- "width": 1600,
- "height": 1000,
- "bytes": 171281,
- "sha256": "e99c82f55b8ce19502b6c533b4a0d564a82cf52cfe42361f839df85c34d80fc4"
- },
- {
- "name": "02-tree-view.png",
- "width": 1600,
- "height": 1000,
- "bytes": 174926,
- "sha256": "4802200620e687ffb93ab97092a4c8e1f7bb52641481c815d57c08551f9f5ec0"
- },
- {
- "name": "03-tree-search.png",
- "width": 1600,
- "height": 1000,
- "bytes": 179409,
- "sha256": "f30724d953aa2f7a144437219b54f10352ddc20230db776f0e9ad594e5279ce0"
- },
- {
- "name": "04-preview-hero.png",
- "width": 1600,
- "height": 1000,
- "bytes": 209427,
- "sha256": "23fc88ba23dff88f927ba93c1da61afe490542a08025a4e35c806965876123cb"
- },
- {
- "name": "05-theme-light.png",
- "width": 1600,
- "height": 1000,
- "bytes": 208203,
- "sha256": "9c2cbc3741cc80dc9b3f2ef37cef5c0731f4879d08d769b56bc8dcec8ced6b3d"
- },
- {
- "name": "05-theme-dark.png",
- "width": 1600,
- "height": 1000,
- "bytes": 202194,
- "sha256": "ed7d22249d2ab5ef1834c64b0fe8caaa1540d0a7ebaeb5c4ef83a25b05d00c2b"
- },
- {
- "name": "06-layout-elk.png",
- "width": 1600,
- "height": 1000,
- "bytes": 209427,
- "sha256": "23fc88ba23dff88f927ba93c1da61afe490542a08025a4e35c806965876123cb"
- },
- {
- "name": "06-layout-dagre.png",
- "width": 1600,
- "height": 1000,
- "bytes": 214453,
- "sha256": "80bfc7628a6dc86af166d107fbb41d930ef0afe61b10f4ac5844655e70e298fc"
- },
- {
- "name": "07-validation-problems.png",
- "width": 1600,
- "height": 1000,
- "bytes": 186104,
- "sha256": "6b0d854c8ad44c473e75a8839aeef89df56b361b90fbbdf6166eca221d1c3e6f"
- },
- {
- "name": "09-timeline.png",
- "width": 1600,
- "height": 1000,
- "bytes": 130341,
- "sha256": "18c051f0b351937c767b611d1f74de8a12d576f9c8e4f8c2311b6ce22eac2453"
- },
- {
- "name": "10-docify.png",
- "width": 1600,
- "height": 1000,
- "bytes": 146974,
- "sha256": "6616a98a3b404694d0d7966caecfb65336880ade8a03ef53dcee12362c76b698"
- }
- ],
- "skipped": [
- {
- "name": "05-theme-hc-light",
- "reason": "TODO โ see issue #2529"
- },
- {
- "name": "05-theme-hc-dark",
- "reason": "TODO โ see issue #2529"
- },
- {
- "name": "08-hover",
- "reason": "TODO โ see issue #2529"
- }
- ]
-}
diff --git a/docs/static/img/vscode/canvas-poster.png b/docs/static/img/vscode/canvas-poster.png
new file mode 100644
index 000000000..e05f128bc
Binary files /dev/null and b/docs/static/img/vscode/canvas-poster.png differ
diff --git a/docs/static/video/calm-canvas-demo.mp4 b/docs/static/video/calm-canvas-demo.mp4
new file mode 100644
index 000000000..788d6faac
Binary files /dev/null and b/docs/static/video/calm-canvas-demo.mp4 differ
+ 
-
- 
-