VS Code and compatible editors

The first-party Kekonic Diagrams extension makes .kdiagram a native editor language. It uses the same browser-compatible language service and rendering pipeline as the CLI and Studio rather than maintaining separate editor semantics.

Language support

Opening a .kdiagram file activates:

• syntax highlighting, comments, bracket matching, and automatic closing pairs
• diagnostics while the document is incomplete or invalid
• completion, hover documentation, definitions, references, and rename
• document symbols, folding, semantic highlighting, formatting, and quick fixes

The extension launches the bundled Kekonic Diagrams language server itself. A global CLI install is not required.

Preview and export

Opening a .kdiagram file auto-opens an interactive side preview by default (diagrams.preview.autoOpen). The preview uses the same <k-diagram> embed controls as the website (pan, zoom, fit, and animation chrome when the diagram defines animations). It follows the active .kdiagram document and matches the editor color theme for accent and neutrals.

You can also open it with Kekonic Diagrams: Open Preview to the Side from the command palette, the editor context menu, the title-bar preview action, or Ctrl+Shift+V / Cmd+Shift+V.

Some editors (including Cursor) may hide custom title-bar actions until you enable them from the editor title overflow checkmark menu. Auto-open and the keybinding still work when the icon is hidden.

Run Kekonic Diagrams: Export SVG to save a portable SVG with its colors resolved (diagrams.preview.theme selects light or dark for export). The exported file does not depend on VS Code CSS variables and can be opened in a browser, image viewer, presentation, or documentation site.

Markdown preview

The extension also renders fenced .kdiagram blocks in VS Code’s built-in Markdown preview:

example.md

```kdiagram
diagram "Checkout" {
  api: gateway "API"
  orders: database "Orders"
  api -> orders
}
```

Markdown-it emits a safe placeholder synchronously. A bundled preview script loads the renderer only when the document contains a .kdiagram fence, then replaces that placeholder with accessible SVG.

Editor preview is not the publishing step. For static-site builds, use the Markdown integration for your host: @kekonic/diagrams-remark for Astro, MDX, Unified, and Docusaurus, or @kekonic/diagrams-markdown-it for VitePress and other Markdown-it hosts. Both render static SVG during the build, so the published page needs no client-side diagram runtime.

When the diagram lives in a standalone .kdiagram file, use the build-tool adapter to import it as SVG, a data URL, source, React, or a custom element.

Cursor and other VS Code derivatives

The extension uses standard VS Code extension APIs and is designed to run in compatible derivatives such as Cursor. Cursor is based on VS Code and supports its extension ecosystem. Releases are published to Open VSX and attached to GitHub Releases as downloadable VSIX files. Install the VSIX manually when an editor does not expose Open VSX in its extension registry.

Compatibility depends on the derivative supporting the VS Code API version declared by the extension. Editor-specific behavior should be reported with the editor name and version.

For agent-assisted authoring in Cursor, Claude Code, Codex, or another Skills CLI host, install the official Kekonic Diagrams skill so the agent grounds the diagram in repository facts and verifies it with the CLI.