Umlay — VS Code Extension

🌐 Japanese support page: https://umlay.keydrop.net/vscode/

Umlay is a text-first UML / ER modeling DSL. This extension brings the full Umlay experience into VS Code: syntax highlighting, live diagnostics, hover, completion, F12 navigation, F2 rename, ⌘. quick fixes, ⇧⌥F formatting, and a React-based diagram preview that mirrors the web editor.

Features

Language server (always on)

• Live diagnostics — parse errors plus 61 lint rules covering spec 1.10 (L001–L064 + S/W/C/R rules). New for spec 1.10: L059–L064 for @flowchart_diagram views. Mode switchable via umlay.diagnostics.mode (draft / beta / strict).
• Hover — model intent, @@doc / @@md Markdown bodies, attribute table.
• Go to Definition (F12) — jumps from @ref(User.id) and dotted type references to the declaring model / enum / view.
• Completion — context-aware: keywords, primitive types, stereotypes (after @), block directives (after @@), view kinds, @ref targets, and include: globs.
• Document Symbols — namespace → model / enum / view hierarchy for the Outline panel and breadcrumbs.
• Rename (F2) — renames model / enum names file-wide.
• Quick Fix (⌘.) — one-click fixes for common lint findings.
• Format Document (⇧⌥F) — canonical whitespace, attribute order, and directive ordering.

Preview (React webview)

Open from the editor title-bar icon, or Umlay: Open Preview to the Side in the Command Palette.

• View tabs — one tab per view declaration, plus All (stacked grid) and Document (IR-derived Markdown with inline SVG).
• Zoom & pan — wheel zooms anchored to the cursor, drag to pan, keyboard shortcuts + / - / 0 / F. Per-view scale persists across reloads.
• Click → jump — click any model / task / participant in the diagram and the editor reveals that declaration.
• Diagnostics sidebar — parse + lint findings grouped by severity. Click an entry to reveal the matching source line.
• Theme aware — light, dark, and high-contrast all switch the diagram palette automatically.

DSL support

• File extensions: .umlay (plain) and .umlay.md (literate — ```umlay fenced blocks inside Markdown).
• 12 view kinds — @er_diagram, @class_diagram, @sequence_diagram, @component_diagram, @deployment_diagram, @package_diagram, @state_machine, @activity_diagram, @wbs_diagram, @gantt_chart, @composite, and @flowchart_diagram (new in spec 1.10 / RFC 0055 — classic flowcharts with start / end / process / decision / io / document / subroutine shapes inside a flow { ... } block).
• Built-in snippets: imodel, ient, ienum, iview, iseq, igantt, iref, imd, idoc, idep, isample, iimpl, icritical, and more.
• Syntax highlighting for .umlay directly, plus Markdown injection so .md files show Umlay fences highlighted.

Localization

The extension ships in English by default and Japanese when VS Code's display language is ja. Commands, settings, and runtime messages are all translated.

Quickstart

1. Install the extension.
2. Open or create a .umlay file.
3. Start the preview (title-bar icon or Command Palette → Umlay: Open Preview to the Side).
4. Edit — every keystroke re-parses, re-renders, and re-lints automatically.

Example

namespace shop

enum OrderStatus { DRAFT, CONFIRMED, SHIPPED, CANCELLED }

event OrderConfirmed { orderId UUID!; at Timestamp! }

model Order @aggregate_root @intent("最小の顧客発注") {
  id     UUID!         @id
  status OrderStatus!  @states(initial: DRAFT, final: [SHIPPED, CANCELLED])
  total  decimal!      @inv("total >= 0")

  fn confirm()
    @pre("status == DRAFT")
    @post("status == CONFIRMED")
    @emits(OrderConfirmed)
}

view er         @er_diagram     { include: shop.* }
view order-life @state_machine  { include: shop.Order, shop.OrderStatus }

Settings

Open VS Code settings and search for umlay. to find all configurable options. Highlights:

Commands

Installation

From the Marketplace

Search for "Umlay" in the Extensions panel, or:

code --install-extension Umlay.umlay

From a .vsix file

code --install-extension umlay-<version>.vsix

Or in VS Code: Extensions → … menu → Install from VSIX…

Links

• Web editor: https://umlay.keydrop.net
• Support / docs: https://umlay.keydrop.net/vscode/
• Spec & examples (Apache-2.0): https://github.com/umlay/umlay
• Sponsor the work: https://ofuse.me/umlay

License

Apache-2.0. See LICENSE.