Inkograph Diagrams for VS Code

Render Inkograph diagrams inside VS Code's Markdown preview, plus syntax highlighting for .nib files and ```inkograph code fences.

What it does

• Markdown preview rendering — every ```inkograph fenced code block in a Markdown file renders as a live diagram in the built-in preview (Ctrl/Cmd+Shift+V), drawn by the same engine as the web editor and CLI. (```nib works too, as an alias.) Parse errors show as a readable error box, updated as you type.
• Theme-aware — diagrams follow your VS Code colour theme (light/dark); a fence that declares its own theme { … } block wins, exactly like everywhere else.
• Syntax highlighting — for .nib files and for the diagram code inside Markdown fences, using the grammar generated from the language definition.
• Mermaid migration — the Inkograph: Convert Mermaid to Inkograph command (command palette or editor context menu) rewrites a Mermaid file, or every ```mermaid fence / Azure DevOps ::: mermaid block in a markdown file, as Inkograph — flowcharts, sequence, state, class, ER, pie, gantt, mindmap, timeline, git graphs, user journeys, and architecture diagrams convert; Mermaid-only constructs are dropped with a note.
• Comment toggling, bracket matching, and auto-closing pairs.

# Design doc

~~~inkograph
theme { base: dark }
cart: "Cart"
cart -> pay : "checkout"
~~~

Build and install locally

From the repository root:

pnpm --filter inkograph-vscode package
code --install-extension packages/vscode/inkograph-vscode-*.vsix

How it works

VS Code's Markdown preview renders synchronously, but diagram layout is async. So the extension follows the same split as the Mermaid extension: a markdown-it plugin swaps each diagram fence for an escaped placeholder, and a preview script (which bundles @inkograph/core) renders the placeholders into SVG inside the preview webview. The TextMate grammar is copied from @inkograph/lang at build time — the language definition stays single-sourced.

MIT © the graphly project.