IjyaLabs DaaCini for VS Code · Cursor · VSCodium

Live preview, syntax highlighting, snippets, and SVG export for IjyaLabs DaaCini diagrams — network, cloud, security, architecture, flow, and analytics diagrams written as text (.daacini files, plus legacy .mpp / .mmp). Works in VS Code (Marketplace) and in Cursor / VSCodium (Open VSX).

Thin client — rendering happens on the DaaCini service (source in → SVG out); no engine is bundled. Point it at your own daacini serve with the ijyalabs.endpoint setting for private/offline rendering.

Self-contained — no server required. Unlike the Obsidian plugin (which calls a daacini serve instance), this extension bundles the whole engine (media/engine.mjs) and renders in the extension host, posting the SVG to a minimal webview. It works fully offline and renders identically to the studio, the daacini CLI, and the HTTP API.

Features

Two deliberately separate preview modes for .md files — pick the one you actually want, not one command trying to guess:

On a .md file, both appear as icon buttons in the editor title bar — click either directly, no shortcut or command-palette search needed:

• "Open Diagram Preview" (Diagrams Only) — the $(open-preview) icon, or Ctrl/Cmd+K D on a .daacini/.mpp/.mmp file, or via the command palette. Extracts and shows only the fenced diagrams, discarding everything else — correct for a .daacini file (no prose to begin with), and useful on a .md file when you just want the diagrams themselves, side by side, with no surrounding text.
• "Open Full Document Preview" (Diagrams Inline) — the $(preview) icon, or via the command palette. Shows the whole document — headings, prose, everything — with diagrams rendered inline exactly where their fences are. This delegates to VS Code's own built-in Markdown preview (so it's not a second rendering engine to keep in sync — just a clearly-labeled, discoverable entry point under this extension's own command category, since VS Code's native Markdown: Open Preview to the Side command being a different command from anything IjyaLabs-branded was a real, easy mixup). No keybinding of its own — Ctrl/Cmd+K M is already VS Code's own built-in "Change Language Mode" shortcut, so binding it there would silently collide; use the icon or command palette instead.

Other features:

• Theme-synced — follows the editor's light/dark theme (configurable) unless the diagram picks its own theme: directive.
• ~26 diagram kinds — the full engine: network/cloud/kubernetes/C4, flowchart, sequence, state, class, ER, gantt, journey, pie, xychart, bubble, funnel, spider, heatmap, treemap, mindmap, timeline, security, org, decision, wireframe, venn.
• Syntax highlighting + snippets for the DSL (type network, aws, flowchart, c4, sequence, pie, … then Tab).
• ```daacini (plus legacy ```mmp / ```mermaid-pp) fenced code blocks render inline in both .md preview modes above. Rendered client-side; ELK runs on the main thread so it works under the preview's strict CSP with no server. If you use Markdown Preview Enhanced, use one of the two commands above (or VS Code's own native Markdown: Open Preview to the Side) instead — third-party preview panes don't load markdown.previewScripts from this extension.
• Export as SVG — IjyaLabs DaaCini: Export Diagram as SVG from the command palette.

Usage

1. Open (or create) a .daacini file, e.g.:

   network
   title: Edge → Core
   Internet -> Firewall
   Firewall -> Core Switch
   Core Switch -> Web Server
   Core Switch -> Database
   

2. Press Ctrl/Cmd+Shift+V (or click the preview icon) to open the live preview.

3. Edit — the preview updates automatically. Run Export Diagram as SVG to save.

Settings

Why diagrams sometimes render dark by default

The engine's own default theme is paper (light) — the standalone daacini CLI, the studio, and the HTTP API all render light unless told otherwise. Inside VS Code, though, .daacini preview + Export as SVG and the .md Markdown preview both sync to your editor's active color theme by design (ijyalabs.syncTheme, on by default) — a dark editor theme (Dark/HighContrast) renders diagrams in ijyalabs.darkTheme (midnight), a light one in ijyalabs.lightTheme (paper). So "why is my exported/previewed image dark?" almost always means the editor itself is in a dark color theme.

Precedence (highest wins):

1. An explicit theme: directive in the diagram source (e.g. theme: paper as the first line after the kind keyword) — always wins, in every surface (CLI/API/studio/VS Code).
2. ijyalabs.syncTheme (VS Code preview + export + Markdown fences only) — maps the editor's light/dark state to ijyalabs.lightTheme / ijyalabs.darkTheme.
3. The engine default, paper — applies when sync is off and the source has no directive (this is what the plain terminal daacini CLI always falls back to, since it has no editor theme to sync with).

To force light output regardless of the editor's theme: add theme: paper to the diagram source, or set "ijyalabs.syncTheme": false in VS Code settings.

Implementation note: the .daacini preview/export path (themeForEditor() in extension.js) reads ijyalabs.lightTheme/darkTheme from settings; the Markdown-fence path (editorTheme() in media/markdown-preview.js, running inside the preview webview) currently maps dark/light straight to the midnight/paper theme names rather than reading those settings — so a custom lightTheme/darkTheme value is honored in the .daacini preview but not yet in the Markdown-fence preview.

Install (development)

This folder is a complete VS Code extension. To try it locally:

cd integrations/vscode-daacini
# open in VS Code and press F5 (Extension Development Host), or package it:
npx @vscode/vsce package        # → ijyalabs-daacini-vscode-<version>.vsix
code --install-extension ijyalabs-daacini-vscode-*.vsix

The bundled engine (media/engine.mjs) is generated by the repo build — run npm run build at the repo root once (it copies dist/core.node.mjs into media/engine.mjs), then F5 or vsce package. Re-run after changing core/.

Proprietary — free to use; source retained by the copyright holder. See the repo LICENSE and NOTICE.md. Guiding transformation.