The language

In your editor

A .loadmap is a text file: write it where you write code, with errors as you type, completion, hover, formatting and a live preview of the diagram.

• VS Code, Cursor, VSCodium: the extension loadmap, from the Marketplace or Open VSX, or open it in VS Code.
• Neovim, Helix, or any editor that speaks the language server protocol: npm i -D @loadmap/cli in the project, then the setup below.
• No install: the editor on this site. Copy Share Link in VS Code opens a file there, and Export → Download .loadmap there gives you the file back.

To try it on a model that uses most of the language, take one from an example: .loadmap ↓ over the board of Checkout, Alerts or Search.

Setup

In VS Code (and Cursor, VSCodium and the other editors on Open VSX), install the extension loadmap (jaim3r0jas.loadmap, from the Marketplace or Open VSX). It brings the language server below, highlighting, and a live preview beside the text: loadmap: Open Preview to the Side (Ctrl+K V, ⌘K V on a Mac) draws the file as you type, a click on a box selects its declaration, and Copy Share Link opens the text in this editor. Nothing else to install; loadmap.server.path runs a project's own loadmap instead.

loadmap lsp (in @loadmap/cli) speaks the language server protocol over standard input and output, so an editor that speaks it gets the help the docs' editor has: errors and failing expect lines as you type, completion with snippets, hover with the values at the defaults, the arguments of a call, formatting, quick fixes, go to definition, references, rename and an outline. It needs no browser. Install the CLI in the project (npm i -D @loadmap/cli), then tell the editor about it. Neovim (0.11 or later):

vim.filetype.add({ extension = { loadmap = 'loadmap' } })
vim.lsp.config('loadmap', { cmd = { 'npx', 'loadmap', 'lsp' }, filetypes = { 'loadmap' }, root_markers = { 'package.json' } })
vim.lsp.enable('loadmap')

On Neovim 0.10, start it when a .loadmap file opens instead:

vim.filetype.add({ extension = { loadmap = 'loadmap' } })
vim.api.nvim_create_autocmd('FileType', {
  pattern = 'loadmap',
  callback = function() vim.lsp.start({ name = 'loadmap', cmd = { 'npx', 'loadmap', 'lsp' } }) end,
})

Helix, in languages.toml:

[[language]]
name = "loadmap"
scope = "source.loadmap"
file-types = ["loadmap"]
comment-token = "#"
indent = { tab-width = 2, unit = "  " }
language-servers = ["loadmap"]

[language-server.loadmap]
command = "npx"
args = ["loadmap", "lsp"]

The server reads one file at a time, the whole text on each change, and colours nothing: highlighting stays the editor's.