Meltemi

Diagrams as code, adjusted on a canvas

Code, layout and motion, in files you review.

Meltemi Diagrams is part of the Meltemi family. You write .meltemi text files; the editor draws them beside the code, and every drag, resize or label change on the canvas becomes a small edit of the same text. Flow, sequence, C4 and free diagrams, with motion, exported to SVG, PNG, PDF, video and an HTML player.

Open the app Install Read the documentation

Text you write, a canvas you drag

A diagram is a plain text file in the .meltemi language. Code, layout and motion all live in it, so you review and version a diagram like the rest of your work.

Code

In VS Code the text has diagnostics, completion, rename, formatting and quick fixes. On the command line, validate checks whole projects and exits with 1 when there are errors.

Canvas

Beside the code sits a canvas with a grid, guides, routing and an inspector. Drag a box, double-click a label or connect two boxes: each gesture is one small edit of the text, so the diff of a change shows exactly what moved.

VS Code and the browser

The same canvas runs in the VS Code extension and in the app, which the documentation calls the playground. The app needs no installation; the extension opens the canvas beside any .meltemi file.

This is the small flow diagram that meltemi-diagrams init writes:

language "0.2"

diagram overview: flow {
  title "Overview"
  description "How a request reaches the data"
  direction LR

  client["Client"]
  api["API"] { description "Handles requests" }
  db[("Database")]

  client -> api: "HTTPS" as request
  api -> db: "Reads and writes" as store
}

Four profiles, one language

Each diagram declares its profile, as in diagram overview: flow. All four are written in the same language and drawn on the same canvas.

Diagram profiles
Profile What it draws
flow Flow diagrams: boxes and connectors with notes, tags, data cylinders, decision diamonds, group bands and step labels, laid out automatically with the placements you make kept.
sequence Sequence diagrams: participants, calls, replies, async messages, activations, notes and every fragment (alt, opt, loop, par, break, critical, region), with scenarios you export on their own.
c4 C4 views of one shared model: persons, systems, containers, datastores and components, in context, container and component views. A rename reaches every view.
free Free compositions for slides: boxes in six shapes, text, icons and images, groups and layers.

Motion, and what it exports to

Effects run along connectors: particles, moving dashes and pulses. Stories chain scenes that reveal, hide, highlight and focus parts of a diagram, move a camera and change view with a cut, a fade or a morph. Both run on a deterministic clock, and any frame can be exported.

Exports
Format What you get Notes
SVG One file with its fonts, static or animated with a static fallback. The app and the command line.
PNG A picture at the scale you choose, with an optional transparent background. The app and the command line.
PDF Vector pages with selectable text and links. The command line writes the file; the app uses the browser's print dialog, where Save as PDF keeps the vectors.
HTML player An offline page, or a fragment to embed, that plays a story or a diagram's effects. Pause, progress, scenes, keyboard control, reduced motion and a text summary.
GIF, WebM, MP4 A story or a diagram's effects recorded frame by frame. Video is 1080p at 30 fps by default; GIF is 960 × 540 at 15 fps. In the app, WebM and MP4 depend on the browser's encoders and are disabled where there is none.
HTML catalog One offline page for a whole project: its diagrams and stories by folder, with search and the player. meltemi-diagrams build catalog, or Download in the app.

On the command line, PNG, PDF and video are drawn by an installed Edge, Chrome or Chromium, and video is encoded by an installed FFmpeg. Nothing is downloaded. The app needs neither.

Coming from Mermaid or PlantUML

The importers read Mermaid (flowchart, sequenceDiagram, the C4 diagrams, architecture-beta and block-beta), PlantUML (component, deployment, use case, sequence and C4-PlantUML diagrams, with the preprocessor) and the diagram blocks of Markdown files. Every construct is reported as mapped, approximated or dropped, and the source is never changed. Other diagram types, and the files of editors such as draw.io, Lucidchart or Visio, are not imported.

Install

The app needs no installation. The command line and the editor are for working on files in your own folders.

Command line

It needs Node 22.12 or later.

npm install --global @meltemi/diagrams-cli

The package is @meltemi/diagrams-cli; the command it installs is meltemi-diagrams, also available as mdg. A first diagram: 

meltemi-diagrams init shop
meltemi-diagrams export shop --format png

VS Code

The extension is Meltemi Diagrams, with the id meltemi.meltemi-diagrams. It needs Visual Studio Code 1.95 or later. 

code --install-extension meltemi.meltemi-diagrams

Or search for Meltemi Diagrams in the Extensions view. Open a .meltemi file and the canvas opens beside the code.

No account needed

The app needs no account. It works entirely in your browser, and your work is kept there between visits; without an account, nothing you write is sent to a server. Signing in with GitHub or Google is optional, and it is how you get projects kept between devices, versions, sharing by link (viewing needs no account; editing needs one), editing together, publishing a catalog, and push and pull from the command line. The table says which of these exist today.

Specified, not released. The app, the command line and the editor work today with no account. What signing in adds is specified in the project's documentation and has not been released.
What depends on an account
Capability Status Notes
Draw, edit, import and export in the app Available No account. The project is kept in your browser; Share copies a link that holds the project after the # of its address, a part that never reaches a server.
Projects kept between devices, with versions Not yet Needs an account. A copy of each project in your account, a local copy that also works offline, and versions you can name and restore.
Sharing by link and with named people Not yet A project's link can be private, view-only or editable, and named people are invited by email as viewers or editors. Anyone the link admits can view with no account; editing needs one.
Editing together Not yet Needs an account. See who is in the project, type in the same file at the same time, and undo only your own edits. Up to twenty people in a project.
Publishing a catalog Not yet Needs an account. The project's HTML catalog at a public address on its own domain, apart from the app.
Push and pull from the command line Not yet Needs an account. mdg login keeps a token; push, pull and publish keep a folder in step with a cloud project. Every other command works without it.

The Meltemi IDE does not use this account. It still asks for none.

Documentation and source

The documentation covers getting started, the language, the command line, the editor, the app and the importers. The code is MIT licensed.

Documentation Repository